从有赞UI组件库看CSS BEM命名规范的好处

1.什么是BEM命名规范？

文字定义不说，看dem0:

解释：

block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代，用于形成一个完整的.block的整体。
.block--modifier代表.block的不同状态或不同版本。

用bem命名的好处是：

1.规定。适合前端团队的CSS写法规范化。

2.既然是规范，就特别适合阅读，让CSS也变得易阅读。

3.规范的写法，自然就特别适合用计算机编程实现。

看有赞组件库源码为例：

css代码：

js代码：

此处的bem就是下面的createBEM。

这里的gen方法如下：

可以看出，用bem名称CSS就很容易跟js结合起来写。

注意点：

1.如果有明显的父子关系，状态关系，可以用bem名称css 的class名字。如果是通用的class名字，比如left, right等可以抽取出来放在commom.css里面的，就不用bem命名了。也便于维护管理，没必要很死板，都用bem规范命名。

从有赞UI组件库看CSS BEM命名规范的好处相关推荐

【前端开发】CSS BEM命名规范
目录 1.BEM 2.实战 Block Element Modifier 3.总结 1.BEM BEM其实是块(block).元素(element).修饰符(modifier)的缩写,利用不同的区块, ...
LCUI.css 0.1.2 发布，基于 LCUI 开发的 UI 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> LCUI.css 是一个适用于 LCUI 应用程序的 UI 组件库,使用 C 语言编写,提供了一些通用的组件和 c ...
16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目
大家好,我是你们的猫哥,一个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 关于猫哥,大家可以看看我的年终总结前端工程师的 2020 年终总结 - 3 年之痒. 前言猫哥是一个常年混迹在 GitHub 上 ...
17款优秀的Vue UI组件库汇总
17款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
目录一.项目技术二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件三.分析页面实现功能 1.路由页面准 ...
Vue UI组件库总结推荐
基于Vue的Quasar Framework 介绍这个框架UI组件很全面,准备下次使用这个框架了基于Vue的Quasar Framework 中文网 http://www.quasarchs.co ...
优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...
2022-04-05 学习记录--React-React UI组件库-ant-design（蚂蚁金服）—— 按需引入样式 + 自定义主题
一.流行的开源React UI组件库流行的开源React UI组件库 material-ui(国外) 1.官网:http://www.material-ui.com/#/ 2.github:http ...

从有赞UI组件库看CSS BEM命名规范的好处

从有赞UI组件库看CSS BEM命名规范的好处相关推荐

最新文章

热门文章