Web前端CSS书写的先后顺序 前端css js

CSS有非常多的属性，每个属性又有很多很多的值，好的书写顺序给人眼前一亮的感觉，同时也方便了日后的维护，那么什么样的顺序才合适呢？其实不需要死记硬背，我们可以把CSS书写的先后顺序比作为一个人的自我简历，当我们做介绍时基本顺序是：家庭地址，姓名、身高、体重，家庭情况，学历、工作简历，特长爱好等，那么CSS书写顺序也跟这个类似，如下：

1、布局位置属性：display position float clear visibility top right overflow z-index 等；

2、自身属性：width height margin padding 等；

3、 背景边框：border background 等；

4、文本属性： font color text-decoration text-align vertical-align white- space break-word 等；

5、其他属性：content cursor border-radius box-shadow text-shadow animation transition等。

是不是跟个人简历顺序基本相同？当写CSS时联想一下自己简历顺序就出来了！

下面两段CSS截取国内知名网站，基本都是按照上面顺序书写！

.site-header .logo {

position: relative;

display: block;

width: 55px;

height: 55px;

overflow: hidden;

background-color: #ff6700;

*background: url(/i/logo.png) no-repeat 50% 50%;

}

.site-header .nav-list {

position: relative;

z-index: 10;

float: left;

width: 1100px;

height: 88px;

margin: 0;

padding: 12px 0 0 30px;

list-style-type: none;

font-size: 16px;

}