第三章 CSS 选择器的命名

CSS 选择器 是否 区分大小写

CSS 选择器有  那些区分大小写  那些不区分大小写  还有 那些可以设置为不区分；

要搞清楚这个问题， 还要从 HTML 说起：

 在HTML 中：  标签 和 属性 是不区分大小写的， 而属性值是区分 大小写的，

于是 对应的： 在CSS 中  标签选择器不区分大小写  属性选择器中的属性也不区分大小写， 而类选择器 和ID 选择器  本质上是 属性值 需要区分大小写

不要使用 ID 选择器： 

没有 任何理由 推荐在实际项目中使用 ID 选择器：

虽然 ID 选择器的 性能也不错。 可以 和 类选择器 分庭抗衡，但是由于 它存在下面两个 巨大 缺陷，这个 本来就不太重要的 有点就 更加不值一提！

• 优先级太高； ID选择器的 优先级比较高，如果想 覆盖某些属性样式。 必然 还用使用 ID选择器 进行覆盖，再多的 类名都没用。这样会使得 整个项目的 选择器 优先级会变得 非常混乱。如果非要使用 ID选择器标识   建议使用 属性选择器 如 [id = 'csid']
• 和 javascriopt 耦合，实际 开发时，元素 ID 主要用在 javascript 中，以便 DOM 元素快速 获取它， 如果 ID 和样式 关联，它的维护性会 大折折扣。 一旦 ID 变化，必须同时修改 CSS  和 javascript.围护难度变高 容易出错

 不要嵌套选择器：

我见过太多 类似下面的 css 选择器了：

.nva a {}
.box > div {}
.avatar img {}

还有这样的

.box .pic .icon {}
.upbox .input .upbtn {}

在使用嵌套 更加方便的 Sass less 之类的 预编译工具出现后，5层 6层嵌套的选择器也大量出现， 其性质 比 javascript 中满屏 全局变量还要糟

这种不动脑子 偷懒的写法 除了让你在写html 代码时 省电力 ，其他全是缺点 包括

• 渲染性能糟糕
• 优先级混乱
• 样式布局脆弱

   1>  渲染性能糟糕：

     有两方面会对渲染性能造成影响， 一是标签选择器    二是过深的嵌套

    CSS 选择器 性能排序 如下：

• ID选择器   如 #foo;
• 类选择器   如 .foo;
• 标签选择器 如 div; image;
• 通配符选择器 如 *
• 属性选择器， 如 [herf];
• 部分伪类  如 checked

 其中，ID 选择器 性能最好， 类选择器处于 同一级别，差异很小。 比 标签选择器 具有 更加 明显的性能优势； 那么 看似乎 .box > div  也是一个不错的写法，  .box 性能很好， 选中后在匹配 标签为 div 的子元素； 然而 很遗憾 CSS 选择器是 从后向左 进行匹配 渲染的； .box>div  是先匹配 页面所有的 <div> 元素， 在进行  .box 类目元素； 如果页面内容 丰富. HTML 结构复杂  <div> 元素上千个  同时这样的 低效率 选择器 又很多， 则会 带来 明显可感知的 渲染性能 问题

过深的嵌套 会对 性能产生的影响就更好理解了， 应为每 加深一层嵌套，浏览器在进行 选择器 匹配的时候  就会多一层计算。 一个两个嵌套 对性能 的消耗 几乎无影响。 但是如果数千航 CSS 都才用了 这种 嵌套！  量变会 引起 质的变化。 此时 光CSS 选择器解析 就需到达 百毫秒的级别

然而 在大多数 场景下， 讨论 CSS 选择器的性能问题 是一个 伪命题， 首先  我们实际开发的  页面 都比较简单，选择器用的 在不合理，性能差异也不会太大； 其次 再复杂的页面  300毫秒 和 30毫秒 的性能差距 也不会成为 页面性能的 瓶颈。 你付出 千万分的 努力 带来的页面优化，  还不如一张 广告图 的尺寸 来的大

因此 渲染性能 糟糕 确实是一个缺点，但是只是相对 而言。 并不是很严重的 问题。 大家可以把 注意力 放在 下面两个缺点上； 他们才是最关键的

     

  2>  优先级混乱：

选择器优先级 有一个原则：那就是 尽可能保持较低的 优先级，这样方便 以较低的成本重置一样样式；

然而 一旦选择器嵌套，优先级就会变得复杂，当我们想要 重置 某些样式的时候，你会发现一个类名不管用。两个类名也不管用。打开控制台一样 你希望的重置样式 居然有 6个选择器 一次嵌套。

此时 如果想要重置 img 的样式，只有几种方式：

1>  使用同一优先级的 选择器，但这个选择器的位置 需要重置 的 css 代码后面

2> 使用 更深层的 层级选择器

3> 要么直接使用 ID选择器 要么直接 使用 ！important

 

 3>  样式布局的脆弱：

.layer_send_video .layer_upbox dd  .dd_succ  .pic_default img{}

这段 css 出现了两个 标签选择器  dd 和 img, 在实际开发维护过程中， 调整 HTML 标签是 非常常见的事情，如果使用的是 dd 和 img 选择器， HTML 标签是不能换的。 如果使用的标签换了。整个样式都无效， 你必须去 CSS 文件中找到会议的 标签进行同步修改 造成维护 成本高

