一些常见的 CSS 规范

Posted 2022-06-18 GoldenaArcher

一些常见的 CSS 规范

OOCSS

OOCSS 是 Object-Oriented CSS 的缩写，是 Nicole Sullivan 于 2008 年提出的一种 CSS 规范，使用 OOCSS 可以让 CSS 更提高复用性和扩展性，同样也更容易管理，其主要目的也是为了写出具灵活、模块化和可复用的组件。

对于 OOCSS 来说，任何重复的模式都可以已成为对象，即一段特定代码。而对于 OOCSS 来说，以下几个主旨是一定需要遵从的

1. 对象也要有明确的 结构(structure) 和皮肤(skin)。

   结构包含的对象有：

   • Height
   • Width
   • Margins
   • Padding
   • Overflow

   皮肤包含的对象有：

   • Colors
   • Fonts
   • Shadows
   • Gradients

   举例：

   .button 
     width: 150px;
     height: 50px;
     background: #fff;
     border-radius: 5px;
   
   
   .button-2 
     width: 150px;
     height: 50px;
     background: #000;
     border-radius: 5px;
   
   

   可以简化为：

   .button 
     background: #fff;
   
   
   .button-2 
     background: #000;
   
   
   .skin 
     width: 150px;
     height: 50px;
     border-radius: 5px;
   
   

2. 分离容器与内容

   举例说明：

   #sidebar 
     padding: 2px;
     left: 0;
     margin: 3px;
     position: absolute;
     width: 140px;
   
   
   #sidebar .list 
     margin: 3px;
   
   
   #sidebar .list .list-header 
     font-size: 16px;
     color: red;
   
   
   #sidebar .list .list-body 
     font-size: 12px;
     color: #fff;
     background-color: red;
   
   

   可以简化为：

   .sidebar 
     padding: 2px;
     left: 0;
     margin: 3px;
     position: absolute;
     width: 140px;
   
   
   .list 
     margin: 3px;
   
   
   .list-header 
     font-size: 16px;
     color: red;
   
   
   .list-body 
     font-size: 12px;
     color: #fff;
     background-color: red;
   
   

   我一开始的时候还真的写国第一种 CSS，然后到第三、四个页面就会发现，重载 CSS 会需要使用更多的选择器嵌套……

其实现在不少比较常见的 UI 库就有在实践 OOCSS，OOCSS 的优点包含：

1. 速度

   鉴于 CSS 的结构都分离了，开发者不需要大量重复代码，自然页面也能加载的更快

2. 扩展性

   下面的这几个还是挺显而易见的

3. 效率

4. 维护性

5. 可读性

OOCSS 的缺点包括：

1. 每个元素需要嵌套多个类
2. 对小项目来说过于复杂
3. 学习曲线较为陡峭

SMACSS

SMACSS 是 Scalable and Modular Architecture for CSS 的缩写，它定义了 CSS 的分类及命名规则。SMACSS 将 CSS 分为以下几种类型：

• base

  基础 CSS，主要是默认值的设置，类似于 CSS Reset 的配置

• layout

  布局以 l- 或 layout- 开头，如：

  .l-full-width 
    width: 100%;
  
  

• modules

  单独的模块，命名规范为 .object--description ，如：

  .article 
    background: #000;
  
  .article--title 
    font-size: 2em;
  
  .article--text 
    font-size: 16px;
  
  

  这里与 OOCSS 的差别就挺大的了，上文的 .article--title 如果在 OOCSS 中，就会使用 .article .title 的方式去实现。

• state

  状态，以 is- 开头，如：

  <header id="header">
    <ul class="nav">
      <li class="nav--item is-selected">Home</li>
      <li class="nav--item">About</li>
    </ul>
  </header>
  

• theme

  其他 UI 相关，如主题配色等

延伸阅读：Scalable and Modular Architecture for CSS，这是本书，我估计……一时半会儿内都不在我的阅读范围内了，先放一个 reference 吧：

BEM

为 Block Element Modifier 的缩写，目前是最主流的一种 CSS 规范了，这种命名规范可以比较好的解决冲突的问题。Block 为有意义的独立个体，E 和 M 就比较明确了，格式为：.block-name__element-name--modifier-name。

以一个按钮来说，其命名规范如下：

.button__text 
  text-decoration: none;

.button__text_hovered 
  text-decoration: underline;

二者指向的都是 button ——这里的 button 指的是按钮，一个单独的块，而非元素——中的 text 元素，第二个 CSS 类则代表鼠标悬浮后的状态。

从市场占有率来说，BEM 最高，所以这个还是建议需要了解一下的。

ITCSS

这下面的几个都没怎么用过，先马一下，以后碰上了再补笔记。

Utility-First CSS

ACSS