草庐IT

BEM 命令规范

lio_zero 2023-09-28 原文

BEM 是一种前端项目开发的方法论，由 Yandex 公司提出。

BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。

这里先推荐一篇关于使用 BEM 的组件命令规范的示例文章：bem naming cheat sheet by 9elements。

bem naming cheat sheet by 9elements

其中介绍了包括：面包屑、按钮、卡片、列表、导航、布局、表单控件等一些组件的结构、命令示例。

什么是 CSS BEM？

BEM（Block Element Modifier，块元素修饰符）是 CSS 类的命名约定，旨在通过定义命名空间来解决范围问题来使 CSS 更具可维护性。

它原则上建议为独立的 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。

  • block（块）是一个独立的组件，可在项目中重复使用，并充当子组件（元素）的 "命名空间"。

  • 当 block（块）或 element（元素）处于特定状态或结构或样式不同时，将 modifier（修饰符）用作标志。

BEM 命名约定

  • block 代表了更高级别的抽象或组件。
  • block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。
  • block--modifier 代表 .block 的不同状态或不同版本。
.block {}
.block__element {}
.block--modifier {}

示例

  • BEM 实体名称全部是小写字母或数字。名称中的不同单词用单个连字符（-）分隔。
  • BEM 元素名称和块名称之间通过两个下划线（__）分隔。
  • 布尔修饰符和其所修饰的实体名称之间通过两个连字符（--）来分隔。不使用名值对修饰符。
<ul class="menu">
  <li class="menu__item menu__item--selected">Item 1</li>
  <li class="menu__item">Item 2</li>
  <li class="menu__item">Item 3</li>
</ul>

CSS 如下：

.menu {
  list-style: none;
}
.menu__item {
  font-weight: bold;
}
.menu__item--selected {
  color: plum;
}

分析

  • .menu 封装一个独立的实体，它本身是有意义的。虽然块可以嵌套并相互交互，但在语义上它们是相等的；没有优先级或等级制度。

  • .menu__item 块的一部分，没有独立的意义。任何元素在语义上都与其块相关联。

  • .menu__item--selected 块或元素上的修饰符。使用它们来改变外观、行为或状态。

BEM 命名规范带来的好处

BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。

换句话说，其所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题，简化了层叠规则。如果你还不是很了解特异性的话，可以查阅之前写的一篇 CSS 继承、级联和特异性。

细分后，可以从模块化、可重用性、结构三部分进行理解：

  • 模块化：块样式从不依赖于页面上的其他元素，因此您将永远不会遇到级联带来的问题。

  • 可重用性：以不同的方式构成独立的块，并以智能方式对其进行重用，从而减少了必须维护的 CSS 代码量。

  • 结构：BEM 方法为您的 CSS 代码提供了坚实的结构，使结构保持简单易懂。

其他的一些命名规范

除了 BEM 以外，还有其他一些常用命名规范如：OOCSS、SMACSS 等。

OOCSS

OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践

OOCSS 有两个重要的原则

  • 第一个原则是把结构和外观分开。

  • 第二个原则是把容器和内容分开。

SMACSS

SMACSS 表示的是可扩展和模块化 CSS（Scalable and Modular Architecture for CSS）。

SMACSS 把 CSS 样式规则分成若干个不同的类别：

  • 基础：该类别中包含的是默认的 CSS 样式。作为其他样式的基础。

  • 布局：该类别中包含与页面布局相关的 CSS 样式，用来进行模块的排列。

  • 模块：该类别中包含的是可复用的模块的 CSS 样式。

  • 状态：该类别中的 CSS 样式用来描述布局和模块在不同状态下的外观。比如在不同的屏幕尺寸下，布局会发生变化。标签式模块的每个标签页可以有显示或隐藏的状态。

  • 主题：该类别和状态类似，只不过是用来改变布局和模块的视觉效果。

更多资源

BEM命令stronglicode

