SMACSS, Semantic Class Names and Nested Elements

Question

I\'ve just read Scalable and Modular Architecture for CSS and it\'s got me thinking about a few things. Snook\'s two principle tennets are:

1. Increase the se

Answer 1

It's sometimes referred as "parent-child relation" (http://thesassway.com/advanced/modular-css-naming-conventions) and often recommended to go with .page-header-title.

In your case .page-header can be treated as a component and .title as a component part. RCSS (https://github.com/rstacruz/rscss/) standard advocates .page-header > .title. I personally find it as not a really good idea. Consider following:

  
    ..
  

.tooltip > .title unintendedly inherits from .page-header > .title.

So I would go with .page-header-title.

When you do intend the heading to inherit from a base class, just add class to the HTML element

Now page-header-title contains component specific styles and title augments with abstract title styles. Yes, it is verbose, but safe. Here, if any interest, my detailed opinion on how to keep style cascading sane and to have clean and obvious abstraction https://github.com/dsheiko/pcss