Web设计之CSS命名规范详解
2013-03-09 20:48
507 查看
web设计之CSS命名规范:
1.1 公共部分和经常要用到的样式
整个容器:container
外围整体布局: wrap
页头部分:head/header/top
内容:content
页脚部分:foot/footer/bottom
栏目:column 主体部分:main
左 / 中 / 右 三 栏 : mainleft/mainmid/mainright mainl/mainm/mainr
侧栏:sidebar
左右两栏:siderbarl/sidebarr 或者 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为前缀 。
上中下就可以依次是: producth,productm,product_b.
中间又分为左右结构,那就是 productml,productmr
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的命名规范和范例
- web标准化设计:常用的CSS命名规则
- 常用的CSS命名规则 (web标准化设计)
- web标准化设计:常用的CSS命名规则手册
- web标准化设计:常用的CSS命名规则
- 常用的CSS命名规则 (web标准化设计)
- web标准化设计:常用的CSS命名规则
- web标准化设计:常用的CSS命名规则
- web标准化设计:常用的CSS命名规则
- web设计之CSS命名规范详解
- Web站点设计css类以及id的命名方式
- web标准化设计:常用的CSS命名规则......
- web前端开发企业级CSS常用命名,书写规范总结
- web开发 DIV+CSS规范命名集合
- CSS命名规则 web标准化设计
- web标准化设计:常用的CSS命名规则
- CSS常用命名规范及写法详解
- 常用的CSS命名规则 web标准化设计
- web标准化设计:常用的CSS命名规则
- div+css设计中ID的命名习惯和规范