摘要：目前为止，这个命名已经可以打分，离满分存在的差距在哪里如果一律采取驼峰命名，在从属关系的可读性上，稍微差了一点，来比较一下这两个命名的可读性和明显采取驼峰匈牙利命名的方式可读性更强。
前言
为什么我刚才写的样式乱了？！
如何给变量，文件命名是程序员的老大难问题。命名为什么会这么难，因为它太重要了。可以这么说，准确的命名可以提高代码的可读性，让人容易理解，方便调试，也给以后修改和维护你的代码的人带来方便。
如何给元素命名而在css中，如何给元素命名同样是一门艺术。我们先来看看css中对常用的组件的命名：
head
foot
nav
menu
list
嗯，目前为止很不错，这很简单，这很语义化。如果再复杂一点，比如我要一个下拉菜单，你可能会想到：
dropMenu［驼峰命名］
drop-menu/drop_menu[匈牙利命名]
没错，命名足够解释了它 特点是什么/有什么＋本身是什么。
好，那我们接下来看看这段代码：
这是一个表示时间的列表，用timeList命名非常合适。等会，现在需求好像变了，产品姐姐刚才凑过来说要把时间列表的最后一条数据高亮显示，那我们就得把timeList的最后一个li挂上一个class，用来做样式的调整，才能满足需求。OK现在变成：
然后css中如是写：
.timeList .last{...}
很简单 父元素＋嵌套子元素 的命名方式轻松搞定，但这样真的好吗？
NO! 一点都不好！
我们来看看这样命名存在哪些问题：
首先last这个命名本身非常让人疑惑，因为最后一个这个特性，不管你挂的是什么class，我们本来都可以从DOM上看出来的与其命名为last，不如命名为highlight，表明它的特点高亮
其次last这个命名容易引起代码冲突
因为.last这个命名很容易出现。在网站的开发过程中，会存在并行开发的情况，css不止你在写，你的同事可能也在写。如果恰巧他写了一个全局的 .last，那么你这个样式很可能会因为你同事写的样式的叠加而产生问题。
你想了一会，改成了：
嗯，lastItem至少last好，但还是没有解决上述的两个问题，特性不明＋代码冲突风险。反正如果是我，就算写成：
.timeList .lastItem{...}
这种形式，我还是会担心有人写了.lastItem的全局样式导致我的代码样式会被覆盖。
所以，上述这种子元素嵌套 (我们叫做滥用子元素选择器) 的方式是 非常不可取的，即使你自己的代码写起来没有问题，一旦和别人的代码整合起来，很可能产生命名冲突。
所以，为了避免多人开发命名冲突的情况发生，css的样式命名最好和程序语言一样，遵循命名空间的原则。
命名空间所谓命名空间，就是从属关系的一种表示方法。还是拿上述的例子来说，如果写成：
timeList下的LastItem，嗯，看出了从属关系，并且如此复杂的命名一般不会引起代码命名上的冲突，并且同时也简化了你的css，因为现在你的css可以这样写了：
.timeListLastItem{...}
css里不用嵌套在父元素选择器里了，因为这个子元素本身的命名就表示了，是在timeList这个父元素下的，也就是，从命名上就定义了自己的从属关系。
目前为止，这个命名已经可以打90分，离满分存在的差距在哪里?
如果一律采取驼峰命名，在从属关系的可读性上，稍微差了一点，来比较一下这两个命名的可读性：timeListLastItem 和 timeList-lastItem 明显采取驼峰＋匈牙利 命名的方式可读性更强。
总结来说，用划线作为从属关系的分隔符，其实就是讲模块timeList视为了类，从属元素被看成了timeList的类属性。通过科学合理的命名上能直观的看出从属关系，降低代码冲突的风险。
所以如下两种命名方式，你选择哪一个呢？
结语
给元素命名从来不是一件简单的事情，但好的命名规范绝对可以减少使团队开发的潜在风险。虽然这种命名规范有时候会伴随着冗长的问题，但它所带来的好处绝对能掩盖这点瑕疵。至于担心命名长度的增加会影响css文件的大小从而会影响加载速度，我只能说同学，你的图片压缩过了吗？做了Sprite处理吗？那才是优化大头。
文章参考自：编写高质量代码－Web前端开发修炼之道
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111321.html
摘要：前言不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前端工程师从方面来说，前端工程师和切图崽的区别，并不是指写单条技巧的高低，甚至很多工程师在一些的奇技淫巧都比不上切图崽那切图崽到底和工程师之间的差别是什么呢差别是年工作经验视野，是格局，是 前言 不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前！端！工！程！师！ 从css方面来说，前端工程师和切图崽的区别，并不是指写单条css技巧的...
摘要：但是这么多模块合并在一个文件里，全是匿名的话，系统如何区别哪个是哪个模块呢因此，我们需要对这些模块给不同的进行标识。 前言 高能预警，前方山路十八弯 在上一篇文章里简单的讨论了一下模块化Js, 先来回顾一下目前模块化的两大规范: CommonJs 同步加载模块规范 AMD/CMD 异步加载模块规范 其中CMD规范的产出是国内目前十分火爆的SeaJs, 这篇文章主要是解释几个使用S...
摘要：但是这么多模块合并在一个文件里，全是匿名的话，系统如何区别哪个是哪个模块呢因此，我们需要对这些模块给不同的进行标识。 前言 高能预警，前方山路十八弯 在上一篇文章里简单的讨论了一下模块化Js, 先来回顾一下目前模块化的两大规范: CommonJs 同步加载模块规范 AMD/CMD 异步加载模块规范 其中CMD规范的产出是国内目前十分火爆的SeaJs, 这篇文章主要是解释几个使用S...
摘要：但是这么多模块合并在一个文件里，全是匿名的话，系统如何区别哪个是哪个模块呢因此，我们需要对这些模块给不同的进行标识。 前言 高能预警，前方山路十八弯 在上一篇文章里简单的讨论了一下模块化Js, 先来回顾一下目前模块化的两大规范: CommonJs 同步加载模块规范 AMD/CMD 异步加载模块规范 其中CMD规范的产出是国内目前十分火爆的SeaJs, 这篇文章主要是解释几个使用S...
摘要：前言梳理一下中还不太熟悉的事件绑定统一用摒弃掉之前的解绑事件统一用语法糖，支持多个事件绑定同一个函数语法糖，支持多个事件绑定不同的函数语法糖，支持多个事件绑定不同的函数可以往里传参可以给未创建的上绑定事件只能采取事件委托的形式所以写成这样是 前言 梳理一下Jquery中还不太熟悉的API Jquery事件绑定统一用on(摒弃掉之前的click,bind),解绑事件统一用off 语法...
阅读 1396·2021-11-24 09:39
阅读 3686·2021-11-24 09:39
阅读 1859·2021-11-16 11:54
阅读 1463·2021-09-30 09:47
阅读 1712·2021-09-26 10:16
阅读 2341·2021-09-22 15:33
阅读 1452·2021-09-14 18:01
阅读 2435·2021-09-07 09:59
