How do I start my BEM CSS going off this layout

[matthisco]

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.

Image link here…

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:

HTML Code:

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

HTML Code:

<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

[Author]

Posts