Question

我正在尝试使用BEM（CSS），我想知道如何创建一个用于样式化所有文本字段背景颜色和边框的类（我还没有使用CSS预处理器）。

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

可以在这两个元素上添加.input类：

<!-- 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

可以在这两个元素上添加.input类

是的，你可以：

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

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

另请参阅：the official documentation。

Answer 2

我不确定您的BEM实施是否正确。我相信这更多＆＃34;正确＆＃34;对于BEM命名约定，给出您当前的HTML。

/* 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 3

我猜这个“搜索框”类可能是一个表格，而不是这里的div。我将“searchbox”和“contact-form”视为两个相同的块。请原谅我，如果我也误解了这一点 - 我对整体结构做了几个假设。

这会是一个更好的解决方案吗？

    =lookup(CSTR(ReportItems!Textbox13.Value) & CSTR(Fields!StdId.Value), CSTR(Fields!COURSEID.Value) & CSTR(Fields!.StdId.Value), Fields!DateCompleted.Value, "ClassInfo")

然后，如果一个输入字段会发生变化，您可以添加修饰符。

搜索字段输入可以仅用于例如：

<!-- 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>

如何创建一般输入字段类

3 个答案: