Is it better to change native Bootstrap classes or create subclasses and overwrite?

Asked

Viewed 551 times

3

In the project I am studying/working I am making small adjustments in the native Bootstrap classes to meet my needs.

1: Is this really best practice? Or is it better to create our classes and overwrite the bootstrap ones? Or besides, there is some other usage practice that is better for us to personalize our projects?

For example, below I created a class to modify a native Bootstrap navbar:

.navperson {
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    color: #ffffff;
    border-top: 2px solid #5bc0de;
    border-bottom: 2px solid #5bc0de;
}

2: In the . html document, I first need to always link the bootstrap . css and then the custom . css, right? If we apply . bootstrap css after, it will not overwrite the properties of . css custom, sure?

3: The order of application of the classes changes something?

Ex: 

<nav class="navbar navbar-expand-md navbar-light navperson">

Or:

<nav class="navperson navbar-light navbar-expand-md navbar">
css bootstrap

  • In this case, there is no better or worse, each person does it in a way. It depends on what you prefer.

  • 1

    I sincerely like to overwrite the native class, not to have 10 classes in an element, in the end you end up getting kind of lost from which class he is respecting. Dirty the HTML. But like Rafael said, it’s like. I prefer it like this. E on the class order, no. The order is defined in the CSS, by its cascade, no matter the order of the class in the HTML you put.

1 answer

4


Look, I was scratching my finger to send the question to the review queue as "mostly based on opinions". But there’s one thing about good and bad practice that’s not opinionated, it’s fact.

Bootstrap, like the vast majority of large-scale libraries, evolves over time. If your system is widely used, it will tend to evolve as well.

If you change the native classes of Bootstrap or any other library, you will be shooting yourself c... er, foot. Every time you go to upgrade your system, if you have released a new version of the libraries you have tampered with, you will have a Trilema:

  • Discard all the work of changes you have made, or;
  • Get stuck with an obsolete version of the library, or;
  • Merge what you did with the new version of the library. In general you only see people doing this when using astral projection to visit the lower levels of hell.

If you use subclasses and superscript, you will still have this problem, but the impact will be orders of lesser magnitude. Depending on how you do this, the impact can be insignificant. In general, the greater your reuse skill and experience, the better.

The ideal is not to try to reinvent the wheel, and to re-style these libraries only if their visual identity really depends on it.

Browser other questions tagged css bootstrap

You are not signed in. Login or sign up in order to post.