bem

参考： 前端领域的BEM到底是什么？ https://www.jianshu.com/p/339fdb93e155 来源： https://www.cnblogs.com/shangyueyue/p/12291177.html

一、什么是BEM？ 　　BEM代表块（Block），元素（Element），修饰符（Modifier）。无论是什么网站页面，都可以拆解成这三部分。 二、带你认识网页 　　我们来看一下qq的官网，它可以由三个块组成：logo，导航nav和页面主题mian三个模块构成，如果再细分一下呢？logo是由图片和文字两个元素组成，导航由三个元素组成，页面主题中包含图片，文字和按钮三个元素， 如果把一个块看作是一个数组的话，那么元素就是数组中的每一项。 　　什么是修饰符呢？你可以看作是元素的属性，或者是他的形态、状态，比如导航中的三个元素有的长，有的短，页面主体文字有的大，有的小 三、BEM命名如何书写 　　BEM给我们的规定是块和元素之间用 — 连接，元素和修饰符之间用 _ 连接。例如：我们要设置表格某一行的背景颜色为红色，我们可以如下命名 四、实战篇 　　下面，我们来用bem的命名规范来写一下qq的官网 　　<header> <div class="logo"> <img class="logo-img" src="./logo.png" alt=""> <span class="logo-words_big">QQ·</span> <span class="logo-word_small">PC版</span> </div> <ul class="nav"> <li class="nav

当你看到一个class的时候，你想得到什么？ 这个class用在什么地方，作用是什么？ 是否在其他地方也有使用该class，修改会不会引起其他地方的样式问题？ class 是否在js中被使用？ 等等等等 此时，你最想一眼看到这个class就解决以上所有的问题，那么就引入了今天的主题 BEM—css命名规范 当你第一次看到css包含着-、__、–、- 这些乱七八糟的字符时，脸上笑嘻嘻，心里***。当我第一次看到这样的css的时候，我也没法冷静的看完，但是当你在工作中使用这些css命名规范的时候，不知不觉你会发现，这些符号带来的优势，要远比多写几个字符要多的多 BEM介绍 BEM，它代表 block ， element 和 modifier ，blcok可以理解成独立的块，在页面中该块的移动并不会影响到内部样式（和组件的概念类似，独立的一块），element就是块下面的元素，和块有着藕断丝连的关系，modifier是表示样式大小等 BEM是一种非常有用，功能强大且简单的命名约定，它使您的前端代码更易于阅读和理解，易于使用，易于扩展，更健壮和明确，并且更加严格。 BEM方法可确保参与网站开发的每个人都使用单一代码库，并且使用相同的语言。使用正确的命名将使您为网站设计的更改做好准备。 BEM可以用于js中，在JavaScript中并进行模板化，但是需要特殊的框架（暂不深入探索）

BEM 基于组件方式的web开发方法，基本思想是将用户界面分成独立的模块。 Block（块）（通常指模块，组件） Block 是一个逻辑上和功能上独立的页面组件，等同于网页组件中的部件（等同于网页中的组件）。Block 封装了行为（Javascript）、模板、样式（CSS）和其他实现技术。独立状态的 Block 可供复用，并且促进项目开发和维护。 内容 模块名称：描述了它的目的（“它是什么？” —— 菜单或者按钮），而不是它的状态（“它看起来是什么样子？” —— 红色或者大的）。 模块不应该影响它所在的环境，这意味着你不应该为模块设置会影响到外部的形状（影响大小的 padding 或边框）和定位 你也不应该在使用 BEM 的时候使用 CSS 标签选择器和 ID 选择器 名称可以包含拉丁字母、数字、短划线 使用 嵌套关系 模块与模块之间可以彼此嵌套 你可以有任意级别的嵌套层次 < ! -- 'head' 模块 -- > < header class = "header" > < ! -- 嵌套 'logo' 模块 -- > < div class = "logo" > < / div > < ! -- 嵌套 'search-form' 模块 -- > < form class = "search-form" > < / form > < ! -- 嵌套 'nav' 模块 -- >