浅谈我所见的CSS命名风格

在两年工作中，总结一下我所见的css命名风格。

1.单一class命名

.header {width: 500px;
}
.item {text-indent: 20%;
}

优点：简单，渲染效率高。

缺点：零散，没有模块化。

2. 后代选择器class命名

.header .item a {font-size:14px;
}
.header .item a span {color:#000;
}

优点：模块化，只对当前模块有效。

缺点：渲染效率低，增加冗余字符。

3.前缀叠加class命名

.header {width: 100%;height: 80px;
}.header-item {font-size: 14px;
}.header-item-a {color: #0066ff;
}

优点：可读性好，渲染效率高。

缺点：增加冗余字符。

4.OOCSS（面向对象）命名

.tr {   text-align: right;}
.pb8 {  padding-bottom: 8px;}

优点：语义化，可读性好，渲染性能高。

缺点：不利于频繁重构代码。比如修改上面的padding-bottom的距离，假如改成7px话，是不是类名pb8也要改成pb7。

5.BEM（块、元素、修饰符）命名

.header {width: 300px;height: 400px;
}.header__item { font-size: 16px;
} .header--blue { background: #0066ff;
}

优点：语义化，可读性好，渲染性能高。

缺点：暂时没有发现。

6.BEM（块、元素、修饰符）驼峰式class命名

.header {width: 100%;height: 80px;
}
.header-item {font-size：16pc;
}
.header-isShow {display: block;
}

优点：类似于BEM风格，无需区分下划线还是是中横线，可读性好，渲染性能高。

缺点：暂时没有发现。

PS:具体问题具体分析，合理的命名css有利于提高开发效率，便于版本迭代。

转载于:https://www.cnblogs.com/Sroot/p/7534980.html

浅谈我所见的CSS命名风格相关推荐

浅谈搜索引擎SEO（HTML/CSS）
SEO:搜索引擎优化(免费): SEM:搜索引擎营销(付费). 它们两者的区别是: 1.SEM高投入,SEO低投入: 2.SEM短.效益块,SEO长期投入.增长慢: 3.新广告法颁布之后SEM广告位减 ...
浅谈Linux内核编程规范与代码风格
1 缩进 Tab的宽度是八个字符,因此缩进的宽度也是八个字符.有些异教徒想让缩进变成四个字符,甚至是两个字符的宽度,这些人和那些把 PI 定义为 3 的人是一个路子的. 注意:缩进的全部意义在于清晰地 ...
html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
java变量命名规则_浅谈JAVA开发规范与开发细节（上）
开发团队在开发过程中,由于每个人的开发习惯,以及对于技术的理解深浅程度不一,往往一个项目在开发过程中,代码的质量,代码的风格都不尽相似,所以有一份适合团队的代码规范是非常有必要的,而一个团队的代码规范 ...
前端类名优秀命名例子_这是一篇需要花费你15分钟阅读的干货！浅谈前端工程化...
01前端工程化的背景随着业务的扩展.业务需求更加复杂.项目团队的壮大以及项目的增多等.制定一套适用于团队的前端工程化方案很有必要. 02前端工程化是什么前端工程化是一个很广泛的话题.涉及的技术与解 ...
Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍选择器权重字体属性文本属性元素分类 display属性: 块状元素行内元素行内块元素盒模型内边 ...
浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从什么是CSS ...
黑客内参--浅谈DIV+CSS的优势
黑客内参--浅谈DIV+CSS的优势 DIV+CSS是网站标准(或称"WEB标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为X ...
浅谈嵌套命名实体识别（Nested NER）
©PaperWeekly 原创 · 作者|张成蹊单位|北京大学硕士生研究方向|自然语言处理序命名实体识别(Named Entity Recognition, 下称 NER)任务,主要目的是从一 ...

浅谈我所见的CSS命名风格

浅谈我所见的CSS命名风格相关推荐

最新文章

热门文章