有关BEM 命令规范的更多相关文章

  1. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  2. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  3. ruby - 从 Ruby : capturing the output while displaying the output? 运行 shell 命令 - 2

    我有一个问题。我想从另一个ruby​​脚本运行一个ruby​​脚本并捕获它的输出信息，同时让它也输出到屏幕。亚军#!/usr/bin/envrubyprint"Enteryourpassword:"password=gets.chompputs"Hereisyourpassword:#{password}"我运行的脚本文件:开始.rboutput=`runner`putsoutput.match(/Hereisyour(password:.*)/).captures[0].to_s正如您在此处看到的那样，存在问题。在start.rb的第一行，屏幕是空的。我在运行程序中看不到“输入您的密

  4. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  5. ruby - 在 Ruby 的 if 语句中检查 bash 命令 - 2

    如何在Ruby的if语句中检查bash命令的返回值(true/false)。我想要这样的东西，if("/usr/bin/fswscell>/dev/null2>&1")has_afs="true"elsehas_afs="false"end它会提示以下错误含义，它总是返回true。(irb):5:warning:stringliteralincondition正确的语法是什么？更新:/usr/bin/fswscell寻找afs安装和运行状态。它会抛出这样的字符串，Thisworkstationbelongstocell如果afs没有运行，命令以状态1退出 最

  6. ruby - gem 规范失败 - 2

    我正在为毕业设计开发GEM，TravisCI构建不断失败。这是我在Travis上的链接:https://travis-ci.org/ricardobond/perpetuus/builds/8709218构建错误是:$bundleexecrakerakeaborted!Don'tknowhowtobuildtask'default'/home/travis/.rvm/gems/ruby-1.9.3-p448/bin/ruby_noexec_wrapper:14:in`eval'/home/travis/.rvm/gems/ruby-1.9.3-p448/bin/ruby_noexec_

  7. ruby - 可以正常中断的来自 Rake 的长时间运行的 shell 命令？ - 2

    在几个项目中，我希望有一个类似rakeserver的rake任务，它将通过任何需要的方式开始为该应用程序提供服务。这是一个示例:task:serverdo%x{bundleexecrackup-p1234}end这行得通，但是当我准备停止它时，按Ctrl+c并没有正常关闭；它中断了Rake任务本身，它说rakeaborted!并给出堆栈跟踪。在某些情况下，我必须执行Ctrl+c两次。我可能可以用Signal.trap写一些东西来更优雅地中断它。有没有更简单的方法？ 最佳答案 trap('SIGINT'){puts"Yourmessa

  8. ruby - Capistrano 中的执行、测试和捕获命令有什么区别？ - 2

    关于SSHkit-Github它说:Allbackendssupporttheexecute(*args),test(*args)&capture(*args)来自SSHkit-Rubydoc,我明白execute实际上是test的别名？test之间有什么区别？,execute,capture在Capistrano/SSHKit中我应该什么时候使用？ 最佳答案 执行只是执行命令。使用非0退出引发错误。测试方法的行为与execute完全相同，但是它返回bool值(true如果命令以0退出，而false否则)。它通常用于控制任务中的流程

  9. ruby - 如何在 Ruby 中执行 Windows CLI 命令？ - 2

    我在目录“C:\DocumentsandSettings\test.exe”中有一个文件，但是当我用单引号编写命令时`C:\DocumentsandSettings\test.exe(我无法在此框中显示)，用于在Ruby中执行命令，我无法这样做，我收到的错误是找不到文件或目录。我尝试用“//”和“\”替换“\”，但似乎没有任何效果。我也使用过系统、IO.popen和exec命令，但所有的努力都是徒劳的。exec命令还使程序退出，这是我不想发生的。提前致谢。 最佳答案 反引号环境就像双引号，所以反斜杠用于转义。此外，Ruby会将空格解

  10. ruby - 将命令行上的变量传递给 Cucumber 测试 - 2

    我正在尝试将cucumber项目的用户名和密码置于版本控制之外。有没有办法在命令行上手动将用户名和密码等变量传递给Cucumber脚本？我的备份计划是将它们放在一个YML文件中，然后将该文件添加到gitignore，这样它们就不会被置于版本控制中。 最佳答案 所以，我看到了您对铁皮人的评论，答案是肯定的。cucumberPASSWORD=my_passwordPASSWORD被设置为环境变量，您可以通过将其引用为ENV['PASSWORD']来使用它的值。例如，browser.text_field(:id=>'pwd').setEN

随机推荐