如何写出优雅耐看的css代码？css命名小技巧分享！-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

如何写出优雅耐看的css代码？css命名小技巧分享！

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

CSS命名——BEM

BEM是什么

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

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

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

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

登录后复制

使用BEM示例对比

Block

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

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

登录后复制元素(Element)

/* 常规写法 */   <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{}

登录后复制修饰符(modifier)

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

/* 常规写法 */   <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命名几大原则

短命名比长命名会更好

因为短命名缩短书写时间，也减小了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、面向属性

优点:在于CSS的重用率高，性能最佳，即插即用，方便快捷，开发也极为迅速，因为它省去了大量在 HTML 和CSS文件之间切换的时间。缺点：在于由于属性单一，其适用场景有限，另外因为使用方便，易被过度使用，从而带来更高的维护成本。

2、面向语义

优点是应用场景广泛，可以实现非常精致的布局效果，扩展方便；缺点：在于代码啰唆，开发效率一般，因为所有HTML都需要命名，哪怕是一个10像素的间距。这就导致很多开发者要么选择直接使用标签选择器，要么就选择一个简单的类名，然后通过父子关系限定样式，结果带来了更糟糕的维护问题。命名汇总推荐

状态

/* 常规写法和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建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~

相关推荐