Bootstrap 3 Classes or IDs?

[Smash]

I’m trying to put a site into Bootstrap and after much confusion with all the classes, have opted to use IDs for a lot of the elements, alongside the class names. This way, it seems easier to style elements using a few IDs than do the same with so many classes in bootstrap.css. At present, seems to work well enough.

 <nav id="main_nav" class="navbar navbar-inverse navbar-static-top">
        <div id="nav_bar" class="container">">     

Is this deemed as the wrong (or lazy way) of doing things? Should the HTML elements be styled according to the classes already defined by Bootstrap?

[Paulie_D]

Personally, I wouldn’t use ID’s but there is no reason you can’t create and use your own classes.

After all, you never know when you might need that styling again.

[Smash]

Thank you for your reply, Paulie_D.

I’m getting back into this stuff after quite a break and (very stupidly!!), I never thought of adding new classes. There just seemed so many in BS3, it never actually occurred to use more of them. You are completely correct though. The code definitely feels better now the IDs are gone. Thanks again for your advice.

[StartBootstrap]

A good way to make your own classes is to view your webpage in a browser and use an inspect element tool. Firefox and Chrome have pretty decent ones. They will tell you what your new class is overriding.

Also keep in mind that Bootstrap has a bunch of built-in helper classes like .text-center or .pull-right, etc. Those can come in handy a lot!

[MattF]

Personally, I use classes over id’s all the time. Reason why is it keeps things consistent along with the fact if you need to add any type of jquery etc. to that div, you may need to use an id and since you can’t use multiple id’s on a div/section like you can with classes, it is best to just use classes. Once you start using both for pure styling, you may come across some issues because id’s take priority of classes so at times maybe some of your style get overwritten due to the id styles.

Like the post above me, Bootstrap uses pretty much all classes. We use bootstrap here and love it so it works out since we do classes.

[Jesse]

Actually, the spec seems to say you can have multiple IDs on an element (quote & source below), however I have yet to think of a reason why you’d want to do that, other than splitting the roles of styling/presentation, jQuery-hook, and linking for page-internal navigation.

Personally, I prefer classes whenever possible, IDs only when necessary.

“If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector.”
http://www.w3.org/TR/selectors/#id-selectors

[MattF]

I honestly have never seen that. In fact, awhile back we had tried it but it just ran into too many issues and having multiple id’s on one div has never worked. So we decided to only use classes and save the id’s for like jquery or other things that “need” to have an id. I can honestly say I have never seen any site use 2 id’s on one div like we do classes.

[Smash]

Thank you very much for the replies, there has been some very helpful and interesting info here. I’ve got a question about the classes, now that the IDs have been ditched:

When styling, should the default classes made by Bootstrap be used in preference to creating new classes? As an example, say you wanted to change the navigation bar background to red.

For the navigation bar, I’ve created a new class called .main-nav and changed the background to red. It works fine, but the same thing could be achieved by changing Bootstrap’s .navbar-inverse to red (putting it into a new CSS files rather than overwriting the original). There are dozens of classes that the same approach could be used for.

Is adding extra classes like this going to be deemed as bad practice? I’ve been looking at the code for a lot of site built in Bootstrap and see that people seem to mix and match their own classes with Bootstrap’s. I just want to produce code that’s done the right way but am kinda confused at which is the best way (or not!).

[MattF]

You can do either or. If you want to keep bootstrap classes separate in case you need to re-use things also and use their look or if you know whatever you change some of the styles to that you will always want that look if you re-use it. If that makes sense.

Personally, I override theirs using their styles but obviously putting it in a file that comes after bootstrap. I use SASS and SMACSS so I have a _bootstrap.scss and _layout.scss etc. so I would use their class name but put it in the _layout.scss (because I have it being called after the bootstrap one so it will override things I need to) and just change what you need. Prevents adding extra classes on divs which I try to do.

But it is up to you. It may be easier to create a new class and just add it to the div so you aren’t overriding any of the bootstrap. Either way won’t hurt, or at least from what I have done so far I haven’t seen anything break or cause complications since technically you are still writing out the class so it is easy to remove if you need.

Hope this made sense.

[Author]

Posts