css 块元素 行内元素_CSS块元素修改器

css 块元素 行内元素

我们都有所有事物的名字-我们的猫，狗甚至是我们将要杀死的那头牛。 但是，为什么我们不命名CSS代码呢？ 可悲的是，如此多的程序员和开发人员往往没有命名他们正在使用CSS代码库。

这并不意味着他们的程序将无法运行，而是想像您正在开发的网站或软件之一在完成大量工作后在某个地方存在错误。

如果您没有命名代码，那么将很难调试它。 在这种情况下进行调试非常困难。 这是因为您在调试时可能会犯一些错误，这些错误本身可能就是错误。

从长远来看，这是不可持续的，您可能会发现自己不得不再次运行整个代码以修复单个错误。 避免这种情况的方法是命名CSS代码库。 这样，您可以使用名称快速修改代码，而不必对代码库做很多改动。

这样可以防止可能使调试进一步复杂化的错误。 完成此操作的方法是使用块元素修饰符系统。 总而言之，对代码库的正确命名将为您以后对网站进行校正性调整做好准备。 我们将分别查看块元素修饰符（BEM）的组件。

块：

这是BEM的第一部分。 它可以独立存在。 通常是父母的名字。 简而言之，应该使用块来命名特定类的代码。 块可以相互交互，但不能相互取代。

他们是独立的，可以自立。 块名称可以用拉丁字母，数字和破折号表示。 要使其成为CSS类，您必须将块添加为名称间隔的短前缀。

例如，如果要用块命名代码，则可以使用“ .name”之类的名称。 比方说，例如，我想编写一个代码，并希望在CSS中将代码命名为cups，我将添加以下代码块：

.cups { }

( .block { })

例：

< button class = ”btn” > </ button >

< style > 

  .btn { }

 </ style >

元素：

大！ 我们给代码库起了个名字。 现在，我们要添加依赖于块的其他变量。 我们可以通过添加一个元素来做到这一点。

元素是块的子元素。 也就是说，该块在层次结构中高于该元素，并且该元素下的任何代码库均由该块控制。 让我们使用之前在CSS中添加的名为Cups的块。 如果我们要添加一些相关元素，例如杯子和玻璃杯。

我们可以通过让他们成为该块的子代来完成此操作，在本例中将其命名为Cups。 这就是我们在CSS中的书写方式–在输入元素之前，我们必须在块名称后加上两个下划线。 像这样：

.cups__mugs { }

.cups__tumblers { }

.block__element { }

例：

< figure class = "photo" >

  < img class = "photo__img" src = "me.jpg" >

  < figcaption class = "photo__caption" > Look at me! </ figcaption >

</ figure >

<style >

  .photo { } /* Specificity of 10 */

  .photo__img { } /* Specificity of 10 */

  .photo__caption { } /* Specificity of 10 */

</ style >

修饰符：

现在我们有了一个块作为名称，并且有两个依赖于该块的元素。 现在，我们可能需要更改块的外观或更改块的功能。

向块添加修改器将以某种方式更改块。 例如，如果我们想用“橙色”一词修饰杯子，可以添加橙色作为修饰符。

我们可以通过在块名称（在这种情况下为cup）前面添加两个连字符，然后添加橙色的修饰符来做到这一点。 CSS中的一个示例是：

.cups--orange { }

.block--modifiers { }

如果我们想添加另一个修饰符，例如说“ hidden”，我们可以输入代码

.cups--hidden { }

我们还可以决定使用修饰符来更改块中的元素。 例如，假设我们要给杯子赋予橙色属性，我们可以输入如下CSS代码：

.cups--orange .cups__mug { }

.block--modifiers .block__element { }

这将使杯子具有橙色的属性，而橙色也是该块的属性。 但是，如果我们希望元素具有自己的唯一属性，我们可以对其进行修改。 我们可以这样输入：

.cup__mug--big { }

.block__element--modifiers { }

更多示例：

< button class = "btn btn--secondary" > </ button >

<style >

  .btn {
    display : inline-block;
    color : blue;
 }

  .btn--secondary {
    color : green;
  }  

</ style > 

把它放在一起：

我们向您介绍了如何分别添加“块元素”修改器（BEM）的不同部分。 但是我们必须将所有内容整合在一起，这样对您才有意义。 因此，如果我们要立即用CSS编写BEM，它将看起来像这样：

.cups { }

.cups__mugs { }

.cups__tumblers { }

.cups--orange { }

.cups--hidden { }

.cups--orange .cups__mug { }

.cups__mug--big { }

结论：

为此，我们创建了一个名为Cups的块。 然后，我们添加了两个元素，它们是积木的子元素，分别是杯子和不倒翁。 然后，我们通过给杯子赋予橙色和隐藏属性来修改杯子。

接下来，我们修改了元素杯，使其可以像其父对象（杯子）一样表达橙色。 接下来，我们决定使元素杯具有其自己的独特属性，即“大”。

因此，总而言之，杯子的块控制着杯子的元素，并通过橙色和隐藏等修饰符对其进行了更改。 修饰符橙色会影响杯子和杯子，而隐藏元素只会影响杯子。 修改器只影响杯子。 那是一个块元素修改器如何工作的摘要。

翻译自: https://hackernoon.com/css-design-patternsblock-element-modifiers-qk9e36ut

css 块元素 行内元素