CSS书写规范、顺序和命名规则

下面是“CSS书写规范、顺序和命名规则”的完整攻略：

CSS书写规范

1. 使用小写字母和短横线（-）来为选择器命名；
2. 使用一致的缩进和空格来增强代码可读性；
3. 将样式按逻辑划分成块，并用注释来加以说明；
4. 在每个属性值的冒号（:）后面添加一个空格；
5. 将所有样式块放入大括号（{ }）中；
6. 在样式块的右括号（}）前添加一个空格；
7. 尽量避免使用 !important 来覆盖样式规则。

示例代码：

/* 不好的书写格式 */
body{background-color:red;}div .class{height:20px !important;}
a{text-decoration:none; Margin:0; color: #000}

/* 好的书写格式 */
body {
  background-color: red;
}

div .class {
  height: 20px;
}

a {
  text-decoration: none;
  margin: 0;
  color: #000;
}

CSS顺序规则

CSS样式的排列顺序，应该按照下面的次序来进行排列：

1. 位置属性(position, top, right, z-index, display, float等)；
2. 大小(width, height, padding, margin)；
3. 文本属性(font, line-height, letter-spacing, color- text-align等)；
4. 背景(background, border等)；
5. 其他(animation等)

示例代码：

.example {
  /* 1. positioning */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: block;

  /* 2. sizing */
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;

  /* 3. text */
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 1px;
  color: #222;
  text-align: center;

  /* 4. background/border */
  background-color: #ccc;
  border: 1px solid #000;

  /* 5. other */
}

CSS命名规则

命名规则也是常见的问题，我们应该有常见的约定。这里介绍一种常用的命名方式，名为BEM(Block, Element, Modifier)：

1. Block：块，用于描述一个组件外层的包装；
2. Element：元素，用于描述一个组件内部的元素（子元素）；
3. Modifier：修饰器，用于描述组件的状态、属性等；

示例代码：

<div class="card">
  <h2 class="card__title">Card Title</h2>
  <div class="card__body">
    <p>这是一段卡片的主体内容</p>
  </div>
  <a class="card__link card__link--important" href="#">Learn More</a>
</div>

/* block */
.card {
  border: 1px solid #ccc;
  padding: 16px;
}

/* element */
.card__title {
  margin: 0;
  font-size: 24px;
}

/* element */
.card__body {
  margin-top: 12px;
  font-size: 16px;
}

/* modifier */
.card__link {
  display: block;
  font-size: 16px;
  text-decoration: none;
  color: #333;
}

/* modifier */
.card__link--important {
  color: tomato;
}

这种命名规则可以让样式更清晰、易于管理，并且可以提高代码的重用性。

以上就是关于“CSS书写规范、顺序和命名规则”的完整攻略。