一只人的异想世界:关注生活,关注网络

推荐使用的div+css命名规则2010-09-21

分类:前端开发 2,992次浏览 10条评论

编写网页的时候,一般都没有把命名规则认真对待。在结合语义以及搜索优化两方面给出了一套命名方案,对增强阅读性、规范性和提高开发效率是有帮助的,当然,这方面的规范,仁者见仁智者见智,网上有许多前辈们以经验总结的类似规则,具体怎么用,大家还是因人制宜吧。仅做记录,方便后续查阅。

页头:header

登录条:loginBar

标志:logo

侧栏:sideBar

广告:banner

导航:nav

子导航:subNav

菜单:menu

子菜单:subMenu

搜索:search

滚动:scroll

页面主体:main

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

按钮:btn

投票:vote

合作伙伴:partner

友情链接:friendLink

页脚:footer

版权:copyRight

1.CSS ID 的命名

外 套:  wrap

主导航:  mainNav

子导航:  subnav

页 脚:  footer

整个页面: content

页 眉:  header

页 脚:  footer

商 标:  label

标 题:  title

主导航:  mainNav(globalNav)

顶导航:  topnav

边导航:  sidebar

左导航:  leftsideBar

右导航:  rightsideBar

旗 志:  logo

标 语:  banner

菜单内容1: menu1Content

菜单容量: menuContainer

子菜单:  submenu

边导航图标:sidebarIcon

注释:   note

面包屑:  breadCrumb(即页面所处位置导航提示)

容器:   container

内容:   content

搜索:   search

登陆:   login

功能区:  shop(如购物车,收银台)

当前的   current

2.另外在编辑样式表时可用的注释可这样写:

<– Footer –>

内容区

<– End Footer –>

3.样式文件命名

主要的 master.css

布局,版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

PS:CSS代码书写顺序

今天向大家提倡一种CSS代码书写顺序。这样便于阅读,查找与修改属性,使CSS代码更加的清晰规范。

一、显示属性

* display

* list-style

* position

* float

* clear

二、自身属性

* width

* height

* margin

* padding

* border

* background

三、文本属性

* color

* font

* text-decoration

* text-align

* vertical-align

* white-space

* other text

* content

本文链接地址:http://www.wkeke.cn/archives/div-css-naming-rules/

更多
转载文章请保留博客名称及本文链接,谢谢合作!转载已注明非原创文章请注明原文地址及本博客相关信息。

相关日志 »

10条评论 »

  1. christian audigier 说道:

    再来学习学习~

  2. pizn 说道:

    命名规范在团队开发的过程中起到非常重要的作用,关乎到开发的速度与效率。哈哈,最近太忙,重要有时间来逛了。

  3. 情侣网名 说道:

    不错 值得收藏啊

  4. 酷狗2010 说道:

    看文章听音乐 学到了。。哈哈

  5. ruizhi 说道:

    其实每个人都有自己的习惯

  6. 广州SEO 说道:

    讲的有点简单,搞些例子呀

  7. 不知道这些,学习下~

发表评论 »