#### SMACSS是一种css的设计模式 ###### SMACSS定义了五种样式类型: 1. Base (基本) 2. Layout(布局) 3. Module (模块) 4. State (状态) 5. Theme (皮肤) #### Base(基本) 在项目中我们一般使用reset.css,用来重置元素的基本样式(颜色、排版、外距和内距等)。 #### Layout(布局) 在我们的方法中不是基本样式和全局的类名而是模块。 SAMCSS规划了主要布局组件(如,页头header,侧栏sidebar,网格grid等等)和其他的一切。我们发现这种区别有几个不必要的因素: 模块通常用展示他们的子组件,同样的方式主要的组件展示在页面上。 即使我们100%确定组件将永过不会被重用,因此和可重用的组件相比没有任何好处。 布局和模块之间的界线太模糊了,布局做为一种特殊的类别保留下来是很价值的。 #### Module(模块) 模块是独立的,可重用的组件,哪怕是不知道它们的父容器。他们唯一的依赖关系是应用基本样式。当它不在需要时,我们可以安全的删除模块,而不什么影响我们的CSS。 BEM双下划线语法用于一个模块的子组件范围中,我们使用CSS子选择器随意适合深度的适用性。 BEM双连字符语法作为修饰符来表示子类,或和关键字is-、模块的具体状态相结合。 因为设置模块的宽度width,定位position,外距margin都需要上下文出现的相关因素,我们的模块要么是全屏的块元素要么是内联元素。 这里有一个示例(modules/_my_module.scss): ```css .my-module { background-color: maroon; position: relative; > a { color: aqua; } } .my-module--important { @extend .my-module; border: 3px solid fuchsia; } .my-module--is-active { background-color:red; } .my-module__close-button { position: absolute; right: 0; top: 0; } ``` 除了position和尺寸相关属性外,大多数子组件可以提取出自己独立的模块。所以如果你离开定位到父元素,我们可以设置为三个小的、独立的模块。 modules/_my_module.scss: ```css .my-module { //... } .my-module__child-component { width: 100px; } ``` modules/_child_component.scss: ```css .child-component { //... } .child-component__grandchild-component { position: absolute; top: 10px; } ``` modules/_grandchild-component.scss: ```css .grandchild-component { //... } .grandchild-component--modifier { //... } ``` example.html: ```html <div class="my-module"> <div class="my-module__child-component"> <div class="child-component"> <div class="child-component__grandchild-component"> <div class="grandchild-component--modifier"> </div> </div> </div> </div> </div> ``` .grandchild-component和.child-component独立于他们的父容器。这个模块是用于他的子容器定位。这样做好处是嵌套的UI组件彼此完全脱离。 #### State(状态) 模块的具体状态作为模块的本身被定义在相同的文件中(如上面的.my-module--is-active),但我们要保持全局状态类的分离,如.is-hidden。 #### Theme(皮肤) 我们通过在一个配置文件中设置变量的设置来实现站点的特定风格。