切图崽的自我修养-规范CSS元素命名
前言
为什么我刚才写的样式乱了?!
如何给变量,文件命名是程序员的老大难问题。命名为什么会这么难,因为它太重要了。可以这么说,准确的命名可以提高代码的可读性,让人容易理解,方便调试,也给以后修改和维护你的代码的人带来方便。
如何给元素命名
而在css中,如何给元素命名同样是一门艺术。我们先来看看css中对常用的组件的命名:
head
foot
nav
menu
list
嗯,目前为止很不错,这很简单,这很语义化。如果再复杂一点,比如我要一个下拉菜单,你可能会想到:
dropMenu[驼峰命名]
drop-menu/drop_menu[匈牙利命名]
没错,命名足够解释了它 特点是什么/有什么+本身是什么。
好,那我们接下来看看这段代码:
<ul class="timeList"><li>2016/06/01</li><li>2016/06/02</li><li>2016/06/03</li>
</ul> ...<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li>2016/07/03</li>
</ul>
这是一个表示时间的列表,用timeList命名非常合适。等会,现在需求好像变了,产品姐姐刚才凑过来说要把时间列表的最后一条数据高亮显示,那我们就得把timeList的最后一个li挂上一个class,用来做样式的调整,才能满足需求。OK现在变成:
<ul class="timeList"><li>2016/06/01</li><li>2016/06/02</li><li class="last">2016/06/03</li>
</ul> ...<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li class="last">2016/07/03</li>
</ul>
然后css中如是写:
.timeList .last{...}
很简单 父元素+嵌套子元素 的命名方式轻松搞定,但这样真的好吗?
NO! 一点都不好!
我们来看看这样命名存在哪些问题:
首先last这个命名本身非常让人疑惑,因为最后一个这个特性,不管你挂的是什么class,我们本来都可以从DOM上看出来的与其命名为last,不如命名为highlight,表明它的特点高亮
其次last这个命名容易引起代码冲突
因为.last
这个命名很容易出现。在网站的开发过程中,会存在并行开发的情况,css不止你在写,你的同事可能也在写。如果恰巧他写了一个全局的 .last
,那么你这个样式很可能会因为你同事写的样式的叠加而产生问题。
你想了一会,改成了:
<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li class="lastItem">2016/07/03</li>
</ul>
嗯,lastItem至少last好,但还是没有解决上述的两个问题,特性不明+代码冲突风险。反正如果是我,就算写成:
.timeList .lastItem{...}
这种形式,我还是会担心有人写了.lastItem
的全局样式导致我的代码样式会被覆盖。
所以,上述这种子元素嵌套 (我们叫做滥用子元素选择器) 的方式是 非常不可取的,即使你自己的代码写起来没有问题,一旦和别人的代码整合起来,很可能产生命名冲突。
所以,为了避免多人开发命名冲突的情况发生,css的样式命名最好和程序语言一样,遵循命名空间的原则。
命名空间
所谓命名空间,就是从属关系的一种表示方法。还是拿上述的例子来说,如果写成:
<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li class="timeListLastItem">2016/07/03</li>
</ul>
timeList下的LastItem,嗯,看出了从属关系,并且如此复杂的命名一般不会引起代码命名上的冲突,并且同时也简化了你的css,因为现在你的css可以这样写了:
.timeListLastItem{...}
css里不用嵌套在父元素选择器里了,因为这个子元素本身的命名就表示了,是在timeList这个父元素下的,也就是,从命名上就定义了自己的从属关系。
目前为止,这个命名已经可以打90分,离满分存在的差距在哪里?
如果一律采取驼峰命名,在从属关系的可读性上,稍微差了一点,来比较一下这两个命名的可读性:timeListLastItem
和 timeList-lastItem
明显采取驼峰+匈牙利 命名的方式可读性更强。
总结来说,用划线作为从属关系的分隔符,其实就是讲模块timeList视为了类,从属元素被看成了timeList的类属性。通过科学合理的命名上能直观的看出从属关系,降低代码冲突的风险。
所以如下两种命名方式,你选择哪一个呢?
<div class="box"><div class="head"></div><div class="content"></div><div class="foot"></div></div>
<div class="box"><div class="box-head"></div><div class="box-content"></div><div class="box-foot"></div></div>
结语
给元素命名从来不是一件简单的事情,但好的命名规范绝对可以减少使团队开发的潜在风险。虽然这种命名规范有时候会伴随着冗长的问题,但它所带来的好处绝对能掩盖这点瑕疵。至于担心命名长度的增加会影响css文件的大小从而会影响加载速度,我只能说同学,你的图片压缩过了吗?做了Sprite处理吗?那才是优化大头。
文章参考自:编写高质量代码-Web前端开发修炼之道
切图崽的自我修养-规范CSS元素命名相关推荐
- 切图崽的自我修养-[ES6] 编程风格规范
前言 没有规矩 不成方圆 用let替换var来定义变量. 如果是常量,使用const 静态字符串统一用单引号'' , 动态拼接成的字符串统一用反引号`` let staticString = 'Thi ...
- 切图崽的自我修养-[TOOL] 用Omnigraffle绘制UML
前言 不会画图的程序员不是好产品经理 喜欢装逼有品位的程序员都有一颗产品经理的心,但印象中产品经理经常要画一些奇奇怪怪七七八八的图,在请教了一些立志做产品经理的程序员之后,发现他们都有一套自己喜欢用的 ...
- css hat,论切图仔的自我修养
编者按:作者糯米是个工具控,让我们来看看他都私藏了哪些好用的工具吧. 不过,据说都挺贵. Adobe Photoshop CC 2015 Adobe Photoshop 是设计师的必备,所以也是前端切 ...
- android切图尺寸_安卓设计尺寸规范
画布尺寸: 如果想一稿适配ios,那就新建720×1280 分辨率72,像素/英寸. 如果单独设计安卓MD新规范的,那就新建1080×1920 分辨率72,像素/英寸. 单位和度量 Units a ...
- html css ps切图教程,Photoshop(PS)CSS切图必用工具
Adobe PHOTOSHOP日常咱们又被称为PS. div CSS必备切图工具PS截图 多数人对于PHOTOSHOP的了解仅限于"一个很好的图象编辑软件",并不晓得它的诸多使用方 ...
- 如何规范 CSS 的命名和书写
我开始学前端的时候也是对于规范问题头疼,后来看了网易的NEC规范,惊呼牛逼 NEC : 更好的CSS样式解决方案 只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性 ...
- 完成css的切图 图片任意,css切图是什么意思
css切图是指DIV CSS开发的意思,表示从一张网页美工图切片到HTML代码开发与CSS样式开发,完成HTML静态网页:css切图包含两部分,分别是:1.网页美工图素材切出:2.DIV+CSS代码开 ...
- css布局与ldquo;切图rdquo;
CSS布局与"切图" 很多朋友问到关于在网页设计中,特别是使用CSS布局的时候,如何切图的问题,今天就来说说这个问题. 在过去,使用表格布局的时候,通常是整个页面在Photosho ...
- APP视觉稿该怎么切图和标注
本篇教程跟大家分享UI设计的一些知识,就是APP怎么切图和标注,还不懂的同学,赶紧了解一下. 首先:哪些东西要切出来? 简单来说就是代码不好实现的东西就直接切成一张图放到软件里面展示,例如图片,小图标 ...
最新文章
- 利用SimpleHttpServer+urllib传文件
- 发送邮件 的类 C# .net
- 天津大学计算机专硕_「20考研」计算机考研专业课变动汇总
- sed的模式匹配用法探讨
- Dubbo -- 系统学习 笔记 -- 示例 -- 只订阅
- 利用Think远程代码执行漏洞进行脱库上传免杀木马情报
- MRP系统对生产型企业的作用
- 打印服务器 支持 佳能 2900+打印机,佳能LBP2900,夏普等特殊打印机如何实现打印?(虚拟USB软件用途之二)...
- 多重阴影的设置、鼠标激活时、相邻选择器的简介、display
- 插头DP 概率DP / 期望DP
- android dialog设置背景图片,如何为Dialog设置背景图片?
- 【CubeMX配置STM32的ADC】
- CHIL-SQL-WHERE 子句
- 儿童教育企业官网高保真Axure原型模板
- 老毛子、华硕固件USB连接打印机,普通打印机变无线打印机
- (转)Sync Renderer与画面撕裂
- TH-600电力远动报文规约分析仪
- 带注释 实验7-3-5 输出大写英文字母 (15分)
- 如何学计算机打字,如何学会电脑快速打字【理论篇】
- java heap space 什么意思_Java heap space 解决方法(转)