@ultimatedelman in one point I agree with you: Giving an <article>
the class article
is kinda useless, but there is a reason why I avoid SCSS Structures like
article {
h1 {
}
}
If the markup changes, let's say because a new developer comes and decides that all articles should have an h2
as headline because an h1
headline is only used on the header
, they'd need to change the SCSS, too. If I use describing names like single__article--headline
they're readable AND can be applied to any kind of element. If you only have one thing to change it wouldn't be a big deal but imagine you have a site with hundreds of different elements, all only made with nesting or in other ways related to the mark up. You'll end up running through all your codes to change all the things - if you have describing names and avoid nesting, you'll be able to make changes much faster.
I do lose the nesting feature of SCSS but nesting can cause more problems than it solves. I do only nest :hover
,&:before
, &:after
and :focus
- in other words: most of the time only pseudo elements.
I can get much more out of SCSS by using mixins and vars.
@ultimatedelman then please tell me what else would be a good use. I'm willing to learn from mistakes. :)
@davidandrewsmit I agree, especially re-usability is very important though.
@milesj thanks man :)
So what would you say? Working on a "My CSS is like my HTML" base requires to change both whenever something new comes in. Which way of naming is the best?