SMACSS CSS指引

SMACSS 全称为 Scalable Modular Architecture CSS. 即可扩展模块化结构CSS.

分类规则(SMACSS核心):

  • Base
  • Layout
  • Module
  • State
  • Theme

Base Rules - 基本规则

主要应用于元素选择器,后代选择器,子选择器,伪类. 不包括ID或类选择器.

CSS Resets

Layout Rules - 布局规则

唯一主要使用ID选择器(JS Hook)

Module Rules - 模块规则

页面的”肉”,每一个模块都应该设计成独立的组件,让页面更加灵活。模块可以在页面不同部分简单移动而不会破坏布局。
避免使用ID或元素选择器

避免元素选择器

使用元素的子选择器或后代选择器需要保证元素选择器的可预见性。
只加入有语义的选择器。
如果希望使用,应该限制在一层类选择器里面。

State Rules - 状态规则

增加/覆盖所有的样式。

Theme Rules - 主题规则