如何书写更加易于维护的css
从事网站前台WEB制作的朋友都知道，如今CSS已经成为网页布局不可缺少的一部分了，虽然还有不少网站制作公司在使用TABLE制作网站，但是在制作过程也免不了使用CSS，那么如何书写CSS让后期维护时更加轻松呢？
一、在样式表开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息。
1 2 3 4 5 6 7 8 | /*
———————————
Site: Site name
Author: <a title="宁波网站建设" href="http://www.ningboweb.net/" target="_self"><span style="text-decoration: underline;"><strong>ningboweb.net</strong></span></a>
Updated: Date and time
Updated by: Name
———————————
*/ |
这一步很多人都忽视了，jimmy我在平时写CSS时也很少用到，不过后来发现还是有一定用处的。
二、包括公用颜色标记
1 2 3 4 5 6 7 8 9 10 11 12 13 | /*
———————————
COLORS
Body background: #def455
Container background: #fff
Main Text: #333
Links: #00600f
Visited links: #098761
Hover links: #aaf433
H1, H2, H3: #960
H4, H5, H6: #000
———————————
*/ |
三、给ID和Class进行有意义的命名
不推荐的命名方式：
1 2 | .green-box { … } #big-text { … } |
推荐使用的命名方式：
1 2 | .pullquote {… } #introduction {… } |
四、将关联的样式规则进行整合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #header { … } #header h1 { … } #header h1 img { … } #header form { … } #header a#skip { … } #navigation { … } #navigation ul { … } #navigation ul li { … } #navigation ul li a { … } #navigation ul li a:hover { … } #content { … } #content h2 { … } #content p { … } #content ul { … } #content ul li { … } |
五、给样式添加清晰的注释
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* ——————————— header styles ——————————— */ #header { … } #header h1 { … } #header h1 img { … } #header form { … } /* ——————————— navigation styles ——————————— */ #navigation { … } |
其实在给网页布局的时候，只要多那么一小步，或者多付出一点点，就会给以后的维护带来更加明显的效果，这样做需要养成一种习惯，好习惯一但养成了，想改都改不了。.
