CSS代码书写规范究极指南

CSS代码的书写规范对于网页设计的重要性不言而喻，它可以让代码更加规范，便于团队协作和维护，同时也可以提高代码的可读性和可维护性，让网页更加稳定、流畅、美观。下面是CSS代码书写规范的完整攻略。

1. 命名规范

命名规范是CSS代码书写规范的重中之重，命名要简洁、清晰、具有可读性，它可以让你的代码更易维护，以下是推荐的命名规范：

• 不要使用拼音或缩写，除非是非常常见的缩写，比如nav、btn等。
• 使用意义明确、语义化的单词或短语，不要使用无意义的单词或数字，比如box、div1、con等。
• 使用小写字母，多个单词之间使用连字符-连接，比如main-content、header-nav等。

2. 代码结构

正确的代码结构可以让代码更清晰、易读，推荐的代码结构如下：

/* reset.css */
body,html {
    margin: 0;
    padding: 0;
}
/* main.css */
/* 全局 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 元素模块 */
header {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}
/* 修饰类 */
.btn {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 20px;
    text-align: center;
    line-height: 1.2;
    border-radius: 3px;
    color: #fff;
    background-color: #4a90e2;
    cursor: pointer;
}

• 在代码中使用注释分块，比如reset.css/reset.scss，main.css/main.scss等等。
• 在同一模块中，按照CSS属性的字母顺序排列。
• 在模块和装饰类两者之间保留一个空行。

3. CSS属性顺序

按照以下顺序排列属性可以让代码更加清晰，易读，同时也方便维护。

1. 布局定位属性：display、position、float、clear、visibility、overflow。
2. 自身属性：width、height、margin、padding、border。
3. 文本属性：color、font、text、line-height、text-align、vertical-align。
4. 其他：background、box-shadow、filter、animation、transition等。

4. 其他规范建议

除了上面提到的规范之外，还应该遵守以下建议：

• 避免!important，它会覆盖任何定义，会让代码难以维护。
• 尽量使用缩写，比如padding/margin可以使用padding-top/right/bottom/left，color可以使用缩写#ccc代替rgb(204,204,204)。
• 尽量避免使用ID选择器，因为它的优先级最高，不利于维护。
• 减少无用代码，尽量简化CSS文件。

在实际开发中，我们需要根据实际情况灵活应用规范和建议，写出高质量、可维护的CSS代码。

示例1：

/* 元素模块 */
.container {
    width: 1200px;
    margin: 0 auto;
}

.box {
    display: flex;
    flex-wrap: wrap;
}
.box-item {
    width: calc((100% - 60px)/3);
    margin-right: 20px;
    margin-bottom: 20px;
}
.box-item:last-child {
    margin-right: 0;
}

/* 修饰类 */
.btn-blue {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 20px;
    text-align: center;
    line-height: 1.2;
    border-radius: 3px;
    color: #fff;
    background-color: #4a90e2;
    cursor: pointer;
}

示例2：

/* 全局 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 元素模块 */
.header {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}
.nav {
    width: 100%;
    height: 40px;
    background-color: #e4e4e4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-item {
    display: inline-block;
    margin-right: 20px;
}

/* 修饰类 */
.btn {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 20px;
    text-align: center;
    line-height: 1.2;
    border-radius: 3px;
    color: #fff;
    background-color: #4a90e2;
    cursor: pointer;
}