如何制作通用输入字段 class

Question

我正在试验 BEM (CSS)，我想知道如何制作一个 class 来设置所有文本字段背景颜色和边框的样式（我没有使用 CSS预处理器）。

例如，我在搜索字段和联系表单中（以及其他 5 个位置）都有一个文本字段。然后我不想在这两种情况下设置相同的背景颜色和边框样式，我想要所有字段的 .input class。

可以像这样在两个元素上添加 .input class：

<!-- Searchbox -->
<div class="searchbox">
   <input type="text" class="searchbox__field input">
   <button class="searchbox__button>Search!</button>
</div>

<!-- Contact form-->
<form class="contact-form">
   <div class="contact-form__control">
      <label class="contact-form__label">Name:</label>
      <input class="contact-form__field input">
   </div>
</form>

<!-- .input styling for all fields -->
<style>

   .input {
      border: 1px solid green;
      background-color: #dbdbdb;
      border-radius: 5px;
   }

</style>

Answer 1

我不确定您的 BEM 实现是否正确。考虑到您当前的 HTML.

，我相信这更符合 BEM 命名约定 "correct"

/* searchbox block component */
.searchbox { /* css */ }

/* searchbox elements that depend upon the searchbox block */ 
.searchbox__field { /* css */ }
.searchbox__label { /* css */ }

/* Modifiers that change the style of the searchbox block */
.searchbox--green { /* css */ }
.searchbox--red { /* css */ }

/* contact-form-control block component */
.contact-form-control { /* css */ }

/* contact-form-control elements that depend upon the block */ 
.contact-form-control__field { /* css */ }
.contact-form-control__label { /* css */ }

/* Modifiers that change the style of the contact-form-control block */
.contact-form-control--green { /* css */ }
.contact-form-control--red { /* css */ }

我相信 BEM 命名约定的目的是将项目分解为半逻辑的、可读的层次结构。

Answer 2

Can add the .input class on both elements like this

是的，你可以：

<input type="text" class="searchbox__field input">

这里有一个mix：同一个DOM节点既是一个元素（.searchbox__field）又是一个块（.input） .

另请参阅：the official documentation。

Answer 3

我猜 "searchbox" class 可能是一种形式，而不是这里的 div。我会将 "searchbox" 和 "contact-form" 视为两个相同的块。如果我也有任何误解，请原谅我 - 我正在对整体结构做出一些假设。

这是更好的解决方案吗？

<!-- Searchbox -->
<form class="form">
   <input type="text" class="form__input">
   <button class="form__button">Search!</button>
</form>

<!-- Contact form-->
<form class="form">
   <div class="form__control">
      <label class="form__label">Name:</label>
      <input class="form__input">
   </div>
</form>

<!-- .input styling for all fields -->
<style>
   .form__input {
      border: 1px solid green;
      background-color: #dbdbdb;
      border-radius: 5px;
   }
</style>

然后，如果一个输入字段要改变，您可以添加一个修饰符。

可以使用搜索字段输入只是为了举例：

<form class="form">
   <input type="text" class="form__input form--open">
   <button class="form__button">Search!</button>
</form>

如何制作通用输入字段 class

How to make a general input field class

html

css

bem