CSS 规范
CSS 规范使 CSS 文件具有一致性。它们有助于扩展和维护项目。推荐的 CSS 规范如下
BEM
BEM —— Block(块)、Element(元素)、Modifier(修饰符)—— 是最流行的 CSS 规范之一。它是一组命名约定,你可以使用它们轻松地设计可复用组件。命名约定遵循以下模式:
.block { ... }
.block__element { ... }
.block--modifier { ... }
.block
块代表一个组件。它们是独立的实体,并且对自身有意义。.block__element
这些是.block
的一部分。它们没有独立的含义,必须绑定到一个块上。.block--modifier
它们被用作块或元素的标志。我们可以使用它们来改变元素的外观、行为或状态。例如,要使用隐藏标记,我们可以命名为.block--hidden
属性排序
将纷繁的 CSS 样式属性进行合理地排列,outside in
,由外向内,从元素与外界的关系,是否会影响外部布局,到外边距,内边距等
- 布局相关(position, float, clear, display),因为元素的布局会对对相邻元素产生影响,自身甚至会脱离原来的文档流,所以比较重要
- 盒模型相关(width, height, margin, padding)
- 外观 (color, background, border, box-shadow)
- 文字排版 (font-size, font-family, text-align, text-transform)
- 其他 (cursor, overflow, z-index)
.button {
display:inline-block;
margin:1em 0;
padding:1em 4em;
color:#fff;
background:#196e76;
border:0.25em solid #196e76;
box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3),
0.5em 0.5em 0 #444;
font-size:3em;
font-family:Avenir, Helvetica, Arial, sans-serif;
text-align:center;
text-transform:uppercase;
text-decoration:none;
}
使用标签代替 CSS
实际的 CSS 应用。这经常被忽略。通常,你可以简单地通过使用正确的 HTML 标签来减小 CSS 包的大小。假设你的标题包含以下规则:
span.heading {
display: block;
font-size: 1.2em;
margin-top: 1em;
margin-bottom: 1em;
}
你使用了一个 span
标签作为标题。你重写了默认的显示、间距和字体样式。这可以通过使用 h1
、h2
或 h3
来避免。默认情况下,它们具有你试图用其他标签达到的样式。你可以立即少写四条不必要的样式规则,初探 · HTML5语义化