SMACSS
优质
小牛编辑
134浏览
2023-12-01
1 概述
css方法论中，有三个著名的方法论：
1.1 OOCSS
其主要的两个原则是：
- Separate structure and skin（分离结构和主题）
- Separate container and content（分离容器和内容）
1.2 SMACSS
其主要原则有3条：
- Categorizing CSS Rules（为css分类）
- Naming Rules（命名规则）
- Minimizing the Depth of Applicability（最小化适配深度）
2 分类
2.1 Base-基础
示例：
body, form {
margin: 0;
padding: 0;
}
a{
color: #039;
}
a:hover {
color: #03F;
}
- 不应该包含类和id
- 不应该使用!important
- 尽量采用CSS Reset框架，推荐使用Normalize.css. Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上
2.2 Layout-布局
示例：
#header, #article, #footer {
width: 960px;
margin: auto;
}
#article {
border: solid #CCC;
border-width: 1px 0 0;
}
2.3 Module-模块
示例：
.module .title {
padding: 5px;
}
.module .article {
padding: 5px;
}
避免使用元素选择器（例如.module span），因为更为复杂的结构，会导致元素选择器产生严重的影响
当相同的元素，在页面的其他地方偶然出现时，或者对某类元素有不同种表现时，应该采用子类，例如：bootstrap的btn-primary, btn-info
2.4 State-状态响应规则
示例：
.is-hidden
.is-collapsed
/* default state for nav items */
.nav > li {
float: left;
}
/* alternate state for nav items on small screens */
@media screen and (max-width: 400px) {
.nav > li { float: none; }
}
- 要注意：state和subclass module有些类似。区别在于：subclass module从页面载入时就应该是渲染完毕的，而state是在交互之后切换渲染样式的；state的实现，通常需要javascript辅助才行
- 有三类状态相应：js、伪类、媒体查询
- 状态规则通常是独立的，并且应用到单个class选择器上
- 非到万不得已，不要使用!important. 只有极其复杂的系统，才会使用它。（就好比程序员使用一大堆全局变量一样）
- state规则的命名，通常应该涵盖模块的名字，例如：.is-tab-active, .is-menu-collapsed
- 当使用动画时，坚持的原则是：用css来描述状态，用js来控制行为。
2.5 Theme-主题
示例：
/* in module-name.css */
.mod {
border: 1px solid;
}
/* in theme.css */
.mod {
border-color: blue;
}
- 主题涵盖的字体大小，通常在3-6种。超过6种字体大小的，就不用考虑了，会让网站很难维护。越少越好。
3 技巧
3.1 如何解决100%父宽度，减去固定宽度的布局？
解决方案：https://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels
3.2 如何在浮动宽度内，均匀分布固定大小的模块？
解决方案：