CSS 样式书写规范(推荐)

下面给您详细讲解 CSS 样式书写规范的完整攻略。

1. 命名规范

CSS 的命名规范要有意义，能够清晰体现该元素的特点或者功能。一般我们建议采用“中划线方式”，例如：

/* 示例1 */
.news-content{
  background-color: #fff;
  font-size: 16px;
}

/* 示例2 */
.left-nav{
  float: left;
  width: 20%;
}

2. 结构规范

CSS 样式的结构也很重要，建议按照以下顺序排版:

1. 布局（Display、Float、Position、Clear）
2. 盒子模型（Width、Height、Margin、Padding、Border）
3. 背景（Background）
4. 字体相关（Font）
5. 文本相关（Text）
6. 表格相关（Table）
7. 其他（Animation、Transform、Opacity 等）

示例代码：

/* 示例3 */
.news-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  width: 960px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;

  background-color: #fff;

  font-size: 16px;
  font-weight: 400;
  text-align: center;
  line-height: 1.5;

  animation-name: fade;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

3. 属性规范

• 将半角分号作为每条规则的结束，可以提高代码的可读性，方便自动化工具格式化CSS代码。
• 属性名和值之间保留一个空格。
• 十六进制颜色值要小写，缩写需写全，例如 #fff。
• 尽量使用简写属性，例如 margin、padding、font 等，可以有效减少代码量。
• 避免使用!important，它会覆盖其他规则，增加以后维护代码的难度。

示例代码：

/* 示例4 */
.news-list{
  width: 100%;
  margin: 0 auto;

  font-size: 14px;
  font-family: '微软雅黑', Arial, Helvetica, sans-serif;

  background-image: url('background.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* 示例5 */
.btn{
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;

  font-size: 16px;
  text-align: center;
  text-decoration: none;

  color: #333;
  background-color: #eee;

  transition: all 0.3s ease;
}

以上就是 CSS 样式书写规范的完整攻略，希望对你有所帮助。