web设计之CSS命名规范详解

 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) 代码缩进与格式: 建议单行书写

 

 

转载请注明:代码家园 » web设计之CSS命名规范详解

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)