Jade Dungeon

CSS整体架构

SMACSS 风格构架

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

1. Base 基本属性

基础属性很容易理解,就是最基本的东西,很多样式简单的网站都采用一个简单的二级CSS 文件模式,一个base.css通用于所有页面,而每个页面有一个特定的CSS文件,我想这就 是Base的雏形。要说具体是什么,比如reset文件,再比如放置clearfix或BFC的一些类似 工具集的文件。

其实最终会发现,在Base中的CSS属性将会是几乎全站都要用到的属性,但我不想这么描述 Base,因为这会误导人。大多数情况下,在一个网站建立之初也只会有几个简单的页面, 于是这几个页面都要用到的属性就变成了通用属性,但并不是这么简单的。随着网站规模 的扩大,需求的增加,设计师们灵感的迸发,所谓的通用和统一也在发生着潜移默化。 所以在编写Base时,应该遵循的基准是,哪些样式是你做下一个网站时也会想用的,哪些 样式即使设计改变了也只需要改变一些数值和颜色,哪些样式是一些基本原则;而不应该 将目前大部分页面都在使用的样式放在Base中,还是那个道理,它们也许仅仅是恰好相同 ,而非逻辑一致。

2. Layout 布局

布局是一个网站的基本,无论是左右还是居中,甚至其他什么布局,要实现页面的基本 浏览功能,布局必不可少。SMACSS将这一功能单独提出也是非常正确的,另外还约定了 一个前缀l-/layout-来标识布局的class。举个最普遍的例子。

.l-header {}
    .l-brand {}
    .l-navigator {}
.l-container {}
    .l-sidebar {}
    .l-content {}
.l-footer {}

这就是一个简单的左右布局,导航和Logo中规中矩在最顶部。

3. Module 模块

模块是SMACSS最基本的思想,同时也是大部分CSS理论的基本,将样式模块化就能达到复用 和可维护的目的,但是SMACSS提出了更具体的模块化方案。首先表象上来看,SMACSS中的 模块应该拥有一个名字,并且为其class名,而模块其他class皆以为前缀。比如:

.product {}
    .product-title {}
    .product-image {}
    .product-border {}
    .product-shadow {}

可以看到例子中product是一个模块,title和image是包含在模块内的组件,可用可不用; border和shadow是类似OOCSS的附加class用来改变模块本身。总之,在模块内可以使用 其名称做前缀任意组织模块结构,但目前是让其变得更易用,提高可扩展性和灵活度, 如果仅仅为了某些功能而特意写一些class就有点有形无实的感觉了。

4. State 状态

状态经常和JavaScript放在一起使用,它是一种用来标识页面状态的class,无论是为 用户标识还是用程序标识。还是一个常见的例子,马上就明白。active经常用来表示 当前的tab,或者当前选中的目标,这就是一种状态,无论是样式还是程序都需要知道它。

SMACSS仍然有一个对应的前缀用于标示状态class,is-是一个合适的词,指明某一元素 是什么状态。

5. Theme 主题

主题就是皮肤,和OOCSS的分离皮肤与结构不谋而合。更重要的是对于可更换皮肤的站点 来说,这样的分离是非常必要的,只需要更换加载的theme文件即可将皮肤更换。

总的来说,SMACSS是一个较为注意细节与实现的CSS理论,非常适合初涉CSS的人,它可以 让你的CSS跑在轨道上而不至于脱轨。其思想也与OOCSS有很多相通之处,如果没有适合的 方案,我建议新手可以适当的融入OOCSS的思想而使用SMACSS的结构,这样写出来的网站 样式至少不会马上陷入泥沼。