web设计之CSS命名规范详解

2019独角兽企业重金招聘Python工程师标准>>>

web设计之CSS命名规范：

1.1 公共部分和经常要用到的样式

整个容器：container

外围整体布局： wrap

页头部分：head/header/top

内容：content

页脚部分：foot/footer/bottom

栏目：column 主体部分：main

左 / 中 / 右 三 栏 ： main_left/main_mid/main_right main_l/main_m/main_r

侧栏：sidebar

左右两栏：siderbar_l/sidebar_r 或者 leftsidebar/rightsidebar

左中右：left/center/right

侧导航：sidenav

左/右导航：leftsidenav/rightsidenav

子导航：subnav

菜单：menu

子菜单：submenu

标题：title

摘要：summary

下拉：drop

下拉菜单：dropmenu

搜索：search

热门搜索：hotsearch

关键字：keyword

搜索输入框：search_input

搜索条：searchbar

友情链接：friendlink/link

版权信息：copyright

投票：vote

合作伙伴：partner

服务：service

指南：guid

网站信息：siteinfo

网站地图：sitemap

网站帮助：sitehelp

法律声明：siteinfolegal

信誉：siteinfocredits

加入我们：joinus

关于我们：aboutus

联系我们：contactus

小技巧：tips

注释：note

当前的：current

标签页：Tab

文章列表：List

提示信息：Msg

滚动：scroll

工具条：toolbar/tool

时间：time

日期：data

热点：hot

新闻：news

注册：Regsiter

状态：Status

按钮：Btn

下载：download

产品：products/pro

缩略图：screenshot 等等...

1.2 私有样式命名规范：

为了避免出现样式私有样式的名称和公有样式重复的想象， 私有样式 采用：”前缀_位置缩写” 的规则。如：该模块是属于产品就可以用product为前缀 。

上中下就可以依次是： product_h,product_m,product_b.

中间又分为左右结构，那就是 product_m_l,product_m_r

1.3 区域块：box/area

区域块样式类别+box/area,

比如新闻区域块： newsbox/newsarea，

产品区域块：probox/proarea

标题栏：bar (newsbar/probar)

列表：list (newslist/prolist)

2 id 与 class: class id 一个页面只可以使用一次，class 可以多次引用。id 和 class class id 好像没什么区别，在页面中用了多个id 在IE中显示也正常，第一影响就是不能通过 W3 的校验。在页面显示上，目前的浏览器还都允许 你犯这个错误，用多个相同 ID“一般情况下”也能正常显示。但是当你需要用 JavaScript 通过 id 来控制这个div，那就会出现错误。 因此：样式最好以 class 为主，不用id

3 css 属性书写顺序 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可 根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定 位属性主要包括: margin＆padding＆float（包括 clear）＆position（相 应的 top,right,bottom,left）＆display＆visibility＆overflow 等； 自身属 性主要包括: width & height & background & border; 文本属性主要包 括： font＆color＆text-align＆text-decoration＆text-indent 等； 其他属性 包 括 : list-style( 列 表 样 式 ) ＆ vertical-vlign ＆ cursor ＆ z-index( 层 叠 顺 序) ＆zoom 等. 表达式（Expression）

3.1 避免使用 CSS 表达式（Expression） 表达式的问题就在于它的计算频率要比我们想象的多

3.2 *{} , #zishu {} 尽量避开 由于不同浏览器对 HTML 标签的解释有差异，所以最终的网页效果在 不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通 常会在 CSS 的一个始就把所有标签的默认属性全部去除，以达到所有 签标属性值都统一的效果。所以就有了通配符。*会遍历所有的标签；这样写的问题是：

1)遍历会消耗很多的时间，如果你的 HTML 代码写的不规范或是某 一签标没有必合，这个时间可能还会更长；

2)很多的标签本来就没有这个属性或属性本身就是统一的，那么 更给设置一次，也有时间的开消；

4 一些注意事项

1)尽量考虑为元素命名其本身的作用或”用意”，达到语义化。 不要使用表面形式的命名

2）一律小写字母

3）尽量用英文

4）css 注释 /* fff */ 注意要加空格，不然在 jsp 读取下会忽略 掉注释下得第一个 css

5）css 文件最好用 utf-8

6）页面啊居中：margin:0 auto;居右： margin:0 0 0 auto;居左： margin:0 auto 0

7）不要去使用生僻的标签，因为这些标签往往在不同浏览器中解释 出来的效果不一样；所以你要尽可能的去使用那些常用的标签；

8. 不 要 使 用 * ； 而 是 把 你 常 用 到 的 这 些 标 签 进 行 处 理 ； 例 如 ： body,li,p,h1{margin:0; padding:0}

9. 必须为大区块样式添加注释, 小区块适量注释;

10. 代码缩进与格式: 建议单行书写

转载于:https://my.oschina.net/greenqingqings/blog/112542