Prefixed Classes in Bootstrap
Mark Otto talks briefly about their decision to use prefixed classes with Bootstrap.
"Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system."
He goes on to say...
"There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successful state” as an idea across the design system. That is to say, we have a shared idea of what “success” looks for buttons and alerts, but the execution is scoped entirely to each independent component. No questions of where common styles are used and no concern of unintended effects, making each component more durable and flexible."
If you were wondering what an example implementation of SMACSS might look like? Bootstrap is a perfect example.
Conversation
I've taken to the bootstrap framework and love it! I started implementing similar state based class names in my projects at work as well. Start with a base class called control-group and then append classes like validation-success or validation-failure to enhance the existing control with icons, colors and messages. I'd recommend this sort of thinking (SMACSS or otherwise) for any new project, and providing its not too painful, legacy systems.
I think, a healthy mix 'old BEM' and SMACSS approach is more extensible. But ugly. But it works.
.tpl-p-search, .b-search-button_advanced, .l-footer, .js-keyboard