【CSS】css rules guidelines

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，由外向内，从元素与外界的关系，是否会影响外部布局，到外边距，内边距等

1. 布局相关(position, float, clear, display)，因为元素的布局会对对相邻元素产生影响，自身甚至会脱离原来的文档流，所以比较重要
2. 盒模型相关(width, height, margin, padding)
3. 外观 (color, background, border, box-shadow)
4. 文字排版 (font-size, font-family, text-align, text-transform)
5. 其他 (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语义化