组件库使用BEM

yangrd 发布于2019-08-29 15:18 / 2287人阅读

摘要：的优势最近在开发一个组件库，选择了作为的组织形式，主要考虑了以下三个方面的优势逻辑分层，容易理解。基于的组织形式，基本与组件的组织形式吻合。反过来，通过标记的命名，可以直观地理解组件的功能和依赖关系。

bem的优势

最近在开发一个组件库，选择了BEM作为css的组织形式，主要考虑了以下三个方面的优势：

逻辑分层，容易理解。BEM基于block、element、modify的组织形式，基本与组件的组织形式吻合。只要遵循了BEM的命名方式，对于开发和修改组件，哪些元素和状态已经存在，都可以直观的看出来。反过来，通过html标记的BEM命名，可以直观地理解组件的功能和依赖关系。

强约束，便于团队协作。只要定义好了大的框架和命名，那么团队其他成员基于BEM的规范进行开发，理解成本降低，而且基本不存在样式冲突的问题。

预编译器支持

目前常用的css预编译器，如sass、less、stylus，基本对BEM的支持都很好，举个例子(语法差异暂时忽略)：

.block {
    &__element {
    }
    &--modifier {
    }
}

编译后：

.block {
}
.block__element {
}
.block--modifier {
}

GPU云服务器云服务器组件库 HeyUI组件库 vuejs组件使用 BEM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113225.html

CSS规范--BEM入门

摘要：一开始，公司推出的，包括了规范以及其配套构建工具。代表的不同状态或不同版本。再来看一个之前用常规方式命名的的例子这些类名真是太不精确了，并不能告诉我们足够的信息。这段时间在整理前端部分的代码规范，前面提到的CSS规范里面会涉及到选择器的命名，就参考BEM的命名规范，内容整理如下，供大家参考，请斧正！如大家有兴趣，可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名...

li21 2019-08-29 12:49 评论0 收藏0
从零开始搭建Vue组件库——VV-UI

摘要：各个大厂也相继宣布开源。但是也会存在一些问题，比如每个公司可能需要的业务组件不尽相同，或者我们想自己开发一套属于自己的组件库，来增强对组件的可控性。前言：前端组件化是当今热议的话题之一，也是我们在开发单页应用经常会碰到的一个问题，现在我们有了功能非常完善的Element-UI。各个大厂也相继宣布开源XXX-UI。但是也会存在一些问题，比如每个公司可能需要的业务组件不尽相同，或者我们...

BothEyes1993 2019-08-21 17:35 评论0 收藏0
从零开始搭建Vue组件库——VV-UI

摘要：各个大厂也相继宣布开源。但是也会存在一些问题，比如每个公司可能需要的业务组件不尽相同，或者我们想自己开发一套属于自己的组件库，来增强对组件的可控性。前言：前端组件化是当今热议的话题之一，也是我们在开发单页应用经常会碰到的一个问题，现在我们有了功能非常完善的Element-UI。各个大厂也相继宣布开源XXX-UI。但是也会存在一些问题，比如每个公司可能需要的业务组件不尽相同，或者我们...

wthee 2019-08-01 17:59 评论0 收藏0
一篇关于BEM命名规范

摘要：是一个很有用的方法可以创建复用组件和前端代码有三个特性易用性，使用只需要使用的命名规范就可以。的简介是一个强大而简单的命名规范，使得代码更容易让人理解，容易和他人协作，容易扩展，更加强壮和明确，最重要的是严谨性。一直以来自己对命名都是比较混乱的，并没有一个比较好的格式来命名，最近自己碰巧学习到了BEM命名规范，我想谈谈自己的理解以供自己来学习，同时也可以和各位大佬一起学习。 BEM...

ThreeWords 2019-08-29 17:17 评论0 收藏0