么公在厨房猛进猛出,欧美日韩国产综合视频专区

如何書寫可維護(hù)的CSS代碼？

2017-02-21 15:01:01 次瀏覽

&emsp;&emsp;在前幾天的文章中，我們討論過書寫高效CSS注意的七個(gè)方面。今天我們?cè)趍f1288.com和大家討論如何書寫可維護(hù)的CSS代碼？&emsp;&emsp;一、在樣式表開頭添加一個(gè)注釋塊，用以描述這個(gè)樣式表的創(chuàng)建日期、創(chuàng)建者、標(biāo)記等備注信息。&emsp;&emsp;…

在前幾天的文章中，我們討論過書寫高效CSS注意的七個(gè)方面。今天我們?cè)趍f1288.com和大家討論如何書寫可維護(hù)的CSS代碼？

一、在樣式表開頭添加一個(gè)注釋塊，用以描述這個(gè)樣式表的創(chuàng)建日期、創(chuàng)建者、標(biāo)記等備注信息。

Example Source Code

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

  Site: Site name 

  Author: mf1288.com

  Updated: Date and time 

  Updated by: Name

---------------------------------
*/
二、包括公用顏色標(biāo)記

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進(jìn)行有意義的命名

Example Source Code

不推薦的命名方式：

  .green-box { ... } 

  #big-text { ... }

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

四、將關(guān)聯(lián)的樣式規(guī)則進(jìn)行整合

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文件呢。請(qǐng)大家關(guān)注。

上一條：15個(gè)CSS常識(shí)

下一條：CSS層疊與繼承

返回列表

如何書寫可維護(hù)的CSS代碼？

友情鏈接：

如何書寫可維護(hù)的CSS代碼？