CSS命名規范和規則


一、命名規則

1)、所有的命名最好都小寫
2
)、屬性的值一定要用雙引號("")括起來,且一定要有值如class="divcss5",id="divcss5"
3
)、每個標簽都要有開始和結束,且要有正確的層次,排版有規律工整
4
)、空元素要有結束的tag或於開始的tag后加上"/"
5
)、表現與結構完全分離,代碼中不涉及任何的表現元素,如style、font、bgColor、border等
6
)、<h1>到<h5>的定義,應遵循從大到小的原則,體現文檔的結構,並有利於搜索引擎的查詢。
7
)、給每一個表格和表單加上一個唯一的、結構標記id
8
)、給圖片加上alt標簽
9
)、盡量使用英文命名原則
10
)、盡量不縮寫,除非一看就明白的單詞

 

二、class的命名

(1).red { color: red; }

.f60 {color: #f60; }

.ff8600{ color: #ff8600; }

(2)字體大小,直接使用”font+字體大小”作為名稱,如

.font12px{ font-size: 12px; }

.font9pt{font-size: 9pt; }

Pspx就是表示pixel,像素,是屏幕上顯示數據的最基本的點;

pt就是point,是印刷行業常用單位,等於1/72英寸;

pixel是相對大小,而point是絕對大小,也有說em是相對單位,而px和pt都是絕 對單位

px是以屏幕象素為單位。pt是以1/72英寸為單位

計算公式如下:那么1px = 1pt * 圖像分辨率/72 
       PX
和em轉換的公式:
      
對於PX轉em的方法也類似,就是em=16乘以1px,也就是說1.5em=1.5×16=24px

(3)對齊樣式,使用對齊目標的英文名稱,如

       .left { float:left; }

       .bottom { float:bottom; }

(4) 使用”類別+功能”的方式命名(這個就不具體說了,看個人習慣和項目的具體情況而定)

(5)采用駝峰式命名,如下所示:

   mainContent  newsContent   headerImage

   使用駝峰式命名的好處:增強代碼的可讀性,避免引入額外的分隔符,從而減少字符數量

(6)不建議使用中線或者下划線,會增加文件的大小。(盡量不使用,個人習慣不好的可以慢慢改)

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com