浅谈CSS编程的OOCSS和SMACSS设计模式

真心觉得写出 CSS 并不难，但是要写出可被维护的 CSS 比其他程式语言都还难。所幸已经有许多大师级的人物，提出许多设计模式和思维，借由站在巨人的肩膀上可以让事情事半功倍。这篇文章就来说说 OOCSS、SMACSS 和撰写 CSS 时应该注意的规范。

（本文的例子用的是 SCSS 语法）
OOCSS

OOCSS不是什么新技术，只是一种撰写 CSS 的设计模式，或者可以说是一种「道德规范」，大致上我觉得重点只有两个：

1. 减少对 HTML 结构的依赖
   增加 CSS class 重复性的使用

减少对 HTML 结构的依赖

4. .........
6. .........
8. .........

一般的导航栏写法，结构应该会像上面的 HTML 范例一样，如果要对那些 标签定义样式，CSS 的写法可能写成.nav--main ul li a { } ，这种写法先不管效能上的问题，可以看出来过度地依赖元素标签的结构，有可能之后 HTML 结构改变，这个 CSS 就必须跟著重构，造成维护上多余的成本。

若从这个例子来考量，原则上 都一定会接在

这样的写法，一来效能理论上比较好（我没办法验证），二来层次比较单纯。
增加 CSS class 的重复使用

在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 作为 CSS 的选择器。这种想法就是像
OOP
尽量抽离重复的程式码，例如以下这个例子，这是两种按钮的 CSS 样式属性：

1. .button{
2. display:inline-block;
3. padding:6px12px;
4. color:hsla(0,100%,100%,1);
5. & .button-default{ background:hsla(180,1%,28%,1); }
6. & .button-primary{ background:hsla(208,56%,53%,1); }
7. }

上面的 CSS 将两种不同样式的 button，抽离出重复的部份，并且定义在同个 class
上。因此，要使用这样的样式，HTML 的写法可能长这个样子：

先用 button 宣告此为一个按钮的样式，再用 button-default 或 button-primary 作为按钮底色的区别。这么做可以维护成本变得比较低，例如：想要改网站上所有按钮的大小，就只要修改 .button 的 padding 而已。
SMACSS

我对 SMACSS 的理解还不是很深入，或许把Scalable and Modular Architecture for CSS看完后会有更深一曾的理解。目前对 SMACSS 的概念仅限于它对 CSS 不同的业务逻辑所做的划分方式：

但我认为原本的设计不是很妥当，因此我自己做了一些改良：
Base

Base 就是设定标签元素的预设值，例如浏览器的 reset 可以写在这里，如果用的是 Compass，只要 @include global-reset 即可。这里只会对标签元素本身做设定，不会出现任何 class 或
id，但是可以有属性选择器或是伪类：

1. html{ }
2. input[type=text]{ }
3. a:hover{ }

Layout

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！