Snook.ca

Prefixed Classes in 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

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

Hi. My name is Jonathan Snook and this is my site. I write about what interests me, which is usually web design, development, and technology. I'm also in the middle of a food adventure.
I wrote SMACSS. I tweet. Want to learn more?