HTML/CSS guidlines

js-selectors.html

<!-- Bad Code --> 
<div class="validation">
  ...
  <button class="btn btn-danger">Delete</button>
</div>

<script>
  $(".validation .btn-danger").on('click', function(){ ... });
</script>

<!-- Good Code --> 
<div class="validation">
  ...
  <button class="btn btn-danger js-delete-button">Delete</button>
</div>

<script>
  $(".js-delete-button").on('click', function(){ ... });
</script>

style.less

.validation{
  ul{
    list-style: none;
  }
}

@media only screen and (max-width: 767px) {
    @import "style/_small";
}

@media only screen and (min-width: $mediumBreakpoint){
    @import "style/_medium";
}

@media only screen and (min-width: $largeBreakpoint) {
    @import "style/_large";
}

undername.html

<!-- Bad HTML --> 
<div class="validation">
  <h2 class="validation-header">You have validation errors</h2>
  <ul class="validation-list">
      <li>You need a name</li>
      <li>A birthdate must be specified</li>
  </ul>
  ...
</div>

<!-- Good Code --> 
<div class="validation">
  <h2>You have validation errors</h2>
  <ul>
      <li>You need a name</li>
      <li>A birthdate must be specified</li>
  </ul>
  ...
</div>