README.md

Ragnarson HTML and CSS Style Guide

• Follow the rules from Mark Otto's Code Guide

• Use autoprefixer or autoprefixer-rails

• Use the following naming convention:

    <!-- Objects -->
    <div class="media"></div>
    <a class="btn"></a>
  
    <!-- Object with a related sub-object -->
    <div class="media">
      <img class="media-img"></div>
      <div class="media-body"></div>
    </div>
  
    <!-- Object with modifier -->
    <div class="media media-milli"></div>
    <a class="btn btn-primary"></a>
  
    <!-- Object with state -->
    <a class="btn is-btn-active"></a>
    <a class="btn is-btn-disabled"></a>
  
    <!-- Object which requires wrapper -->
    <!-- f.e. "position: relative" and "position: absolute" pair -->
    <div class="box has-close-link">
      <a class="close-link"></a>
    </div>
  
    <!-- JavaScript handler -->
    <div class="alert js-alert"></div>

• Avoid styling generic HTML elements:

    /* bad */
    p {
      ...
    }
  
    /* good */
    .blog-post-body > p {
      ...
    }

• Avoid nested classes:

    /* bad */
    .blog-post .meta .author {
      ...
    }
  
    /* good */
    .blog-post-meta-author {
      ...
    }

• Never use the HTML id attribute in stylesheets:

    /* bad */
    #headline {
      ...
    }
  
    /* good */
    .headline {
      ...
    }