5条规则帮你写出可维护保养的css编码

日期:2020-12-14 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

1、在款式表开始加上1个注解块,用以叙述这个款式表的建立时间、建立者、标识等备注信息内容。

拷贝编码
编码以下:

Example Source Code:
/*
---------------------------------
Site: Site name
Author: 52CSS.com
Updated: Date and time
Updated by: Name
---------------------------------
*/

2、包含公共色调标识

拷贝编码
编码以下:

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
---------------------------------
*/

3、给ID和Class开展成心义的取名
不强烈推荐的取名方法:
Example Source Code:

拷贝编码
编码以下:

.green-box { ... }
#big-text { ... }

强烈推荐应用的取名方法:
Example Source Code:

拷贝编码
编码以下:

.pullquote {... }
#introduction {... }

4、将关系的款式标准开展整合
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 { ... }

5、给款式加上清楚的注解
Example Source Code:

拷贝编码
编码以下:

/*
---------------------------------
header styles
---------------------------------
*/
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
/*
---------------------------------
navigation styles
---------------------------------
*/
#navigation { ... }