漫谈 CSS 方法论

大家好，我是 CUGGZ。,CSS 方法论是一种面向 CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定，并且在组织 CSS 时可提供相应的指南，从而提升代码的性能、可读性以及可维护性。,根据 State of CSS  2020 的调查结果显示，目前使用最多的五种分别为：BEM、ACSS、OOCSS、SMACSS、ITCSS。,下面就分别看看这五种 CSS 方法论！,BEM 全称为 Block Element Modifier，分别表示块（Block）、元素（Element）、修饰符（Modifier），它是由 Yandex 团队提出的一种 CSS 命名方法。这种命名方法让 CSS 便于统一团队开发规范和方便维护。该方法论由以下三部分组成：,在 BEM 中并没有那些抽象的规则，它是基于功能为导向（Function-Oriented Programming, FOP）而设计的，不存在像是 .pl-3 这种难以理解的 class 名称，为了保证 BEM 能够合理的将元素模块化，需要遵守以下规则：,所谓的 Block 就是指应用中可独立存在的元素，类似于 SMACSS 中的 Layout 或 Module，这里称其为块。需要遵守以下规范：,参考以下代码：,如果把块描述为一个元素，那就可以将 Element 描述为此元素的子元素。参考以下规则：,参考以下代码：,这里需要注意，Element 无法独立于 Block 之外，其存在的目的就是子元素，元素既然不存在，那何来的子元素？如果使用 SCSS 来编写样式，可以改用 & 父选择器来：,这样可读性就变好了一些，然后就可以将这些样式应用于 HTML 元素上了：,BEM 没有过多复杂的概念，而且通过 class 名称就可以知道 HTML 元素的结构，更容易理解和使用。,下面再来看一个 Element 相互嵌套的例子：,一个元素通常不会只有两层结构，很多时候都具有三层以上的结构。此时使用 BEM 编写的代码就会像上面这样。这里的问题在于这样的处理会造成嵌套越来越深，导致 class 名称越来越长，HTML代码可读性越来越差。如果存在多层嵌套，可以尝试进行以下修改：,这也就意味着，所有的子元素都仅仅会被 .list 所影响，link 不会绑死在 item 下，link 可以自由的放在 list 的任何位置。,Modifier 就像 OOCSS 中的 Skin 与 SMACSS 中的 State，主要用来表示 Block 或 Element 的行为及样式。参考以下规范：,参考以下代码：,Modifier 也是无法单独存在的，Modifier 必定是作用于某个对象，这里所指的对象可能是 Block 或 Element。如果使用的是 SCSS，可以改用 &父选择器：,然后就可以将样式应用在 HTML 元素上了：,从上面 HTML 代码中就可以很明显的看到其关联性，很容易的辨认出哪些是 Block，哪些是 Element，哪些是 Modifier，并进一步推断出哪部分的 HTML 可以独立使用，这也是 BEM 的初衷。,OOCSS 是 Object Oriented CSS 的缩写，意为面向对象的CSS。它是所有 CSS 方法论中最早提出的一个，由 Nicole Sullivan 提出。可以把它理解为将 CSS 模块化。,OOCSS 提倡样式可重用性，在编写 CSS 样式时需要遵循以下规则：,OOCSS 有两个主要原则：结构与样式分离和容器与内容分离。,OOCSS 作者对这两个原则的描述,1）结构与样式分离（Separate structure and skin）,结构与样式之间就像 .btn 与 .btn-primary 的关系一样。来看例子：,平时我们可能习惯性的把全部样式都写在同一个class 中，就像上面代码一样。此时如果我们需要新增一个主题为 success 的按钮呢？你可能会这样做：,这时，两个按钮就会有很多重复的样式，每增加一个主题的按钮，就需要增加一组样式，这就有点浪费时间了。而 OOCSS 中的结构与样式分离主要就是为了改善这个问题，将以上代码根据 OOCSS 的规范进行改写：,在 OOCSS 的概念中，表现型的 style 就属于样式，封装型的 style 就属于结构，如下所示：,那这样做的用意是什么呢？button 按钮一般是这样来使用这些样式的：,这样就可以很明确的知道这个元素的结构与样式，以后如果想要增加不同主题的按钮，就只需要编写像.btn-success、.btn-danger这样的样式类即可，而无需再编写按钮的结构。,当然，也可以借助 Sass 中的 @each 来更快速地实现多种主题按钮的样式：,按钮在定义时只需添加对应的样式即可：,相信通过上面的例子，你已经了解了什么是结构与样式分离。如果以 OOCSS 中的 OO (Object Oriented) 来描述的话，这里的结构(Structure)就是所指的元素。以上面例子来说，我们封装了 button 元素，以后如果要使用 button 的话，只需要编写 .btn 结构样式名称与对应的样式（skin)即可。,2）容器与内容分离（Separate container and content）,接下来看看容器与内容该如何分离。容器与内容之间就像 .card 与 .btn 的关系一样。来看例子：,在编写 CSS 样式时，通常都是根据 HTML 的结构来编写。从上面的代码中可以看出，.card 里面有个 button。这样编写样式就会失去灵活度，button 就完全被绑定在了 .card 里面，OOCSS 中的容器与内容分离主要就是用来改善这个问题的，将上面的代码根据 OOCSS 的规范进行改写：,容器与内容分离旨在将两个不同的父子元素给分离出来，借此达到父子元素不相互依赖的目的。且父子元素只存在名称上的关系，实际上两者都可以单独存在并可以在不同的区域使用。这里的 .card 就属于容器，.btn 就属于内容，如下所示：,需要注意，并非所有的元素都必须遵守容器与内容分离的原则，来看下面的例子：,一个对象可能同时是容器与内容。对于 .col-4 对象来说，.card 就属于内容，而对于 .card-body 对象来说，.card就属于容器。那你可能会想，为什么不把 .card-body 做分离呢？不是说容器必须与内容作分离吗？这里的 .card-body 如果独立存在本身是没有任何意义的，需与.card 搭配才会有意义，在这种情况下，.card-body 属于 .card 的继承，就无须将其分离出来，与前面的.btn 不同，.btn 独立存在是可以重复使用在其他元素上的。,通过上面的例子，相信大家已经理解了 OOCSS 的基本思想。其实，Bootstrap 就是根据 OOCSS 规范实现的，来看例子：,可以看到，这段代码中包含了 .navbar、.navbar-light等 class，这些就属于 OOCSS 中的结构与样式分离，而.form-inline、.btn 等 class 就属于容器与内容分离。如果对 OOCSS 方法论感兴趣，可以阅读一下 Bootstrap 的源码，其处理的细腻程度可以说是将 OOCSS 发挥的淋漓尽致。,SMACSS 全称为 Scalable and Moduler Architecture for CSS，意为可扩展的模块化 CSS 结构，由 Jonathan Snook 提出。SMACSS 不仅包含了结构与样式分离的概念，还具有极具特色的结构化命名的概念。所谓的结构化命名，就是将元素做结构分类并限制其命名，以此达到易扩展和模块化的目的。,SMACSS 相对于 OOCSS 更偏向于整体结构的分类及模组化 CSS，其中结构的分类包括：,Base 主要面向某些对象的基本及预设样式，也就是全局的初始化（重置）样式。在编写这些样式时应该遵循以下规则：,可以使用元素选择器、后代选择器、子选择器以及任何伪类将基本样式应用于元素；,不应该使用class、id 选择器来设置元素预设的样式；,不应该使用!important 来设置元素预设的样式（其权重过高，无法被覆盖）。,参考如下代码：,SMACSS 中的 Layout 根据重用性将页面划分成主要布局样式和次要布局样式，主要布局样式是指不发生重用的元素，而次要布局样式就是指会发生重用的元素，在编写样式时应该遵守以下规则：,参考如下代码：,和 SMACSS 规则不同的是，在 Layout 规则中的主要布局样式是可以使用 id 选择器来定义的。如果想要在特定情况下更改其布局样式，可以与次要布局样式搭配使用：,根据 CSS 层叠的特性，可以让元素应用到更高层的布局样式，以覆盖其预设的样式。这里需要注意，所谓的主要布局样式和次要布局样式都只是名称上的定义，不要将自己的思维局限在只能使用主要布局样式，也就是全部使用 id选择器来编写布局样式。大部分情况下，次要布局样式比主要布局样式使用的更多。参考下面的例子：,如果不考虑 SMACSS 中的次要布局样式写法，我们可能会为 div 添加名为featured的id，然后通过 id 选择器来设置样式：,这样就相当于把元素完全绑定死了，这里的 #featured 只能用在div 标签上。这不就是 OOCSS 要解决的问题吗？可以根据 SMACSS 中的次要布局样式规则来解决这个问题：,其实 SMACSS 中的次要布局样式就像是 OOCSS 中的容器与内容分离原则，目的都是将依赖性降到最低。其实对于次要布局样式，就相当于在 OOCSS 的基础上，加上其命名限制中的 -l 前缀就可以了。,Module 主要面向应用中的可重用元素的样式，与 Layout 不同的地方在于其元素更为准确。基于 Module 的元素都应该以独立元素的方式存在。在编写是需要遵循以下规则：,不应该使用元素选择器、id 选择器设置元素样式；,参考如下代码：,这时我们可能会这样编写样式：,这样写的问题在于，.card 中的 div 被绑定死了，如果想要针对里面不同的 div 编写样式，就需要做出调整。SMACSS 中的 Module 建议都使用 class 选择器来编写样式：,这样就解决了 div 被绑定死的问题，同时代码的可读性也增加了。SMACSS 的作者建议不要使用div、span这种元素选择器来定义样式，而是使用 class 选择器来强调语意化及可重用性。继续来看下面的例子：,前面提到，基于 Module 的元素应该能够在应用的任意部分使用。这时编写的的样式就会像上面的代码这样，代码越来越复杂，可能一不小心就忽略了CSS的优先级，导致样式被错误的覆盖。SMACSS 建议使用以下方式来写：,然后为指定对象添加元素与子元素 class 名称：,其实它的概念就像 OOCSS 中的结构与样式分离，只不过这里称之为子类化（Subclassing），通过将样式抽离出来，以后再不同元素中使用模块时，只需要添加模块名称与子类化模块名称即可。,State 主要面向 Layout 或 Module 在应用上的特效及动作，其概念类似于 BEM 中的Modifier，为了保证样式可以作用于对象，允许使用 @important。在编写时可以参照以下规则：,参考如下代码：,与上面介绍的子模块样式不同的地方在于，状态样式不需要继承于任何对象，而只是单纯的将样式应用于对象，可以参考 Bootstrap 中的 .active 或 .disabled 样式，作用就类似于上面的 is-active 与 is-disabled，为了保证状态样式可以作用于指定对象，在 State 中允许使用 @important。,Theme 主要面向应用中为主视觉定义的 Layout 或 Module 样式，例如主题切换。在编写时需要遵循以下规则：,参考如下代码：,这里需要注意，不需要使用独立的 class 去添加主题样式，在 Theme 的规则中建议使用与原来 Layout 或 Module 中相同的样式名称，而 themeA.css 样式会在 index.css 之后才加载，这样就可以达到覆盖样式的目的，如果应用中有很多主题样式，也只需要新增像 themeB.css 这样的样式文件即可：,ITCSS 全称为 Inverted Triangle CSS，意为倒三角CSS，由 Harry Robers 开发。ITCSS 是一种可扩展和可管理的架构，独立于预处理器存在。它出现的主要目的是帮助组织项目的 CSS 文件，从而解决由级联和选择器的特殊性引起的问题。,ITCSS 的目标是通过分层组织 CSS 文件，实现了自下而上的特异性。它基于分层的概念把项目中的样式分为七层：,上层定义的代码比下层定义的代码影响更大。因此，上层会影响下层，下层不会影响上层。下层将继承上级的样式，越往下越具体。,ITCSS 通过三个关键指标对 CSS 项目进行排序：,第一层 SETTINGS 表示设置，这一层包含项目的所有全局设置。通常会定义一些全局变量，例如颜色、字体大小等，这一层不会生成实际的 CSS。,第二层 TOOLS 表示工具，如果使用了预处理器，可以在这一层定义 function 和 mixins。Tools 层位于 Settings 层之后，因为 mixin 可能需要全局设置中的一些变量来作为默认参数。同样，这一层也不会生成实际的 CSS。,第三层 GENERIC 表示通用，可以在这一层来定义重置或者标准化浏览器的基本样式，这一层很少会被修改。这也是第一个实际会生成 CSS 的层。,第四层 ELEMENTS 表示元素，通常用来定义影响 HTML 单个标签的样式，例如 h1、p 标签的默认样式：,第五层 OBJECTS 表示对象，可以在这一层定义整个项目中可重用的页面结构类。与上一层相比，这一层对 DOM 的影响更小，具有更高的特异性（优先级），并且更加明确，因为现在将 DOM 的部分作为目标来设置了样式。,第六层 COMPONENTS  表示 UI 组件，与对象不用，组件是页面的特定部分。比如搜索框的样式，为组件定义的样式只会影响到对应的组件。这一层比上一层更加明确，因为现在为 DOM 设计了明确的样式。,这一层也称为 Utilities，包含所有那些覆盖之前层中定义的任何其他规则的规则。它是唯一允许使用 !important 的层。,那这七层结构的 CSS 文件该如何组织呢？主要有两种方式：,在使用样式时，就需要按照层的顺序来引用这些 CSS，就像这样：,ACSS 的全称为 Atomic CSS，意为原子CSS。它专注于创建很多小型的 CSS 样式类，以便在 HTML 上使用。这种方法旨在提供高度精细和可重用的样式，而不是为每个组件提供规则。这可以减少特异性（优先级）冲突并以可预测的方式使样式更具可变性。这种方法有助于减少代码冗余和覆盖 CSS 样式的混淆。,参考以下代码：,在HTML中这样来使用：,ACSS 有一些编程方法，可以根据用户添加到 HTML 的类或属性自动生成 CSS。Atomizer 就是这样的一个工具，它允许将 HTML 进行如下定义：,这样在构建时就会自动生成以下CSS：,注意，单独使用 ACSS 会导致类的数量多到难以管理，并且 HTML 结构会非常臃肿。因此，通常只会使用 ACSS 原则来创建定义一致、可重用的声明块的辅助类。