CSS 属性声明顺序

2019-1-16 14:10| 作者: admin| 查看: 3414| 评论: 0|来自: 蚂蚁部落

仓禀实而知礼仪,衣食足而知荣辱,满足基本的需求,就会追求更高的层次。

写CSS代码大致也是如此的规律,入门阶段,最大的满足是能够实现页面正常展现。

属性的声明没有任何规律可言,基本是想到哪写到哪,随着水平提高,逐渐对代码质量有了要求。

比如对于CSS代码性能的要求,CSS属性声明合理性排序的要求等。

代码性能的要求主要在选择器的合理使用,具体参阅CSS 选择器性能优化一章节。

本文介绍一下CSS属性排序方面的规范,首先强调一点,CSS属性的声明顺序与性能无关。

属性声明排序的重要性基于如下几点原则:

(1).整齐有序,有规律可循,对于团队开发和后期维护有着重要意义。

(2).从心理层面来看,对于写代码或者维护代码者来说可能有更为舒心愉悦。

一.属性排序规则:

(1).文档流相关属性(display, position, float, clear, visibility, table-layout)

(2).盒模型相关属性(width, height, margin, padding, border)

(3).排版相关属性(font, line-height, text-align, text-indent, vertical-align)

(4).装饰性相关属性(color, background, opacity, cursor)

(5).文字排版(font, line-height, letter-spacing, color- text-align)

(6).生成内容相关属性(background, border)

特别说明:

(1).上面并没有列举涵盖所有的属性,只是一部分。

(2).分类之间使用一个空行分隔,后面会有代码实例演示。

(3).并不一定严格遵循上述原则,因为这是一个最佳实践,与标准和性能无关,并且有些属性难以归类,比如border-color是归入盒模型相关还是装饰性相关,所以只要保证整个开发团队使用完全相同的一套CSS属性排序规范,总体符合上述原则即可。

二.代码实例如下:

下面就以对一个链接元素进行一些相关的CSS设置来演示一下排序规则。

对链接A元素设置的目标是:

(1).将其转换为一个块级元素,并设置恰当尺寸。

(2).设置一定的内外边距。

(3).设置一定的背景色欲文本颜色。

(4).去掉链接自带的下划线,文本居中显示。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
<style type="text/css">
.ant {
  display: block;

  margin: 1em 0;
  padding:1em 4em;

  width:100px;
  height:20px;
  border:0.25em solid #196e76;

  color:#fff;
  background:#196e76;
  box-shadow:inset 0.15em 0.15em 0.3em rgba(0,0,0,0.3), 
               0.3em 0.3em 0 #444;
 
  font-size:1em;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
}
</style> 
</head>
<body>
  <a class="ant">蚂蚁部落</a>
</body>
</html>

上述代码就是按照前面讲的原则对CSS属性声明排序,再强调如下两点:

(1).每一个分类用空行分隔。

(2).排序规范不是硬性的,关键是一个团队或者个人始终遵循共同一致的一套规范。

上述代码也可以修改成如下排序:

[CSS] 纯文本查看 复制代码
.ant {
  display: block;
  margin: 1em 0;
  padding:1em 4em;

  width:100px;
  height:20px;

  color:#fff;
  border:0.25em solid #196e76;
  background:#196e76;
  box-shadow:inset 0.15em 0.15em 0.3em rgba(0,0,0,0.3), 
               0.3em 0.3em 0 #444;
 
  font-size:1em;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
}

完全没有问题,还是那句话,不是硬性规定,团队遵循同一套规范。

三.CSS属性排序总结:

[CSS] 纯文本查看 复制代码
.ant {
  display: ;
  visibility: ;
  float: ;
  clear: ;
  
  position: ;
  top: ;
  right: ;
  bottom: ;
  left: ;
  z-index: ;
  
  width: ;
  min-width: ;
  max-width: ;
  height: ;
  min-height: ;
  max-height: ;
  overflow: ;
  
  margin: ;
  margin-top: ;
  margin-right: ;
  margin-bottom: ;
  margin-left: ;
  
  padding: ;
  padding-top: ;
  padding-right: ;
  padding-bottom: ;
  padding-left: ;
  
  border: ;
  border-top: ;
  border-right: ;
  border-bottom: ;
  border-left: ;
  
  border-width: ;
  border-top-width: ;
  border-right-width: ;
  border-bottom-width: ;
  border-left-width: ;

  border-style: ;
  border-top-style: ;
  border-right-style: ;
  border-bottom-style: ;
  border-left-style: ;
  
  border-color: ;
  border-top-color: ;
  border-right-color: ;
  border-bottom-color: ;
  border-left-color: ;
  
  outline: ;
  list-style: ;
  
  table-layout: ;
  caption-side: ;
  border-collapse: ;
  border-spacing: ;
  empty-cells: ;
  
  font: ;
  font-family: ;
  font-size: ;
  line-height: ;
  font-weight: ;
  text-align: ;
  text-indent: ;
  text-transform: ;
  text-decoration: ;
  letter-spacing: ;
  word-spacing: ;
  white-space: ;
  vertical-align: ;
  color: ;
  
  background: ;
  background-color: ;
  background-image: ;
  background-repeat: ;
  background-position: ;
  
  opacity: ;
  cursor: ;
  content: ;
  quotes: ;
}

上面是常见CSS属性的一些排序最佳实践,可以做一下参考。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部