Responsive search bar implementation using OOCSS

Question

I am implementing a search bar here. I have finished basic UI. I have been recently developed a taste for scalable and robust HTML/CSS. Therefore I am closely following things like BEM and OOCSS

Am I on the right path? Also, how can I make the UI responsive?

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

Markup

You're using way more than you need. You have an unnecessary container element, and 2 empty elements for displaying a purely decorative icon. This should be all the markup you need to get the same effect:

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

Placeholder text is not a replacement for label text. It's supposed to be for providing an example of the type of content you're looking for.

Strange that you're using the html5 placeholder property, but you're not using the html5 input type of search.

CSS

I do not subscribe to the BEM methodology, so I cannot comment as to how well you've followed it; it always looks overly verbose to me.

As I've already stated, your icon is purely decorative. It has no place in the markup. The most appropriate location for it is as a pseudo element on the label for the search field (which doesn't exist here) or the form element.

The following 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;
}

Can be reduced to this:

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

Usability

The entire color scheme has extremely low contrast.

The styling that browsers give when the input element has focus is considered a usability feature. If it doesn't fit into your design, you're supposed to adjust it to fit, not remove it.

There's no submit button. There are users who don't understand that they can just hit enter to submit a form.