search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.74k stars 78.86k forks source link

BEM syntax #9366

Closed malte-wessel closed 11 years ago

malte-wessel commented 11 years ago

Hey there, you probably heard of the BEM naming convention. http://bem.github.io/bem-method/html/all.en.html http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

I couldn't find any issue in the bootstrap repo about this. So I opened this feature request.

Advantages:

The naming convention at this time:

.nabar {}

// Modifier or descendent?
.navbar-inner {}
.navbar-brand {}
.navbar-inverse {}
.navbar-static-top {}

with BEM naming convention:

.navbar {}

// Descendents
.navbar__inner {}
.navbar__brand {}

// Modifier
.navbar--inverse {}
.navbar--static-top {}
cvrebert commented 11 years ago

Bootstrap's CSS coding conventions can be found on http://codeguide.co/#css-selectors , which is linked from the README.

mdo commented 11 years ago

I really dislike the double dash and double underscore styles, and we do have a strategy for naming things as @cvrebert mentioned. We'll stick to that for now. Thanks though.

jahaganiev commented 9 years ago

It would be great If the Bootstrap class names start with bs- prefix. For example, bs-navbar, bs-container, bs-pull-left etc. Thanks :)

cvrebert commented 9 years ago

@htmlstream See #17474 & #1287. And please avoid adding tangential comments on old inactive issues in the future; next time, open a new issue instead. :smile: Thanks.