CODEWITHSUNDEEP
csstwitter-bootstrapwebbootstrap-4
Andreyu
Andreyu

Reputation: 454

Bootstrap best practices?

I do both web design and development. I usually prefer to write my own CSS and not use any frameworks. On my current project the client said after I finished the design that it would help their dev team if I could also code the HTML & CSS. Their requirement was to use Bootstrap 4.

I said OK and got to work. However I have some questions about best practices when working with Bootstrap. For example, say I want to have a .navbar-text that needs a left border with a certain non-theme color. My questions are:

I want to make my code as easy as possible for their dev team to work with and I'm not sure how to proceed. Any advice would be appreciated.

Upvotes: 1

Views: 2203

Answers (1)

Pat
Pat

Reputation: 2750

Should I create a new class for this, or just overwrite the .navbar-text class? Usually I follow BEM and would create a new class for this, but I'm not sure if that wouldn't be confusing in this instance.

Create a new class. Overwriting or changing bootstrap classes is a no-go, because if they eventually upgrade to a new version of bootstrap, or start using a CDN vs locally hosted (or vice versa) stuff will stop working the way it used to and they won't know why. Leaving bootstrap as bootstrap makes it easy for a new developer to come along and not have to questions "is this bootstrap, or their specific flavor of bootstrap".

EDIT:

To clarify, in the case of your example I would make a utility class and add it to the element. So in the html you would have class="navbar-text left-border" and in my css .navbar-text.left-border{border-left: 1px solid black;} rather than .navbar-text{border-left: 1px solid black !important;}

Since I'm already adding a CSS rule for the border, should I continue to add Bootstrap utility classes on the element, or should I just add CSS to my new rule? Say I want to add some left padding, should I add the pl-2 class to the element, or should I add padding-left: 0.5rem to my CSS rule?

Add it to your existing rule. Think about it this way:

Say you change your mind and don't actually want that padding anymore, or you want to change it to a new value. Would you rather change it in one place in your css, or everywhere you used that class in your html?

Upvotes: 4

Related Questions