CSS命名规范化

CSS命名规范化，有利于代码阅读和维护，在大型项目及团队协作开发中有着重要的意义。这里我推荐采用BEM命名规范+适当的语义理解简写。因为BEM命名常常会因为太长而被人诟病，所以适当加上一些简写，既可保证良好的阅读性同时保证良好的书写性。

BEM命名规范

block：模块，名字单词间用 - 连接
element：元素，表示模块的子元素，以 __ 与block连接
modifier：修饰，表示模块的变体，定义特殊模块，以 -- 与block连接

语义理解简写

这里我借鉴的是网易CSS框架NEC的简写规范 nec.netease.com/standard/cs…

但是没必要刻板的照抄，吸取自己团队能理解接受的简写即可。

Tips

当遇上block后面可能既要接element和modifier的情况时，可以考虑两种思路：

第一种思路：按照block__element--modifier的顺序进行命名

第二种思路：此时可以考虑将element看成block来进行命名，即写成block-element--modifier
element后面还是可以继续接block的

例如 .van-button__loading-text 类似的命名方式

实践举例

.van-button{&--loading,&--disabled {}&__loading-text {}
}.hd{&__text {}&__icon {}&__text--primary {}&__text--warning {}
}.list{&-item {}&-item__text {}&-item__value {}
}
复制代码

结语

最后，文无第一，规范化的东西并没有一个得到大家认可的最优解，欢迎大家讨论自己的想法，共同努力去优化开发规范。

转载于:https://juejin.im/post/5c95c5f4f265da612e6d63ee

『前端规范化』CSS命名规范化相关推荐

『前端风云』Vite Webpack 恩怨史
Vite Webpack 恩怨史这篇文章总结自掘金社区的一篇优质科普文章,参考链接附于文章尾部. 本文按照如下顺序阐述了Vite Webpack等前端构建工具的发展. Created with Ra ...
『前端大事记』之「几件大事」
[回复"1024",送你一个特别推送] 不知道大家都听没听说过这句哈:前端的江湖总是不缺话题,且从没有消停过!!! 你要说没听说过,那就对了,这句话是我刚刚说的.但是这句话想必大家 ...
『前端技术』相比后端是否只能打辅助?
问题来源于知乎提问,截图如下: 前后端如何定义前端生存现状前端的下半场前端的机遇 1. 前后端如何定义? 论坛上人们经常会为前后端的问题展开撕 x 大战,很多时候问题的根源是没有定义好前后端的概 ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
2021前端最新DIV+CSS规范命名大全集合
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明: - TOP 所有的命名最好都小写属性的 ...
戏说前端 JavaScript 之『防抖节流』基础知识
往事不堪回首犹记在很久之前的某次面试中,和那技术大哥谈的正欢呢,冷不防他来了句:谈一谈防抖和节流吧. 抹了把凉汗,我用颤抖的.不自信的语气回答道:呃,防抖就是应该是防止抖动的意思,节流大概是节省流量 ...
关于前端的CSS命名
css命名 (1)页面结构容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目: ...
前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
成都链安重磅出品 | 基于VS Code插件的智能合约自动形式化验证工具Beosin—VaaS『离线免费版』...
11月4日,成都链安重磅推出『离线免费版』智能合约自动形式化验证工具Beosin-VaaS,该版本基于流行的开发工具VS Code插件,供广大开发者免费使用.获得方式如下,欢迎体验使用: https: ...

『前端规范化』CSS命名规范化

CSS命名规范化

BEM命名规范

语义理解简写

Tips

实践举例

结语

『前端规范化』CSS命名规范化相关推荐

最新文章

热门文章