法则二：避免使用CSS选择器嵌套 在Peergrade.io我们使用 Sass。...并且，像这样的样式定义会应用到父元素内部的任何元素上——而不仅仅是你写在Sass里的那个层级。 对CSS选择器嵌套你所做的是用 微妙 和 脆弱的方式绑定CSS和HTML结构。...法则三：采用BEM命名来开发组件 在构建可隔离组件时，尽可能采用BEM命名方案给类命名。...Sass嵌套为我们创建BEM类名。...这就允许我们只要指定区块的修饰符——也就是正在编辑的内容—— 不用在区块内的所有子元素上重复修饰符（BEM中的E）。
color:blue; }}这一类是最常见的这个一类是我们日常所常见的&的高级用法作为内层选择器表示对父选择器的引用父选择器运算符 & 的作用，就是让当前的选择器和父级选择器，按照特定的规则进行连接。...它有多种用途，比如创建重复的类名：.button { &-ok { background-image: url("ok.png"); } &-cancel { background-image...，而不是仅仅重复最近的祖先选择器。...&还可以反转嵌套的顺序并且可以应用到多个类名上。....每个块在逻辑上和功能上都是相互独立的。 */.block {}/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
Peergrade.io处理CSS的方式 规则1: 使用前缀 (class类名) 在Peergrade.io中我们在所有样式名中使用前缀 .pg。 在你的CSS代码中如果不使用前缀可能会带来些麻烦。...同样，可以在父元素内的子元素中独立定义样式 - 这并不会受到你在前一阶段Sass这层已经定义好的样式的影响。...你可以通过subtle 和 brittle ways 在CSS中通过做选择器的嵌套来绑定你的HTML结构。...嵌套去创建BEM类名命名方式。...这允许我们仅可以修改在特定块（block）级别的修饰符， 并且在子块中不能重复修饰符（可以理解为父子嵌套时不重名；“E”在BEM中即元素elements）。
在 BEM 中，块被写为像 class 的名字一样，如下所示： ? BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性，而即使是最基本的元素也可能改变样式。...但是有两种方法可以编写简洁的 CSS，而不需要额外的 class！ 方法 1：使用 mixin 第一种方式，如果使用 Sass 或任何其他预处理器，则 使用mixin来封装 需要重用的 所有代码。...所以强烈推荐你尝试它:) 我们来看看 BEM 的第三个重要部分 —— 元素。 元素(Elements) 元素是块的子节点。为了表明某个东西是一个元素，你需要在块名后添加 __element。...如果你使用 BEM 元素，则可以使用优先级为 10 而不是 20 的的选择器来为 .form__row 提供样式。...他们是： 只把子子元素链接到有意义的块 创建新的块来保存元素 链接孙元素到块 虽然 BEM 建议你将 BEM 元素写作 .block__element ，但它不会规定你的 HTML 应如何。
通过使用合理的命名、可重用的组件以避免重复，并遵循最佳实践，可以实现这一目标。...类名还应具有连贯性，连接兄弟元素或显示父子元素之间的关系。 避免过度嵌套：在为类分配名称时，命名模式应保持浅层，并且选择器不应过度嵌套。这样可以提高可读性并使代码更易于维护。...避免使用泛泛而谈的名称：类名应该反映其所分配给的元素的意图和含义。它应该是一个描述性的名称，能够传达其功能，以便更容易搜索和理解。...这些通常是包裹子元素的父级/顶级元素。块使用小写字母和连字符表示。例如：.nav ， .header ， .carousel ， .card 等。...使用BEM，我们还可以在CSS中编写样式时表示一个元素是特定类的子元素。
父节点的类名是 stream ，内容是一个文章列表。它的子节点的类名是 streamItem ，内容是文章列表中的一篇具体的文章。这使我们很容易的了解到父节点和子节点之间的关系。...使用组件的思想将会使你的代码解耦。解耦的代码越多，你的类之间的依赖就越低。这会让你的代码更容易修改，并且使你的代码更长时间的工作下去而不用修改它。...BEM 代表块(block)、元素（element）和修饰符（modifier）。Yandex，在俄罗斯的相当于谷歌的搜索引擎，为了解决他们 CSS 代码库中的缩放问题而提出了它（它指BEM）。...元素（Elements）是块的子模块。修饰符（modifiers）代表不同的状态。...我们可以将 splash 作为一个一般的全屏类，它可以拥有任何子节点。所有子节点关注的属性，都在 splash content 中，与父节点的属性是完全解耦的。
选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。...类名建议使用破折号代替驼峰法。如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时，每个选择器独占一行。...”，是一种用于 HTML 和 CSS 类名的命名约定。...否则开发者在重构时通常会出现以下情况：轻则浪费时间在对照查找每个要改变的类，重则因为害怕破坏功能而不敢作出更改。...Bad .foo { border: none; } Good .foo { border: 0; } Sass 语法 使用 .scss 的语法，不使用 .sass 原本的语法。
另外现在都用IDE来编写代码了，有自动提示功能，也无须担心重复的输入过长的名字。因为命名长，我们是不是可以用子代选择器来代替BEM命名？这样至少在HTML编写时，让HTML标签看起来美观一点。 3....当我们遵循了这个规定，无论父元素名发生改变，或是模块构造发生的改变，还是元素之间层级关系互相变动，这些都不会影响元素的名字。...组件应该是“自洽的”，其本身就应该构成了一个“生态圈”，也就是说，他几乎不需要外部供给，自给自足就能够运转下去。 7. 关于子选择器 子代选择器的方式是，通过组件的根节点的名称来选取子代元素。...*/ } 这还仅仅只有两个组件而已，实际项目中，十几个或几十个组件，难道我们要每个组件都检查一下来“新组件名是否和以往组件的子元素命名冲突了”么？...如果我们用的是BEM，要覆盖样式很简单：找到要覆盖样式的元素，得知它的类名，在媒体查询中，用它的类名作为选择器，写下覆盖样式，样式就覆盖成功了，不需要担心前面样式的权重过大。
BEM代表“块（block），元素（element），修饰符（modifier）”，开发组件的过程中经常使用这三个实体，而在选择器中，这三个实体由以下符号来表示扩展关系： - 中划线：仅作为连字符使用...__ 双下划线：双下划线用来连接块和块的子元素。 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态。...，我们应该把关注点放在if和eles分支上，为什么会出现hitAllSpecialNestRule函数判断的分支，原因是在修饰符或者其他mixin中嵌套一个元素element，会出现修饰符在前，而元素在后的编译结果...，而接下来的三个函数，分别判断了是否存在修饰符、flag例如（.isCenter）、伪类的情况。...利用刚刚介绍的函数，以及块、元素、修饰符的实现代码，在sass中已经能非常高效率并且优雅的基于BEM规范的代码了。
BEM 是 BlockElementModifier 的缩写 ，其中B 表示块（block）、E 表示元素（element）、M 表示修饰符（modifier）。 这三个部分通常使用__ 与--连接。...即： .块__元素--修饰符{} Block：代表了一个独立的块级元素，可以理解为功能组件块。...事实上: 从右到左进行匹配，遍历页面上每个 li元素并确定其父元素 #ul-id li {} 所以不要让你的css超过三层。...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。...这有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。
总的来说，这些 CSS 命名规范试图解决 3 类问题： 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 CSS 类的名称可以看出它们之间的联系 不知你是否见过这样的类名...向 5 岁小孩解释 BEM 规范 BEM 规范试图将整个用户界面分解成一个个小的可重复使用的组件。...这些 head、feet 和 arms 都是组件中的元素。它们可视作子组件（child components），也就是父组件的组成部分。...如果使用 BEM 命名规范的话，这些元素的类名都可以通过在两条下划线后加上元素名称来产生。...如果使用 BEM 的话，这些修饰符的类名都可以通过在两条连字符后加上元素名来产生。
一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题： 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器 没有变量和合理的样式复用机制...BEM BEM 即Block Element Modifier；类名命名规则： Block__Element—Modifier Block 所属组件名称 Element 组件内元素名称 Modifier...元素或组件修饰符 其核心思想就是组件化。...首先一个页面可以按层级依次划分未多个组件，其次就是单独标记这些元素。BEM通过简单的块、元素、修饰符的约束规则确保类名的唯一，同时将类选择器的语义化提升了一个新的高度。...从开发体验上来看，这种做法让开发者不必在类名的命名上小心翼翼，直接使用随机编译生成唯一标识即可。
使用嵌套可以使你花费更少的时间来编写复杂的css选择器。 分块和导入 当涉及到可维护性和可读性上时，不可能将所有的代码都保存在一个大文件中。...CSS 代码组织方案：BEM 我曾经无数次给我的css类名提供我能想到的全部术语，你懂的，比如这些命名：.button .page-1 .page-2 。我经常不知道如何进行命名。...BEM 帮助我们解决该问题。BEM 是一种命名约定，表示“块 元素 修饰符”。 该方案可以使我们的代码更加结构化，更加模块化和更大的可复用性。现在我来解释下什么是块、元素和修饰符。...示例：.post--important，.post__btn--disabled 注意点 当你使用 BEM 时，你的命名只有 class 类名并且只使用 class 类名，没有 id ，没有标签，就只使用...这种情况请使用具体的 class 类名来替代。 是的，你的 HTML 文件将会因为 BEM 变得臃肿，但比起BEM带来的好处，这只是一个无足轻重的小缺点。 举个例子 这是给你的练习。
使用小写字母命名元素和修饰符。 修饰符必须紧跟着元素或块。 修饰符可以使用中划线（_）或破折号（-）进行命名。...避免样式冲突: BEM 的命名约定避免了样式冲突，每个块和元素都有独立的命名空间，不会受到外部样式的影响。 缺点: 命名冗长: BEM 的命名规范较为严格，可能导致类名过长，增加了代码量和阅读难度。...，使用 OOCSS的话，需要创建更多的 “原子类”，并且每个样式对应一个类，这样可以重复使用这些样式，避免写相同的样式。...无语义化的类名: 根据两个核心的分离原则，我们代码中不可能会出现 .btn 这样一个类名搞定样式的情况，我们只会拆分的很细，但同时我们又需要 .btn 这样的业务类名。...命名规则 SMACSS 推荐使用前缀来区分不同部件: 基础规则是直接作用于元素的，因此不需要前缀，一般使用元素、属性、伪类等选择器。不应该出: class、ID、!important 等。
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由 Yandex 团队提出的一种前端命名方法论。...- 符号，这个是为了让你自己的视图块可以用单个连字符来界定，__ 代表元素，-- 代表修饰符。...「优点：」 BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。...而且需要巧妙运用，因为特定要求（强调重复使用类选择器，避免使用ID选择器）如果运用不得当，反而可能会造成后续维护困难，所以使用此方案最好写上说明文档。...data-v 开头的自定义属性，而 CSS 为其添加样式时，通过类名+属性选择器的方法来避免命名冲突，从而实现模块化。
前言： 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论...__ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。...而且，一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS，利用其语言特性书写起来要简单很多。
如果你想了解更多信息，请查看相应的文档 戳这里。文档写得很好，且易于理解。 2. 组织 CSS 代码：BEM 方法论 我记不清曾经多少次在CSS类中使用包揽一切的名字了。...BEM 是一种命名约定，是英文 Block Element Modifier（块元素修饰符）的缩写。 这种方法可以使我们的代码结构化，并提高模块化和可重用性。现在让我们说一说什么是块、元素和修饰符。...命名：块名+ __ +元素名：.block__element 示例：.post__author、.post__date、.post__text 修饰符 现在窗户已经建好了，但是你可能想要一个绿色或一个小窗户...BEM 的时候，你可以用且只能用类来命名。...是的，你的 HTML 文件会超负荷，但是不用担心，与 BEM 带来的好处相比，这只是个小小的缺点。 示例 以下是一个练习。你可以去你最喜欢或最常用的网站，然后想想看哪些是块、元素和修饰符。
ID 选择器：优先级高于类选择器和元素选择器（如 #header）。 类选择器：优先级高于元素选择器（如 .menu）。 元素选择器：优先级最低（如 div）。 ...这种组织方式有助于提高代码的可维护性和扩展性。 避免过于特定的选择器 使用更通用的选择器，而不是过于具体的选择器。例如，避免使用大量的 ID 选择器，改用类选择器。这有助于提高样式的重用性和灵活性。...（块、元素、修饰符） BEM（块级元素修饰符，Block Element Modifier）是一种 CSS 命名规范。...在 BEM 中，一个“块”指的是独立的组件，比如按钮、菜单或徽标。一个“元素”则是属于某个块的子组件，例如列表项或标题。修饰符用于标识块或元素的不同状态或变体，从而改变它们的样式或行为。...你可以通过 BEM 的命名规则识别代码，因为它在 CSS 类名中使用了双下划线和双连字符。
BEM 将页面的类名分为块（Block）、元素（Element）、修饰符（Modifier）。...通过上面的示例可以看出，块与元素是通过两个下划线（__）连接的，而元素和修饰符之间是通过两个短横线（--）连接的。...工具类的作用是帮助程序减少一些重复代码，并提供一致的实现。 命名规则：u-[sm-|md-|lg-]类名>。...命名规则：[-]名>[-后代名][--修饰符]，这样的命名方式，在编写 HTML 和 CSS 的时候有几个好处： 有助于区分组件的根元素，后代元素，以及用来修饰的类； 降级类名重复的几率...，欢迎关注我的公众号「更了不起的前端」 复制代码 组件名--修饰符 修饰符是一种表示组件特定状态的类名，修饰符名称同样使用小驼峰规则来命名，并且和组件名直接需要用两个短横线（-
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
