如何写好CSS这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情前言前一段我发了一个沸点向掘

这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

前言

前一段我发了一个沸点向掘友求助CSS类名写的越来越长的问题，如下：

这是我在工作中切实遇到的问题，使用BEM方法命名得到的解构很清晰，但是由此而来带来的长类名也让人非常恼火，其中一位掘友的回答带给我一些启发。

除此之外如何还有什么其它的方式书写类名呢？

css 中存在哪些问题？

可读性
维护性
拓展性
复用性

如何解决这些问题？

为解决CSS的各种问题，产生了如下几种主流 CSS 书写原则：

OOCSS
DRY
SMACSS
BEM

OOCSS

OOCSS即面向对象的CSS，这里对象指的是页面中的元素对象。以电商中的商品为例，商品就是一个典型的对象，他们有许多相同的部分，又有许多差异。宽高、按钮、图片、标题等基本布局都是相同的，而边距、线框、背景颜色、字号等都是差异化的。由此按照OOCSS的指导原则，我们应该写一个product class，然后为其添加一些border、theme之类的class来差异化它：

.product {
    display: block;
    overflow: hidden;
    float: left;
    width: 200px;
    height: auto;
}
.product-head{...}
.product-body{...}
.product-foot{...}

.product-theme-black {
    background: black;
    color: white;
}

.product-border {
    border: 1px solid #333;
}

oocss 两大原则：

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

DRY CSS

DRY（Don't repeat youself）消除重复，如何消除才是关键，使用 DRYCSS 可以通过如下三步：

分组可复用属性
按逻辑为分组命名
为各个分组添加选择器

SMACSS

这是一个相对繁杂的CSS理论，分为Base、Layout、Module、Status和Theme共五个部分。不过它的核心思想仍然和OOCSS类似，鼓励使用class。

Base 基本属性
Layout 布局
Module 模块
State 状态
Theme 主题

BEM

BEM的意思就是块（block）、元素（element）、修饰符（modifier）的方式命名CSS类名, 是由Yandex团队提出的一种前端命名方法论。

命名约定的模式如下：

.site-search{} /* 块 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */

例如写一个搜索组件：

顶级块是 site-search, 他的内部有两个元素，分别是输入框 site-search__field，以及搜索按钮 site-search__button，焦点在输入框上的时候输入框背景需要高亮，因此给他一个 active 的修饰符，命名为 site-search--active，按照 BEM 的思想可以写出如下 HTML 结构。

<form class="site-search  site-search--active">
  <input type="text" class="site-search__field">
  <input type="Submit" value ="Search" class="site-search__button">
</form>

但是BEM 存在的问题也很明显，命名过长。

为了尽可能的避免这个问题，我们在使用BEM的时候需要掌握一点诀窍，你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部，但这并不意味它就是BEM中所说的元素。

列入，一个网站logo完全是恰巧在.header的内部，它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文，因此你要确定只在你需要用到BEM的地方你才使用它。

总结

除了使用上述的一些命名方法外，在分析页面解构时，就应尽可能的优化页面结构，简化代码，合理使用伪元素以达到减少block块元素的目的，同时要多总结，多加练习，希望大家都能书写出让人眼前一亮的代码。

参考：

CSS命名规范——BEM思想（非常赞的规范）

www.cnblogs.com/xiaominwu/p…

扩展阅读