使用OOCSS实现响应搜索栏

Question

我正在实现一个搜索栏这里。我已经完成了基本UI。我最近开发了一种对可伸缩和健壮的HTML/CSS的兴趣。因此，我密切关注像边界元和支助厅这样的事情。

我在正确的道路上吗？此外，我如何使UI响应？

index.html

<div id="container">
  <form class="search-box">
    <span class="search-box-icons">
      <i class="fa fa-search icon-search"></i>
    </span>
    <input class="search-box-input" type="text" placeholder="Search"/>
    <div class="search-box-autocomplete" style="display: none;">
      Foo Bar
    </div>
  </form>  
</div>

app.css

* {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

body {
  background: #343d46;
}

#container {
  width: 500px;
  margin: auto;
  margin-top: 30px;
  background: gray;
  color: black;
}

.search-box {
  width: 100%;
  position: relative;
  background: inherit;
  color: inherit;
  height: auto;
}

.search-box:hover .icon-search {
  opacity: 1;
}

.search-box-input {
  background: inherit;
  color: inherit;
  height: 50px;
  font-size: 18px;
  width: 100%;
  padding: 10px;
  padding-left: 40px;
  display: inline-block;
  border: none;
}

.search-box-input:focus {
  outline: none;
}

.search-box-icons {
  position: absolute;
  display: inline-block;
  margin: auto;
  top: 16px;
  left: 10px;
  width: auto;
}

.icon-search {
  color: inherit;
  font-size: 16px;
  display: inline;
  cursor: pointer;
  opacity: 0.4;
}

.search-box-autocomplete {
  position: absolute;
  background: #fff;
  width: 100%;
  margin: 0;
  border-top: 1px solid gray;
}

Answer 1

标记

你用得比你需要的多。您有一个不必要的容器元素，以及两个用于显示纯粹装饰图标的空元素。这应该是实现相同效果所需的所有标记：

<form class="search-box">
    <input class="search-box-input" type="search" placeholder="Search"/>
    <div class="search-box-autocomplete" style="display: none;">
        Foo Bar
    </div>
</form>

占位符文本不是标签文本的替代品。它应该是为了提供一个类型的内容，你正在寻找的例子。

奇怪的是，您使用的是html5占位符属性，但没有使用html5输入类型的搜索。

CSS

我不赞成BEM方法，所以我不能评论你对它的遵循程度；在我看来，它总是过于冗长。

正如我已经说过的，你的图标纯粹是装饰性的。它在标记中没有位置。它最合适的位置是作为搜索字段(这里不存在)或form元素的标签上的伪元素。

以下CSS：

#container {
  width: 500px;
  margin: auto;
  margin-top: 30px;
  background: gray;
  color: black;
}

.search-box {
  width: 100%;
  position: relative;
  background: inherit;
  color: inherit;
  height: auto;
}

可以简化为：

.search-box {
  width: 500px;
  margin: 30px auto 0 auto;
  background: gray;
  color: black;
  position: relative;
}

可用性

整个配色方案的对比度极低。

当输入元素有焦点时，浏览器提供的样式被认为是可用性特性。如果它不适合你的设计，你应该调整它适合，而不是删除它。

没有提交按钮。有些用户不明白他们可以按enter键提交表单。