Repetition in classes - Githubissues

CSS is a wonderful language that allows us to not repeat ourselves by crafting descendant selectors. This template however does not really make use of this, as classes like flash and introduction are repeated in every nested element.

For example: https://github.com/brebory/thinkful-fewd-best-practices/blob/master/index.html#L70

This could be significantly cleaner and more DRY with a structure more like this:

<div id="introduction">
  <h1>Front-End Best Practices</h1>  
  <p>One way to become a better front-end developer is to create code that is less complicated. Managing complexity is a skill that is difficult to master, but there are a couple of principles you can start applying today that will have an immediate effect on the quality of your code.</p>        
  <p>This pen shows off a couple of techniques to keep your front-end code very simple and understandable. Obviously, the example ui components are extremely simple, but these principles are applicable to any number of more complicated components, such as a carousel or video player.</p>

  <ol>
    <li>Use semantic CSS classes on everything! Seriously, you have nothing to lose by adding CSS classes to every element. Even if you don't need to style a specific element right now, giving it a class can help you if you need to style it in the future.</li>
    <li>Use separate classes for styling and javascript hooks. The visual style of an element and it's behavior are two different concerns - keep them separated from each other by using one set of CSS classes for styling, and another set for javascript interaction hooks. Use the prefix 'js-' for your javascript hook CSS classes.</li>          
    <li>Keep your markup as simple as you possibly can. Use only the elements you need, and nothing more.</li>
    <li>Learn SASS or LESS! They add powerful features like mixins and variables, which will help you write less code, and do more with it.</li>
  </ol>
</div>

Here, most of the classes are removed, but it's still quite easy to make clean and accurate selections because of the wrapping div.

brebory / thinkful-fewd-best-practices

Repetition in classes #5