Css设计模式-理论篇之OOCSS、SMACSS与BEM

最新推荐文章于 2022-12-07 14:08:22 发布

Simplefatty

最新推荐文章于 2022-12-07 14:08:22 发布

阅读量9k

点赞数 8

分类专栏： css3 文章标签： css css3

本文链接：https://blog.csdn.net/u013588178/article/details/49727339

版权

本文介绍了CSS设计模式，包括OOCSS、SMACSS和BEM。OOCSS强调减少对HTML结构的依赖和增强样式复用性；SMACSS提出CSS规则分类、命名规范和最小化适配深度，以提高可维护性；BEM则通过Block、Element和Modifier实现组件化和命名规则，帮助解决命名冲突。这些模式有助于实现CSS的模块化和解耦。

摘要由CSDN通过智能技术生成

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。

作为每个前端工程师入门第一门学习的语言来说，它简单易学的特点让许多初学者能够很快通过它来构建出一套富含色彩的网页，并且随着Css3的普遍流行与支持，新的特性无疑让这门简单的样式语言变得越来越强大，简单的写Css并不是一件多难的事情，而要写出一套可维护的Css却是一件相当困难的事情。

于是引入下面介绍的几种Css设计模式

OOCSS

OOCSS,字面意思是面向对象的CSS，是由Nicole Sullivan提出的css理论,虽说是理论，实则更像一种程序员间约定的规范：
* Separate structure and skin（分离结构和主题）减少对 HTML 结构的依赖
* Separate container and content（分离容器和内容）增加样式的复用性

减少对 HTML 结构的依赖

<div class="container-list">
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</div>

一般我们在书写列表的时候结构大概会如上面的结构所示，这种时候我们如果要对a修改样式可能经常会用.container-list ul li a这种方式来选择，一方面这种写法在效率上比较拙劣，另一方面一旦我们在项目后期过程中对列表中的html结构进行了重构，这意味着我们同时也需要对css进行重构，使html与css的耦合性变得十分强，造成维护上的困难，也要避免没必要的嵌套地狱

而OOCSS推荐的写法是在a标签内加上list-item样式,此时便能通过.container-list .list-item的方式来控制解耦

增强 CSS 样式的复用性

在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 作为 CSS 的选择器。

以BootStrap为例(BootStrap便是根据OOCSS规范写的),以下为LESS文件:

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: @label-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;