关于CSS代码组织和管理规范

2020-03-22 本文已影响0人 mao77_

前端多人项目时，每个人对css的编写有着不同的考虑，因此常常会导致在Dom中不同风格的class命名、重复编写的CSS块、项目主体色变量的各处定义和引用（导致修改时多处寻找和调节）...等问题。
因此特意来整理了前端开发中部分关于代码组织和管理规范方式：OOCSS、 ACSS、BEM、SMACSS

一、OOCSS

Object Oriented CSS

1. 是什么

bootstrap就是典型的面向对象css，即oocss.

面向对象的CSS是一种容易重用的一种CSS规则，这里关键的一点就是如何在页面中识别，创建和模块化可重用的对象，并在页面中任何需要的地方重用，并扩展其附加功能。所以我的理解是，oocss是一种可重用，样式分离，耦合度低的css.

2. 如何使用

//css写法
.title-1{
    border-bottom:1px solid #ccc;
    font-size:16px;
    font-weight:bold;
    color:#333;
}

//OOCSS写法
.bb-c{
    border-bottom:1px solid #ccc;
}   
.f16{
    font-size:16px;
}
.bold{
    font-weight:bold;
}
.c333{
    color:#333;
}

//html
<div class="f16 bold c333 bb-c">标题</div>

3. 评价

优点：

强调重用，减少CSS代码
选择器简洁
可扩展类
强调风格与内容分离
强调内容与容器分离
具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系
语义标记，有助于SEO
可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件

缺点：

OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。
如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
最好给每一个组件备写一份说明文档，有助于调用与维护
创建了数千行CSS，但有可能这些CSS永远不会被使用。比如Twitter Bootstrap
样式(CSS)和结构(HTML)藕合太紧

二、ACSS

原子化CSS(Atomic CSS)

1. 是什么

ACSS 的原则是把 CSS 样式打散成尽可能小的部分，每个 CSS 类只对应一条样式规则，从而达到最大化的可复用性。比如 CSS 类 M(10px)所对应的样式规则是 margin: 10px。在应用 CSS 样式时，只需要在把所需要的原子化 CSS 类名添加到 DOM 元素上即可。ACSS 提供了 Atomizer 工具来生成最终的 CSS 样式文件。

2. 如何使用？

在 HTML 页面中，按照 ACSS 的命名方式添加所需要的原子化 CSS 类名，再使用 Atomizer 工具来解析 HTML 页面并生成对应的 CSS 文件。使用 ACSS 的多媒体对象示例:

<div class="BfcHack M(10px)">
<a href="http://oocss.org/" class="Fl(start) Mend(10px)">
<img src="https://placehold.it/50x50"/>
</a>
<div class="BfcHack">
OOCSS media object
</div>
</div>


// css
.Fl\(start\) {
 float: left;
}
.M\(10px\) {
 margin: 10px;
}
.Mend\(10px\) {
 margin-right: 10px;
}
.BfcHack {
 display: table-cell;
 width: 1600px;
 *width: auto;
 zoom: 1;
}

3. 评论

优点：

所生成的css文件只包含必要内容，较少冗余。
减少css文件大小，提高性能
将 class name 定义最小化，让全站都可复用
通过 atomic css 的打包，只会产生用到的样式
比起 inline 的方式更加简单，不会冲突
很好压缩，整体 size 小一点

缺点：

它与大多开发人员所理解的最佳实践差异很大，可能难接受
写起来丑
没有语义化

三、BEM

BEM代表块（Block），元素（Element），修饰符（Modifier）。

1. 是什么？

Block 是页面中独立存在的区块，可以在不同场合下被重用。每个页面都可以看做是多个Block组成。

Element 是构成Block的元素，只有在对应Block内部才具有意义，是依赖于Block的存在。

Modifier 是描述Block或Element的属性或状态。同一Block或Element可以有多个Modifier。

饿了么的框架elementUI就是BEM的一种

2. 如何使用？

命名规范：

- 中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：双下划线用来连接块和块的子元素
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

BEM 命名约定的模式如下：

  .block {}
  .block__element {}
  .block--modifier {}

每一个 Block 名应该有一个命名空间（前缀）

block 代表了更高级别的抽象或组件
block__element 代表 block 的后代，用于形成一个完整的 block 的整体
block--modifier代表 block 的不同状态或不同版本

下划线和横线

component-name 
component-name--modifier-name 
component-name__sub-object 
component-name__sub-object--modifier-nam

驼峰

org-ComponentName 
org-ComponentName--modifiername 
org-ComponentName-subObject 
org-ComponentName-subObject--modifiername

由于市场存在块嵌套另一个块的问题，可以使用前缀来区分

p-页面（Page） （应用于body元素的类）,对可维护性不是那么重要的静态页面十分有用 —应该避免嵌套使用 (例: p-Homepage);
l-布局（Layout）, 比如列（columning），包裹（wrappers） 和容器（containers）等等(例: l-Masthead, l-Footer);
c-组件（components ）(例: c-Dropdown, c-Button…);
u-公共类（Utility classes） — 不会发生改变, 在代码的任何地方都不能重载。(例: u-textCenter, u-clearfix…);
js-JavaScript钩子：永远不应该出现在CSS中。
g-JavaScript钩子：全局js类，永远不应该出现在CSS中

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Title text here</h3> 
    </div> 
    <div class="c-card__body">
        <p>I would like to buy:</p> <!-- Much nicer - a layout module --> 
        <ul class="l-list">
             <li class="l-list__item"> <!-- A reusable nested component --> 
                <div class="c-checkbox"> 
                    <input id="option_1" type="checkbox" name="checkbox" class="c-checkbox__input"> 
                    <label for="option_1" class="c-checkbox__label">Apples</label> 
                </div> 
            </li> 
            <li class="l-list__item"> 
                <div class="c-checkbox"> 
                    <input id="option_2" type="checkbox" name="checkbox" class="c-checkbox__input"> 
                    <label for="option_2" class="c-checkbox__label">Pears</label> 
                </div> 
            </li>
         </ul> <!-- .l-list --> 
    </div> <!-- .c-card__body -->
</div> <!-- .c-card -->

3. 评论

优点：

解决了命名空间的问题
多人协作时，只要有文档清楚标注规则，后来人可以很轻易的读懂，接手
更易于维护

缺点：

容易写的又长又丑
代码量比较多，没这么简洁
需要完善的说明文档和规则

四、SMACSS

表示的是可扩展和模块化 CSS（Scalable and Modular Architecture for CSS）。

1. 是什么

SMACSS 把 CSS 样式规则分成若干个不同的类别：

基础：该类别中包含的是默认的 CSS 样式。作为其他样式的基础。
布局：该类别中包含与页面布局相关的 CSS 样式，用来进行模块的排列。
模块：该类别中包含的是可复用的模块的 CSS 样式。
状态：该类别中的 CSS 样式用来描述布局和模块在不同状态下的外观。比如在不同的屏幕尺寸下，布局会发生变化。标签式模块的每个标签页可以有显示或隐藏的状态。
主题：该类别和状态类似，只不过是用来改变布局和模块的视觉效果。

关于CSS代码组织和管理规范

一、OOCSS

1. 是什么

2. 如何使用

3. 评价

二、ACSS

1. 是什么

2. 如何使用？

3. 评论

三、BEM

1. 是什么？

2. 如何使用？

3. 评论

四、SMACSS

1. 是什么

猜你喜欢

热点阅读