CCS样式命名

Posted 2020-09-27 询询

命名规则

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.不加中杠和下划线;