如何书写可维护的CSS代码？-如意宝魔方建站平台

如何书写可维护的CSS代码？

2017-02-21 15:01:01 次浏览

&emsp;&emsp;在前几天的文章中，我们讨论过书写高效CSS注意的七个方面。今天我们在mf1288.com和大家讨论如何书写可维护的CSS代码？&emsp;&emsp;一、在样式表开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息。&emsp;&emsp;…

在前几天的文章中，我们讨论过书写高效CSS注意的七个方面。今天我们在mf1288.com和大家讨论如何书写可维护的CSS代码？

一、在样式表开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息。

Example Source Code

/*
---------------------------------

  Site: Site name 

  Author: mf1288.com

  Updated: Date and time 

  Updated by: Name

---------------------------------
*/
二、包括公用颜色标记

Example Source Code

/*
---------------------------------

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进行有意义的命名

Example Source Code

不推荐的命名方式：

  .green-box { ... } 

  #big-text { ... }

推荐使用的命名方式：
.pullquote {... }
#introduction {... }

四、将关联的样式规则进行整合

Example Source Code

  #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 { ... }

五、给样式添加清晰的注释

Example Source Code

/*
---------------------------------
header styles
---------------------------------
*/

  #header { ... }

  #header h1 { ... }

  #header h1 img { ... }

  #header form { ... }

/*
---------------------------------
navigation styles
---------------------------------
*/

  #navigation { ... }

在mf1288.com后面的文章中，我们将讨论如何管理你整站的CSS文件呢。请大家关注。

上一条：15个CSS常识

下一条：CSS层叠与继承

返回列表

如何书写可维护的CSS代码？

友情链接：