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 {
}
}
The notes pretty much cover my thinking but I was going to add a little background in the post as well.
.my-selector__childis mainly meant to convey how class name selectors fit into the scheme. Should I change it to something more generic, like.some-nested-selector?