企业中书写css,web前端开发企业级CSS常用命名，书写规范总结(示例代码)

(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 　　}