这期内容当中小编将会给大家带来有关如何浅析Bootstrap的CSS类名设计，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
创新互联建站专注于企业全网整合营销推广、网站重做改版、黄埔网站定制设计、自适应品牌网站建设、H5场景定制、商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为黄埔等各大城市提供网站开发制作服务。
在构建类似 Bootstrap 这样的 CSS 系统时，保持系统的简单性、稳定性、灵活性是相当重要的。这并非易事，尤其对于大型团队和项目来说，组件的数量可能会变得相当庞大。为了改善这种状况，你不妨考虑用前缀式类名取代链式类名。
在使用 链式类名 方案时，你可能会把一系列特定组件的 CSS 选择符写成这样：
.success { ... } .btn.success { .. } .alert.success { ... }我们在这里设置了一个全局基础类 .success，它可能涵盖了成功按钮和成功提示框之间的所有共性。然后，在单个组件层面，我们又需要对它进行扩充或覆盖。但是，这种完全开放式的类名和链式风格令开发者面临一些困扰和潜在痛点：
这个基础类到底代表什么
哪些元素会在根层级受到影响（译注：啥意思？）
哪些元素可以把 .success 类链到自己身上
它是否可以被进一步扩展到更多的组件上
假如一个 .success 的实例要用白底绿字，而另一个要用绿底白字，怎么办？
而且这些问题还只是冰山一角。这种方案未必很差，但如果可扩展性、简单性和灵活性是你的***需求，这可能就不是***的办法。此时，前缀式类名方案可能更加适合你。
前缀式类名将开发者引入一种更简单、更易维护的方向，从而构建一个可扩展的 CSS 系统。当我们抛弃常规的基础类的方式，并将每个组件的样式用前缀限制起来时，我们的代码会变成这样：
.btn-success { ... } .alert-success { ... }这样一来，基础类被设定在组件级别，而不是整个系统级别。换句话说，我们的基础类变成了 .btn 和 .alert，而不是 .success。所有组件之间都不会出现样式和行为上的相互干扰，因为我们把组件具备“成功状态”视为贯穿整个系统的一种概念。这就是说，每个组件在“成功”状态下的样式，只有在 概念 层面才是相通的；而对于如何 实现 这个样式，是被约束在每个独立的组件内部的。不用操心通用的样式还会在哪里使用，也不用顾虑不可意料的副作用，这种方式使得每个组件更加稳定和灵活。
构建组件是一项非常具有策略性并且注重细节的工作，在一个类似 Bootstrap 的系统中，组件需要天生具备独立性，以提高模块分离度和可定制性。我们通过这种方式来打造更好的代码和一个令人愉悦的项目。
我自己在 CMUI ***版中，基本上使用的是文章开头所说的“链式类名”风格。比如说，一个大号按钮的结构可能是这样的：
