CSS最佳实践（中）

这是我参与更文挑战的第15天，活动详情查看： 更文挑战

传统方法论

传统方法论有一下这些：

• Bootstrap前缀命名法
• Atomic CSS
• BEM
• OOCSS
• SMACSS

Bootstrap前缀命名法

    <button type="button" class="btn btn-default">（默认样式）Default</button>
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
    <button type="button" class="btn btn-success">（成功）Success</button>
    <button type="button" class="btn btn-info">（一般信息）Info</button>
    <button type="button" class="btn btn-warning">（警告）Warning</button>
    <button type="button" class="btn btn-danger">（危险）Danger</button>
    <button type="button" class="btn btn-Link">（链接）Link</button>
复制代码

• class名称中只能出现小写字符和-。-应当用于相关class的命名（类似于命名空间）
• 避免过度任意的简写。.btn代表button，但是.s不能表达- class名称应当尽可能短，并且意义明确
• 使用有意义的名称
• 基于父class或基class作为新class的前缀
• 使用.js-* class来标识行为，并且不要将这些class包含到CSS文件中

留给你思考

1、为什么需要前缀，.btn.btn-success与.btn.success有何区别？
2、为什么定义.btn-success，而非.btn-green？
3、为什么设计成.btn.btn-success，而不直接用.btn-success？

Atomic CSS

.c-fl {
    float: left;
}
.c-fr {
    float: right;
}
.ma6,.mt6 {
    margin-top: 6px;
}
.ma6,.mr6 {
    margin-right: 6px;
}
.ma6,.mb6 {
    margin-bottom: 6px;
}
.ma6,.ml6 {
    margin-left: 6px;
}
复制代码

example

<div class="Row">
    <div class="Fl(start) W(1/2) Bgc(#0280ae.5) H(90px)">
    <div class="Fl(start) W(1/2) Bgc(#0280ae) H(90px)">
</div>
<div class="D(tb) W(100%)" role="presentation">
    <div class="D(tbc) Bgc(#0280ae) H(90px)"></div>
    <div class="D(tbc) Bgc(#0280ae.5) H(90px)"></div>
</div>
<div>
    <div class="IbBox W(50%) Bgc(#0280ae.5) H(90px)"></div>
    <div class="IbBox W(50%) Bgc(#0280ae) H(90px)"></div>
</div>
<div class="D(f)">
    <div class="Flxg(1) Bgc(#0280ae) H(90px)"></div>
    <div class="Flxg(1) Bgc(#0280ae.5) H(90px)"></div>
</div>
复制代码

BEM

Block__element–modifier

BEM-Block

Block就是组件。
Block的名称描述的是组件是什么，它是干嘛的，
而不是它的状态，它长什么样。

用法

• Block可以相互嵌套
• 可以嵌套任意层级

BEM-Element

Element的名称描述的是组件的什么部分，它是干嘛的，
而不是它的状态、类型，它长什么样。
命名方式为：block-name__element-name。

用法

• Element可以相互嵌套
• 可以嵌套任意层级
• Element只能是Block的一部分，而不可以是其他Element的一部分
• Element不可以脱离组件单独使用
• Element并非必需的，不是所有的Block都有Element

BEM-Modifier

Modifier描述Block或者Element的外观、状态、行为。
通过–与Block或者Element分隔。

用法

• odifier不可以独立使用

BEM-本质

DOM-TREE

<header class="header">
    <img class="logo"/>
    <form class="search-form">
        <input class="input"/>
        <button class="button"></button>
    </form>
    <ul class="lang-switcher">
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="https://juejin.cn/post/url">en</a>
        </li>
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="https://juejin.cn/post/url">ru</a>
        </li>
    </ul>
</header>
复制代码

  ↓↓↓↓↓↓

header
    logo
    search-form
        input
        button
    lang-switcher
        lang-switcher__item
            lang-switcher__link
        lang-switcher__item
            lang-switcher__link
复制代码

XML/(BEM)JSON

<block:header>
    <block:logo/>
    <block:search-form>
        <block:input/>
        <block:button/>
    </block:search-form>
    <block:lang-switcher>
        <elem:item>
            <elem:link/>
        </elem:item>
        <elem:item>
            <elem:link/>
        </elem:item>
    </block:lang-switcher>
</block:header>
        
复制代码

  ↓↓↓↓↓↓

{
    block: 'header',
    content: [
        {block:'logo'},
        {
            block: 'search-form',
            content: [
                {block: 'input'},
                {block: 'button'}
            ]
        },
        {
            block: 'lang-switcher',
            content: [
                {
                    elem: 'item',
                    content: [
                        {elem: 'link'}
                    ]
                },
                {
                    elem: 'item',
                    content: [
                        {elem: 'link'}
                    ]
                }
            ]
        }
    ]
}
复制代码

OOCSS

原则

• 分离结构与皮肤
• 分离容器与内容

建议

• 避免后代选择器
• css中避免ID选择器
• css中class不用附属tag名
• 避免使用!important

分离结构与皮肤

#button {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: 1px solid #ccc;
    background: linear-gradient(#ccc,#222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#box {
    width: 400px;
    overflow: hidden;
    border: 1px solid #ccc;
    background: linear-gradient(#ccc,#222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
    width: 500px;
    min-height: 200px;
    overflow: auto;
    border: 1px solid #ccc;
    background: linear-gradient(#ccc,#222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
复制代码

  ↓↓↓↓↓↓

.button {
    width: 200px;
    height: 50px;
}
.box {
    width: 400px;
    overflow: hidden;
}
.widget {
    width: 500px;
    min-height: 200px;
    overflow: auto;
}
.skin {
    border: 1px solid #ccc;
    background: linear-gradient(#ccc,#222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
复制代码

分离容器与内容

#sidebar h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    line-height: 1;
    color: #777;
    text-shadow: rgba(0,0,0,.3) 3px 3px 6px;
}
复制代码

  ↓↓↓↓↓↓

#sidebar h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    line-height: 1;
    color: #777;
    text-shadow: rgba(0,0,0,.3) 3px 3px 6px;
}

/* other styles here ... */
#footer h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    line-height: 1;
    color: #777;
    text-shadow: rgba(0,0,0,.3) 2px 2px 4px;
}
复制代码

OOCSS-the key

• 创建一个组件库
• 独立的容器和内容，并且避免依赖位置的样式
• 独立的结构和样式
• 使用类名为扩展基本对象
• 坚持以语义类来命名类名

SMACSS

分层

1、Base

• 只使用tag选择器
• 处理css reset
• 不应出现!important

2、Layout

• 使用id和布局class
• 比如#sidebar
• 比如.l-fixed或者.layout-left

3、Module

• 只使用class，以及后代选择器

4、State

• 只使用class选择器
• .is-xxx
• 可以使用!important
• 可以对layout、module应用
• 通常与js耦合

5、Theme

• 可能覆盖之前所有的样式