How do I start my BEM CSS going off this layout

HTML & CSS
1

Hi folks,

I need to refactor the CSS for a site of mine, I’d like to use the BEM method. I’ve included a link to a very rough layout, apologies for the poor choice of colours.

How would you start off with this?

I was thinking of creating a base css using the BEM naming method going off the layout above. As a startpoint if I was to target the reset button in the purple bar the HTML currently looks like:

      <ul class="callparent_filter_list">
                <li style="width: 140px">
                    <input type="text" readonly="readonly" style="background: transparent; color: transparent; background-color: transparent; width: 100px; border: 0; border-color: transparent;" />
                </li>
                <li>
                    <span id="itemsholder">
                        <input type="text" readonly="readonly" style="background: transparent; color: transparent; background-color: transparent; width: 220px; border: 0; border-color: transparent;" />
                    </span>
                </li>
                <li>
                    <input type="text" readonly="readonly" style="background: transparent; color: transparent; background-color: transparent; width: 116px; border: 0; border-color: transparent;" />
                </li>
                <li><!-- reset button -->
                    <input type="button" style="float: right; margin-left: 28px; margin-right: 0" value="Reset" class="callparent_filter_message_phone_character_btn_test" data-bind="click: resetClick" />
                </li>
            </ul>

Would I need to use something like:

<ul class="filter">
  <li >
    <input type="text" readonly="readonly"  />
  </li>
  <li>
    <input type="text" readonly="readonly"  />
  </li>

  <li>
    <input type="text" readonly="readonly"  />
  </li>  <!-- reset button -->
  <li>
    <input type="button"  class="filter__resetButton" value="Reset" data-bind="click: resetClick" />
  </li>
</ul>

Any advice much appreciated

2

BEM method? I’ve been doing layout for six or more years and have never heard of that. Perhaps some reference would have been useful.

Anyhow, I wonder if what you really want is a framework. There are plenty out there, such as Foundation, Bootstrap etc.

3

Thanks very much for the reply.

Its a naming convention I’d like to use for my site, the css is all over the place at the moment using multiple stylesheets and redundant code.

I’d like to start on a more structured approach.

Here is an example:

4

I had to look BEM up also but I got lost as soon as they mentioned json and xsl. :slight_smile:

Consistent naming approaches are good but most good coders will do that already (I hope). However we could all do better I’m sure.

There has been a re-think in the last couple of years about using classes more than element names (and descendant selectors) to avoid specificity or cascade issues in re-usable code and that is a fair comment. However every site is different and some small sites don’t need to be saddled with the extra baggage that some of these frameworks impose.

As far as your original question goes then I would need to re-read the article to understand the naming conventions so maybe someone familiar with BEM could answer (if anyone exists - it looks like someone posted a similar question on CSS tricks but no one answered).

5

Thanks for the reply.

I posted on there too! :slight_smile:

I’ll keep thinking, and post my findings on how I go about this.