另外 过多的选择器 将完全限定死  HTML结构， 导致后期 想 修改页面 维护成本高

正确的选择器用法：

正确的选择器用法是全部  使用无嵌套的 纯类名选择器

<nav class="nav">
    <a herf>链接1</a>
    <a herf>链接2</a>
    <a herf>链接3</a>
</nav>

.nva {}
.nav a {}

  鼓励 替换成下面的

<nav class="cs-nav">
    <a herf class="cs-nav-a">链接1</a>
    <a herf class="cs-nav-a">链接2</a>
    <a herf class="cs-nav-a">链接3</a>
</nav>

.cs-nav {}
.cs-nav-a {}

 

  不要再使用 下面的 HTML 和 CSS 代码了

<div class="cs-box">
    <figure class="pic"
        <img src="./example.png" alt="示例图片">
        <figcaption>
            <i> class="ico"</i>图片标题       
        </figcaption>
    </figure>
</div>

.box {}
.box .pic {}
.box .pic .ico {}

替换成：

<div class="cs-box">
    <figure class="cs-box-pic"
        <img src="./example.png" alt="示例图片">
        <figcaption>
            <i> class="cs-box-pic-ico"</i>图片标题       
        </figcaption>
    </figure>
</div>

.cs-box {}
.cs-box-pic {}
.cs-box-pic-ico {}

基本布局就使用 没有嵌套， 没有级联的类选择器 就可以了。这样的选择器 代码少，性能高， 拓展性强 ，维护成本低 没有任何不适用的理由；

然而 要给每个标签命名 很费精力， 所有下面我们将 讲一下 CSS的命名

 

 

不要歧视面向属性的命名

不少开发者  不认可下面的这种 基于CSS  属性本身的 命名方式。 尤其是 web 标准 刚刚 新启的那段时期

.dn { display : none; }
.db { display : block; }
.dib { display : inline-block; }
...

.m120 { margin-left:20px }
...
.vt { vertical-align:top }
.vm { vertical-align:middle }
.vm { vertical-align:vb }
...
.text-ell { text-overflow:ellipsis; white-space:nowrap; overflow:hidden }
.abs-clip { potion:absolute; clip:rect(0,0,0,0); }

 为什么会不认可呢？ 因为这类 命名在本质上 和 HTML 元素上写 style 属性 没有什么 区别

 然而 关键 看你怎么用， 在那里用：

 我习惯  将一个网站的页面归纳 为一下几个模块：

• 公共结构   

• 公共模块  

• UI组件   

• 精致布局和一些细节末节

   其中 公共结构 ,共用模块  UI组件 精致布局 都不合适 使用 面向属性的命名； 前 3种 属性 属于 页面的公共内容。 如果使用了 面向属性的命名 日后维护起来很不方便， 因为这些内容 散布在 项目的各个角落。 一旦需要修改  则需要找到 所有的 地方进行修改；

   所以 这种使用 面向属性的命名 就很适合 做 精致布局 和一些 细节末节 只针对某些 有特征的页面

 

本章补充和总结

1.  命名的书写

（1） 命名建议使用 小写， 使用英文单词 或  缩写， 对于专有 名称 可以使用 拼音

.cs-logo-youku {}
不建议使用 驼峰来命名 CSS样式;  驼峰是 专门 给 javaScript DOM 用， 以便和 CSS样式区分开来
.csLogoYouku {}  //不建议哦

（2） 对于组合 命名；  可以短横线 或 下划线链接， 可以组合使用短横线 和 下划线，  也可以连续短横线 或 下划线； 这两种方式都可以， 只要在项目 保持一致就可以

          但是对于 组合 个数 没有必要超过 5 个， 5个是极限

.cs-logo-youku { }
.cs_logo_youku { }
.cs-logo--youku { }
.cs-logo__youku { }

（3）设置统一前缀，强化品牌同时 避免样式冲突：

.cs-header { }
.cs-loge { }
.cs-logo-a { }

 

2.  选择器类型

根据选择器的使用类型， 我将网站 CSS 分为 3 个部分， 分别是：  CSS重置样式，  CSS基础样式 和  CSS交互变化样式 ；

无论那种样式。 都没有任何理由 使用 ID选择器， 实在要用 使用 属性选择器代替，她的优先级 和 类选择器一模一样

[id = "someID"] {}
CSS 样式的重置 可以使用标签选择器 或者 属性选择器 等：

bod, p { margin:0 }

[type="radio"],
[type="checkbox"] {
    position : absolution;
    clip ： rescr(0,0,0,0);
}

所有的 CSS 基础样式全部使用 类选择器，没有层级， 没有标签（不建议）

.cs-module .img { }       /*  不建议 */
.cs-module-ul > li { }    /*  不建议 */

不要偷懒 在HTML 的标签上 写上不会冲突的类名

.cs-module-img { }
.cs-module-li { }

 

3.  CSS 选择器分布

• 对号 表示需要使用 和 遵循
• 问好 表示可以使用也可以不使用
• 禁止 表示不建议使用

 

最后

以上就是真实服饰为你收集整理的第三章 CSS 选择器的命名的全部内容，希望文章能够帮你解决第三章 CSS 选择器的命名所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。