美文网首页
CSS命名规范-BEM思想

CSS命名规范-BEM思想

作者: 艾萨克菊花 | 来源:发表于2019-04-24 18:09 被阅读0次

本文章参考链接:https://blog.csdn.net/qq_27263045/article/details/79529371

1、首先CSS样式规范性,是大多数实际项目中所必须要求的。很大程度上避免后期代码的重构。

2、实际开发中,采用了各种方法来达到CSS样式规范化,但效果都不明显:

a:驼峰命名;

b:采用模块为前缀达到区分其他模,避免重复的效果【例:scoped属性】;

3、现在,我们来介绍一下BEM的CSS命名规范:

BEM的意思就是块(block)、元素(element)、修饰符(modifier)。

是由Yandex团队提出的一种前端命名方法落论。该命名方法使代码更具可读性和维护性,同时也让CSS类更具有意义。

.block {}                        //代表更高级别的抽象或组件;

.block__element {}         //代表.block的后代,用于形成一个完整的.block整体;

.block--modifier {}        //代表.block不同状态或不同版本;

之所以使用两个两字符和下划线而不是一个,是为了让你自己的块可以单个连字符来界定,例如:

.div-query {}                //块

.div-query__button {}    //元素

.div-query--valid {}        //修饰符

BEM最突出的作用是显示的告诉其他开发者某个标记是用来干什么的。通过浏览器HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者元素,还有一些是组件其他形态或者是修饰符:

.dog {}

.dog__tail {}

.dog--big {}

.dog__tail--long {}

.dog--big__eyes {}

顶级块“dog”,拥有一些其他元素。例如:"tail"。而“dog”也有一些修饰符,如:“big”,同时块“dog”下的元素也有修饰符,如“long”。

相关文章

  • 简单好用的CSS命名规范

    CSS命名规范 BEM命名法 BEM(Block, Element, Modifier)是由Yandex团队提出的...

  • CSS命名规范-BEM思想

    本文章参考链接:https://blog.csdn.net/qq_27263045/article/details...

  • web前端经验分享

    CSS技巧 解决css样式污染方案 命名约定 BEM命名规范 使用CSS Modules css实现新手引导效果 ...

  • CSS代码规范

    CSS规范 一.命名规范BEM(Block Element Modifier) 1.Block name 1) 实...

  • CSS BEM 命名简介

    BEM是一种CSS命名规范,旨在使用严格的命名约定,使得CSS类的命名更加透明,能直接了解上下文含义。BEM分别代...

  • CSS命名——BEM

    前言 详情见参考,下面的只是部分摘要 BEM是什么 BEM是一种CSS命名规范。BEM代表 “块(block),元...

  • BEM(CSS命名规范)

    在Web项目中规范css命名还是很有必要的,BEM传送门。 通过阅读Element-UI源码来分析学习BEM规范,...

  • CSS命名规范—BEM

    背景:最近上了一个前端项目,技术栈是angular + ionic。在听别的前端人员讨论的时候听到一个词叫BEM,...

  • css命名规范-BEM

    什么是BEM BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区...

  • CSS命名规范 BEM

    通过阅读Element-UI源码来分析学习BEM规范, 使用BEM规范语义化更加鲜明,阅读更容易理解,意思是 块,...

网友评论

      本文标题:CSS命名规范-BEM思想

      本文链接:https://www.haomeiwen.com/subject/viqngqtx.html