[Day 08 - CSS Architecture] CSS设计模式，摆脱义大利面代码

当别人说你的程序是义大利面代码 (Spaghetti code)，听起来很好吃，应该是称赞的意思吧！千万不要误会，那是在说你的程序码杂乱无章、难以理解。

在前面的章节我们学到可以随意命名 HTML 元素的 ID 和 Class 名称，意味着没有结构化的命名模式下，可能会因为重复命名，需要去解决 CSS 冲突的问题，就一直往下新增 CSS 代码，导致程序乱乱的。所以本篇的教学重点就是：建立易读易写的CSS代码规则 — OOCSS / BEM。

OOCSS

OOCSS (Object Oriented CSS)，主张用物件的形式管理 CSS 的分类规则，专注在让组件的重复使用性提升，并且提出下面两个主要的原则：

结构与样式的分离

将重复的样式抽离，独立成一个组件重复使用。举例来说如下面的程序码，红色的 box 和红色的 button，那我们就可以把红色的样式抽离出来：

CSS

.box {
    width: 200px;
    height: 50px;
}
.button {
    width: 100px;
    height: 50px;
    padding: 10px;
}
.red-skin {
    background-color: red;
}

HTML

<div class="red-skin box"></div>
<button class="red-skin button"></div>

容器和内容的分离

将容器内部通用的结构分离。举例来说如下面的程序码，Header 虽然在 Section 跟 Footer 区块都会出现，外观一样但安装的位置不一样，那我们就可以将 Header 像零件一样抽离，再另外设定各自安装的位置：

CSS

.global-header {
    font-size: 28px;
    width:500px;
    height:10px
}
.section-header {
    padding: 10px;
}
.footer-header {
    padding: 5px;
}

HTML

<section>
    <div class="section-header global-header">...</div>
</section>
<footer>
    <div class="footer-header global-header">...</div>
</footer>

BEM

BEM (Block, Element, Modifier)，主张划分网页区块，以区块 (Block)、元素 (Element) 和修饰子 (Modifier) 命名，用组件的模式去进行介面开发。

区块 (Block)

指的是独立的页面元件

<header class="header">
    <div class="logo">...</div>
    <ul class="menu">
        <li>...</li>
        <li>...</li>
    </ul>
</header>

元素 (Element)

存在於 Block 中不可单独存在的小元件，使用双底线 __ 做分隔。

<header class="header">
    <div class="logo">
        <!-- logo中的元素 -->
        <img class="logo__img" />
        <h1 class="logo__title" />
    </div>
    <ul class="menu">
        <!-- menu中的item元素 -->
        <li class="menu__item">...</li>
        <li class="menu__item">...</li>
    </ul>
</header>

修饰子 (Modifier)

描述 Block 或 Element 的外观，不能单独使用，用单底线 _ 做分隔。

<header class="header">
    <div class="logo">...</div>
    <ul class="menu">
        <li class="menu__item">...</li>
        <!-- menu中的item--active元素 -->
        <li class="menu__item_active">...</li>
    </ul>
</header>

小结

OOCSS 强调的能提升组件的重复使用性、BEM 能让命名结构更清楚，最主要的是能活用两者的核心规则，建立易读易写的CSS，方便之後维护与管理。这个章节虽然只介绍了这两种，但其实还有 SMACSS 的方式来管理 CSS，建议你都可以了解一下。那今天的介绍就到这，接下来我们会提到最後一个网页核心技术 — Javascript，那我们就下章再见罗！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• Scalable CSS - 介绍OOCSS/SMACSS/BEM
• How to Organize Your CSS with a Modular Architecture(OOCSS, BEM, SMACSS)
• BEM Document