【CSS】class和id命名规则
说明,本篇内容为书籍《高流量网站CSS开发技术》的学习总结,文字出自书本
书不错,推荐阅读学习
也可参阅网上的博文
原载:彬Go
链接:http://blog.bingo929.com/css-coding-semantic-naming.html
class和id是用来建立CSS到HTML文件内部的衔接
注意,有些选择器的写法应考虑浏览器兼容问题,如nth-child选择器,多class选择器.classA.classB(IE6和以前的版本不能理解)
对于元素class和id命名,有几件事要放在心上:
- 语义性
- 可接受的字符
- 惯例
- 一致性
1.首先说说语义性
所谓语义性,即名字应当描述内容,而不是描述表现,例子如下
♦表现型(不提倡)
PurpleBold(紫色粗体)
BigHeading(大号标题)
top-left-box(左上方框)
underlined-and-green(下划线绿色)
boxLeft(左侧框)
red(红色)
红色标示涉及元素的表现形式,这在命名里是不允许的,因为表现形式是变化的,当变化发生,不仅要修改CSS的class和id名,还要修改html相应元素的class和id名,相当麻烦,当你所编辑的是大型网站,出现多处这样的修改,是非常耗时且头疼的。所以应该尽可能采用适应变化的命名,即命名与内容紧密相关。
♦语义型(提倡)
sidebar(侧边栏)
warning(警告)
当然,有些时候适当运用表现来命名会更灵活。如,用bordered(带边框)的表现名给网站多处添加同样的样式。
记住,最佳方案不是最干净的那个,也不是最漂亮的那个,与其拘泥成法,不如将思路放开一些。
2.可接受的字符
最佳规则:始终使用字母、数字或连字符,并且始终以字母开头
记住,class和id名称是区分大小写的。
不要使用下划线,不要以数字或连字符打头,不接受“*”,“/”,“\”。虽然新的浏览器对生僻字符集的支持功能更多,但不是所有的浏览器如此,为了保证兼容性,请遵循最佳规则吧。
3.惯例
使用一些约定俗称的惯例名称,可提高代码可预测性,既让自己和他人容易理解,也有助于屏幕阅读器和分析器的工作,提高SEO(搜索引擎优化)
惯例参照Web前端开发规范手册
4.大小写
驼峰式(缩写单词的每个字母采用同样的大小写:pdfLink linkPDF)
连字符
5.命名空间
加前缀,如:wp-users。命名空间需要制定团队内的命名空间约定。
这是防御式CSS采用的技术之一,通过命名空间隔离代码,避免冲突,使其不影响原有和未来的代码。
后续阶段的学习:
Microformat(微格式) http://microformats.org/
【CSS】class和id命名规则的更多相关文章
- CSS的class、id、css文件名的常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- css的class, id等常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sid ...
- html页面的CSS、DIV命名规则
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- CSS学习笔记(7)--html页面的CSS、DIV命名规则
html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...
- 关于Html class id 命名规范
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- div+css样式表的id,class的常用命名规则
div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...
- css的命名规则
本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...
- css笔记1: html页面的CSS、DIV命名规则
原地址:http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html CSS命名规则 头:header 内容:content/co ...
- 常用的css命名规则:
关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...
随机推荐
- 手把手教你玩转SOCKET模型之重叠I/O篇(下)
四. 实现重叠模型的步骤 作 了这么多的准备工作,费了这么多的笔墨,我们终于可以开始着手编码了.其实慢慢的你就会明白,要想透析重叠结构的内部原理也许是要费点功夫,但是只是学会 如何来使用它,却 ...
- C#下利用高精度计时器进行计时操作
简介 精确的时间计量方法在某些应用程序中是非常重要的.常用的 Windows API 方法 GetTickCount() 返回系统启动后经过的毫秒数.另一方面,GetTickCount() 函数仅有 ...
- 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.1 Index用户列表]
3.1 Index用户列表 或许当前域下的用户列表 [Authorize] public async Task<ActionResult> Index() { var userList = ...
- Oracle 将不同列的值拼接成一个 字符串
利用拼接操作符“||”或者 CONCAT('','')函数,将不同列的值 拼接成一个 字符串 -- 方法一:推荐 SELECT S.TEAM ||'**'|| S.NAME ||'**'|| S. ...
- HTML要点(五)<iframe>标签
浏览器支持:全部支持 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML ...
- JS判断是否为安卓orIOS
var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > - ...
- SB集中营
我犯了一个超级低质的错误,是关于结构体内部变量的以 . 或者 –> 调用的问题. 当时的考虑是,如果结构体内变量是指针用 ->,其他用 . . 呵呵了. 难道是因为两天没休息好吗?还是 ...
- hdu1213 How Many Tables
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- uva10327 - Flip Sort
Flip Sort Sorting in computer science is an important part. Almost every problem can be solved effec ...
- Codeforces Gym 100187E E. Two Labyrinths bfs
E. Two Labyrinths Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/prob ...