广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

如果使用 CSS 有一段时间，那么您就会知道继承、特异性和命名是一些最难处理的事情。由于所有 CSS 都是全局的，随着代码库的增长，防止样式相互冲突并导致意外副作用变得越来越困难！下面本篇文章给大家分享一些css命名小技巧，让我们的代码优雅又耐看，希望对大家有所帮助！

BEM是什么

BEM是一种CSS命名规范。【推荐学习：css视频教程】

BEM代表 “块（block），元素（element），修饰符（modifier）”。

在选择器中，由以下三种符号来表示扩展的关系：

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。__  双下划线：双下划线用来连接块和块的子元素_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

使用BEM示例对比

如下面的例子，li.item 是列表的一个子元素

/* 常规写法和BEM写法相同 */.list

/* 常规写法 */   <ul class="list">    <li class="item">Pricing</li>    <li class="item">Contact</li>  </ul>  /* BEM写法 */      <ul class="list">    <li class="list__item">Pricing</li>    <li class="list__item">Contact</li>  </ul>

/* 常规写法 */ .list{} .list .item{} /* BEM写法 */ .list{} .list__item{}

一个“修饰符”可以理解为一个块的特定状态！

/* 常规写法 */   <ul class="list">    <li class="item">Pricing</li>    <li class="item">Contact</li>  </ul>  /* BEM写法 */     <ul class="list">    <li class="list__item_active">      Pricing    </li>    <li class="list__item">Contact</li>  </ul>

/* 常规写法 */ .list{} .list .item{} .list .item.active{} /* BEM写法 */ .list{} .list__item{}.list__item_active{}

BEM 的好处

短命名比长命名会更好

因为短命名缩短书写时间，也减小了css文件大小！例如这个例子:

//  推荐.some-intro{...}// 不推荐.some-introduction{...}

组合命名比单命名会更好

// 不建议.header{...}//推荐.cs-header{...}

面向属性的命名和面向语义的命名

面向属性的命名指选择器的命名是跟着具体的CSS样式走的，与项目、页面、模块统统没有关系。例如，比较经典的清除浮动类名.clearfix:

.clearfix:after { content : ''; display: table; clear: both; }

面向语义的命名则是根据应用元素所处的上下文来命名的。例如:

.header { background-color: #333; color: #fff; }.logo {font-size: 0; color : transparent;}

上述两种命名方式各有优缺点：

1、面向属性

2、面向语义

状态

/* 常规写法和BEM写法相同 */.list0

布局

/* 常规写法和BEM写法相同 */.list1

通用部件

/* 常规写法和BEM写法相同 */.list2

组件

/* 常规写法和BEM写法相同 */.list3

语义化小部件

/* 常规写法和BEM写法相同 */.list4

功能部件

/* 常规写法和BEM写法相同 */.list5

命名网站推荐

codelf：https://unbug.github.io/codelf

1、张鑫旭的《css选择世界》

2、https://www.cnblogs.com/qianxiaox/p/13816077.html

（学习视频分享：web前端）

以上就是如何写出优雅耐看的css代码？css命名小技巧分享！的详细内容，更多请关注9543建站博客其它相关文章！