CCS样式命名

命名规则

  1. 所有的命名最好都小写
  2. 属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
  3. 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
  4. 空元素要有结束的tag或于开始的tag后加上"/"
  5. 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
  6. <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
  7. 给每一个表格和表单加上一个唯一的、结构标记id
  8. 给图片加上alt标签
  9. 尽量使用英文命名原则
  10. 尽量不缩写,除非一看就明白的单词

tips:

1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。不要使用表面形式的命名.
如:red/left/big等。

2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news

3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
鼠标悬停::hover   点击:click   已浏览:visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

常用命名

页面结构命名:

容器:container    页头:header    内容:content/container

页面主题:main    页尾:footer     导航:nav

侧边栏:sidebar    栏目:column    页面外围控制整体宽度:wrapper

导航:

主导航:mainnav    子导航:subnav    顶导航:topnav

边导航:sidebar    左导航:leftsidebar    右导航:rightsidebar

菜单:menu     子菜单:submenu    标题: title    摘要: summary

功能:

标志: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

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 { } 注意事项: 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线;

 

posted @ 2017-07-09 21:02  询询  阅读(1544)  评论(0编辑  收藏  举报