一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块组成:logo,导航nav和页面主题mian三个模块构成,如果再细分一下呢?logo是由图片和文字两个元素组成,导航由三个元素组成,页面主题中包含图片,文字和按钮三个元素, 如果把一个块看作是一个数组的话,那么元素就是数组中的每一项. 什么是修饰符呢?你可以看作是元素的属性,或者是他的形态.状态,比…

[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料,感兴趣的小伙伴们可以参考一下 [主体] 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论. BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作…

一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复用组件和前端代码 有三个特性. 易用性,使用BEM只需要使用BEM的命名规范就可以. 单元性,使用独立的块和CSS选择器,可以使你的代码可重用和单元化. 灵活性,使用BEM后,方法和工具可以按照自己喜欢的方式去组织和配置. BEM的简介 BEM是一个强大而简单的命名规范,使得代码更容易让人理解,容易…

推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论. - 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号. __ 双下划线:双下划线用来连接块和块的子元素 -- 双中划线:双中划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非…

Why use it 近几年web应用的发展可以用疯狂来形容,依靠浏览器的支持以及前端技术和框架的发展,很多应用已经把大量的逻辑从服务器端迁移到了浏览器端,使用前后端分离技术,浏览器端与用户进行交互来完成复杂的逻辑.由于这个发展趋势,Web应用的前端代码的复杂度大大提高,尤其是 JavaScript 和 CSS 代码的数量大幅增加,面对空前庞大的css和js代码量,形成科学的代码组织方法和命名规范迫在眉睫. 好的命名规则应该满足以下几个优点: 安全的命名,不会干扰其它css 我需要很快知道一个…

BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长) 如何使用BEM 一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block) 属于块的某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征的,可作为一个修饰器(Modifier) 在本规范中,以双下划线 __ 来作为块和元素的间隔…

BEM的意思就是块(block).元素(element).修饰符(modifier),是一种CSS Class 命名方法. 类似于: .block{} .block__element{} .block--modifier{} __双下划线代表B和E连接例如 menu__item_单下划线代表B和M或E和M的连接 例如 menu_active 或 menu__item_active-中划线同英语里做连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M需要多个单词来描述,…

BEM思想 1. 什么是BEM: BEM:(Block块,Element元素,Modifier修饰符)一种命名规范, 其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护. 基本命名模式 block{}, block__element{}, block--modifier{}, 2. BEM各元素: * Block :Block是逻辑和功能独立的单元,类似于组件.每个block包含自身的行为…

简介 简易 css 命名方式,减小命名冲突,使得 css 更有组织感和识别感.但如今写 react 项目大多可以忽略对 css 的命名约束了. 官网介绍:http://getbem.com/introduction/ 释义 Block:具有独立意义的实体,就如 header, container, menu, checkbox, input Element:块的一部分,没有独立的含义,并且在语义上与该块相关.如 menu item, list item, checkbox caption, he…

整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 CSS 类的名称可以看出它们之间的联系 不知你是否见过这样的类名: .nav--secondary { ... } .nav__header { ... } 这就是 BEM 命名规范. 这个火柴人代表了一个组件,比如说一个设计区块. BEM 这里的 B 意为『区块』('Block'). 在实际中,这里…