Class names concatenation about css-architecture

[jareware]

Indeed they might.

It's all about trade-offs. While you lose that bit of convenience with the above syntax, what you gain:

1. Less repetition - you don't need to add .myapp-Header- for every single selector you write
2. Harder to accidentally break encapsulation - since you're writing all your styles inside the topmost block, Sass (and most other preprocessors) will prefix the selector with the topmost one
3. Harder to make typos - if one of the classes ends up being typo'd as .myap-Header- it may be a pita to find

To make your life simpler with this choice (should you make it), consider:

• If you follow the conventions set in the rest of the document, in general, styles with selectors that start with .myapp-Header- will be located in Header.scss (the use of > selectors being the only exception)
• Even with that exception, grepping for myapp-Header- will still find all styles related to that component
• Sass (and other preprocessors) can emit source maps, so you can click on a link directly from your devtools to take you to the styles in question, no need to resort to grep

Does that make it any better..?

[goliney]

Yeah, I see your point. Thanks for the response

[jareware]

np, thanks for the feedback!