(1)頁面結構

容器: container　　頁頭：header　　內容：content/container　　頁面主體：main　　頁尾：footer　　導航：nav　　側欄：sidebar　　欄目：column　　頁面外圍控制整體布局寬度：wrapper　　左右中：left right center

(2)導航

導航：nav　　主導航：mainbav　　子導航：subnav　　頂導航：topnav　　邊導航：sidebar　　左導航：leftsidebar　　右導航：rightsidebar　　菜單：menu　　　　　　　子菜單：submenu　　標題: title　　摘要: summary

(3)功能

標志：logo　　廣告：banner　　登陸：login　　登錄條：loginbar　　注冊：regsiter　　搜索：search　　功能區：shop　　標題：title　　加入：joinus　　狀態：status　　按鈕：btn　　滾動：scroll　　標簽頁：tab　　文章列表：list　　提示信息：msg　　當前的: current　　小技巧：tips　　圖標: icon　　注釋：note　　指南：guild　　　　　　服務：service　　熱點：hot　　新聞：news　　下載：download　　投票：vote　　合作伙伴：partner　　友情鏈接：link　　版權：copyright

3.class命名

(1)顏色:使用顏色的名稱或者16進制代碼,如：

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

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

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

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

.left { float:left; }

.bottom { float:bottom; }

(4)標題欄樣式,使用"類別+功能"的方式命名,如：

.barnews { }

.barproduct { }

推薦的CSS書寫順序

相關的屬性聲明應當歸為一組，并按照下面的順序排列：

Positioning

Box model

Typographic

Visual

由于定位(positioning)可以從正常的文檔流中移除元素，并且還能覆蓋盒模型(box model)相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。

1 　　.xxx {2

3 　　　/*Positioning*/

4

5 position: absolute;6

7 　　　　top:0;8

9 　　　　right:0;10

11 　　　　bottom:0;12

13 　　　　left:0;14

15 　　　　z-index:100;16

17 　　　/*Box-model*/

18

19 　　　　display: block;20

21 float: right;22

23 width: 100px;24

25 height: 100px;26

27 　　　/*Typography*/

28

29 　　　　font: normal 13px "Helvetica Neue", sans-serif;30

31 　　　　line-height:1.5;32

33 　　　　color:#333;34

35 　　　　text-align: center;36

37 　　　/*Visual*/

38

39 　　　　background-color:#f5f5f5;40

41 　　　　border: 1px solid #e5e5e5;42

43 border-radius: 3px;44

45 　　　/*Misc*/

46

47 　　　　opacity:1;48

49 　　}

總結

以上是生活随笔為你收集整理的企业中书写css,web前端开发企业级CSS常用命名，书写规范总结(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。