说明,本篇内容为书籍《高流量网站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命名规则的更多相关文章

  1. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header       内容:content/container       尾:footer   ...

  2. css的class, id等常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sid ...

  3. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  4. CSS学习笔记(7)--html页面的CSS、DIV命名规则

    html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...

  5. 关于Html class id 命名规范

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  6. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  7. css的命名规则

    本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...

  8. css笔记1: html页面的CSS、DIV命名规则

    原地址:http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html CSS命名规则 头:header 内容:content/co ...

  9. 常用的css命名规则:

    关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...

随机推荐

  1. [原创小工具]软件内存、CPU使用率监视,应用程序性能监测器 v3.0 绿色版

    应用程序性能监测器 V3.0 更新内容:    1.对一些代码进行了修改,软件本身的性能有所提升. 应用程序性能监测器 V2.0 更新内容:     1.鼠标移动到曲线区域,显示相关的曲线值      ...

  2. commonJS — 自定义事件处理(for CustomEvent)

    for CustomEvent github: https://github.com/laixiangran/commonJS/blob/master/src/forCustomEvent.js 代码 ...

  3. JS模板Handlebars的使用和有效组织

      应用背景 我们在做项目时,为了使页面模块高度复用,使用页面模板是必须的,我想大家通常可能会新建MVC的项目,然后在页面中使用Razor引擎,新建Helper模板类,前后台代码的混写,简洁高效,一切 ...

  4. struts1与strut2的区别

    struts1和struts2是两个完全不同的框架 struts1工作流程:发布Struts Web服务时,根据web.xml初始化ActionServlet,ActionContext等内容.在接到 ...

  5. 我学的是设计模式的视频教程——辛格尔顿,生成器VS工厂方法

    课程视频 单例模式         建造者VS工厂方法                      课程笔记 课程笔记 课程代码 课程代码 新课程火热报名中 课程介绍 版权声明:本文博客原创文章,博客, ...

  6. CSRF与xss的区别

    CSRF:无法获取受害者的cookie,无法看到cookie:               只是利用受害者是被服务器信任的(靠验证cookie),而给服务器发送请求: xss:利用cookie只是xs ...

  7. sharding-jdbc学习

    sharding-jdbc的全局id生成策略是通过雪花算法来实现的. sharding-jdbc也是一个数据的中间件,可实现读写分离和分库分表,比mycat要简单些. nginx与ribbon实现负载 ...

  8. LeetCode第十题-正则表达式匹配

    Regular Expression Matching 问题简介:给定字符串,给定匹配模式,判断字符串是否满足匹配模式 问题详解:一共有两种特殊模式: ‘.’ 匹配任何单个字符 ‘*’ 匹配前面元素的 ...

  9. php配置文件php.ini的详细解析

    ;;;;;;;;;;;;;;;;;;;; ; Language Options ; ;;;;;;;;;;;;;;;;;;;; ; Enable the PHP scripting language e ...

  10. Spring Boot + Jpa + Thymeleaf 增删改查示例

    快速上手 配置文件 pom 包配置 pom 包里面添加 Jpa 和 Thymeleaf 的相关包引用 <dependency> <groupId>org.springframe ...