How I like to handle the order of nested selectors in Sass.

gistfile1.md

Nested selectors in Sass

How I like to handle the order of nested selectors in Sass. Selectors are nested in order of relationship to the parent and specificity.

.my-selector {

  // mixins and extends first, unless
  // they're specifically related to a rule
  @include some-mixin;


  /*
   * styles and modifications directly
   * on the parent selector
   */
   
  // rules come first and are alphabetical,
  // including rule-specific mixins
  background-color: #fff;
  color: #000;
  @include font-size(16px);
  
  // pseudo-classes follow because
  // they narrow down a selection of the parent
  &:first-child {
  
  }
  
  // cascading modifier classes are next
  // in case they need to be overridden later
  .js & {
  
  }
  
  // modifier classes directly on the element,
  // like pseudo-classes also style states of the parent
  &.-modifier {
  
  }
  
  // action-based pseudo-classes are next because
  // they style states of the parent
  &:focus,
  &:hover {
  
  }

  // media queries come next because
  // they describe modifications to the parent
  @media screen and ('max-width: 50em') {
  
  }
  
  
  /*
   * nested elements and pseudo-elements
   */

  // pseudo-elements are the first of the nested elements
  &:after {
    content: 'hey, I am a pseudo element';
  }

  // element selectors are next and are alphabetical
  a {
  
  }

  p {
  
  }

  // class name selectors are last because
  // they can modify un-classed elements
  .some-nested-selector {
  
  }
}

Looks good. Are you going to write about the thinking behind it, or just let the comments communicate that? How do you feel about adding a note about the fact that nesting .my-selector__chil inside of .my-selector may produce specificity issues with generic utility classes on the same element (that use the same properties)? Un-nesting the rule fixes that, but then it deviates from the point of the blog post.

The notes pretty much cover my thinking but I was going to add a little background in the post as well.

.my-selector__child is mainly meant to convey how class name selectors fit into the scheme. Should I change it to something more generic, like .some-nested-selector?

.my-selector__child shouldn't be nested at all right? BEM encourages/enables us to avoid using the cascade and keep files flat, no?

@greypants that's true. I changed it to a more generic class name since that was throwing everyone off. The point is to show how nested class selectors would be handled.

👍