[分享]css3属性编写顺序

在编写CSS样式表的时候，属性的书写顺序是一项非常细节的问题。正确的属性编写顺序，不仅可以提高阅读性，还可以更好地组织样式表，并避免不必要的CSS样式冲突。.selector { / 位置相关属性 /...

在编写CSS样式表的时候，属性的书写顺序是一项非常细节的问题。正确的属性编写顺序，不仅可以提高阅读性，还可以更好地组织样式表，并避免不必要的CSS样式冲突。

.selector {
  /* 位置相关属性 */
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* 盒模型相关属性 */
  display: block;
  float: none;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;

  /* 文字相关属性 */
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* 背景相关属性 */
  background-color: #fff;
  background-image: url(../img/bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

如上所示，我们可以把CSS3属性分为四类，分别是位置相关属性、盒模型相关属性、文字相关属性以及背景相关属性。将这些属性按类别进行分组，再按照固定的顺序依次编写，可以有效地提高样式表的可读性。

按照以上的顺序编写CSS3属性，在写样式的时候，就遵循了这样的风格，遵循这样的规定，可以带给我们很多方便。