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.

Published February 21, 2012
Categorized as HTML and CSS
Short URL: http://snook.ca/s/1013

Conversation

2 Comments · RSS feed
Matt said on February 28, 2012

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.

c69 said on April 13, 2012

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

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.