Last active
December 17, 2015 04:48
-
-
Save stowball/5552711 to your computer and use it in GitHub Desktop.
Sass nesting best practices. Do you group individual "sections" of a markup patten and nest that, or nest everything, more akin to matching the markup structure?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .accordion { | |
| .js & { | |
| display: none; | |
| } | |
| .js .open + & { | |
| display: block; | |
| } | |
| li { | |
| border-top: 1px solid #e2e4e6; | |
| &:first-child { | |
| border-top-color: transparent; | |
| } | |
| } | |
| a { | |
| @include rem(padding, 5px 10px 6px); | |
| &.icon { | |
| padding-left: 40px; | |
| position: relative; | |
| } | |
| &.icon img { | |
| @include rem(left, 10px); | |
| margin-top: -2px; | |
| position: absolute; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .accordion { | |
| .js & { | |
| display: none; | |
| } | |
| .js .open + & { | |
| display: block; | |
| } | |
| } | |
| .accordion li { | |
| border-top: 1px solid #e2e4e6; | |
| &:first-child { | |
| border-top-color: transparent; | |
| } | |
| } | |
| .accordion a { | |
| @include rem(padding, 5px 10px 6px); | |
| &.icon { | |
| padding-left: 40px; | |
| position: relative; | |
| } | |
| &.icon img { | |
| @include rem(left, 10px); | |
| margin-top: -2px; | |
| position: absolute; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I think I prefer "separate per tag" as you can clearly see the three different objects types that are affected