css结构设计思想

本文摘自博客园-予沁安的文章：结构化CSS设计思维，作为学习笔记记录一下

1.LESS、SASS等预处理器给CSS开发带来了语法的灵活和便利，其本身却没有给我们带来结构化设计思维。很少有人讨论CSS的架构设计。

2.当我们的网站成长为企业级网站时，如果缺乏良好的架构和设计，我们的CSS会成为臃肿、重复和难以维护的一个混沌。借鉴后台软件开发思维。

3.应该根据它们的业务意义，划分未不同的类别。

• 基本（元素）
• 布局
• 模块
• 状态
• 主题

4.保持分离。往结构化走。

5.基本规则的范畴：

基本规则是应用于基本元素级别的规则，作用于全局统一（默认）的风格。最好的一个案例：CSS的重置框架reset.css以及bootstrap的改进方案normalize.css，就完全是基本风格规则，不包含任何其他类型的规则。

6.布局规则的范畴：

（1）页面Page => 布局 Layout => 模块 Module => 元素 Element

（2）一个页面由布局组成，每个布局局部由一个或多个模块组成，一个模块有n个元素组成，看上去简单而完美，真正的结构化、模块化。然而，现实世界总是非线性的。在实际项目中，严格的层次关系设计，遇到了各类特例需要打破这个结构。

（3）当需要模块与模块之间的通信和信息交流时，这种结构却不能自然的支持。

（4）之所以有这些“特例”，根本原因就是分形思维只适合在模块这一级别，而不能往上扩展到布局和页面界别，也不能往下扩展到元素级别。

（5）布局就是布局，应该作为一个独立的方面存在。

（6）布局规则中，我们只关注组件之间的相互关系，不关心组件自身的设计，也不关心布局所在的位置。

比如用list做布局时：

.layout-grid{
    margin:  0;
    padding: 0;
    list-style-type: none;
}

.layout-grid > li {
    display: inline-block;
    margin: 0 0 10px 10px;
}

7.模块规则

模块可以放在布局的组件中，也可以放在另外一个模块内部，是嵌套的，就是分形。

用class和语义标签

我们一般都用class来定义模块

.module > h2{
    padding: ......
}

用subclass定义嵌套元素风格

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

8.状态规则

• 状态改变布局风格或模块风格
• 状态大部分时候和JavaScript相联系

最经典的案例就是表单数据的有效性，一般都会引入class定义，类似 is-valid；还有就是tab当前激活的状态 is-tab-active等，前者会改变表单的布局：增加warning信息；后者，会改变tab模块的显示背景来表明当前tab是被选中的。

9.主题规则

主题是整个网站的风格全面的改变。custom

10.基本规则和模块规则的正交案例

场景：

比如说我们网页中需要一个表格来显示一些信息

table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  border-width: 1px 1px;
}

td{
  border: 1px solid #000;
  border-width: 1px 1px;
}