SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I start my BEM CSS going off this layout

    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.

    http://tinypic.com/view.php?pic=2d7u...5#.UkK4rxDYyoh

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    http://bem.info/method/definitions/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I had to look BEM up also but I got lost as soon as they mentioned json and xsl.

    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. #5
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    I posted on there too! :-)

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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •