CSS Clutter – What is the best way to optimize?

[un-na-lee]

I recently started a job at a new company building their own web based platform with Bootstrap at the core. Upon delving deeper into their front-end code I am finding that the entire site is littered with CSS rules to remove (set to 0px) padding-left and padding-right from Bootstrap grid columns, as Bootstrap has a default padding-left and padding-right set to 15px that throws off the design. The guy who started the work before me didn’t notice this at the beginning and just kept on writing new rules for all these sections that don’t need the padding, resulting in a lot of duplicate CSS all over the place.

My question: What is the best way to clean up the code?

1 – Do I overwrite the bootstrap defaults in grid-framework.less to be 0px and remove all css rules throughout the platform that does this?

For example:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 0px;
}

2 – Do I write a CSS rule to set it to 0px and assign it to all columns that needs it?

For example:

.no-padding {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

3 – Do I reference all instances that needs the padding to be 0px directly in the CSS class:

For example:

.login-container .col-md-6,
.home-page-container .col-md-2,
.register-container .col-md-11,
.register-container .col-md-1 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

Even though the CSS file has thousands of lines of code because of this kind of problem, it doesn’t visibly affect the loading time of the website. Should I bother with this at all? But at least, going forward, when building new sections – what would the best approach be?

Thank you!

[Paulie_D]

If the company is using Bootstrap as the core why do you feel it necessary to override that decision?

as Bootstrap has a default padding-left and padding-right set to 15px that throws off the design.

If the design doesn’t work with Bootstrap then perhaps you need to dump BS as whole since it clearly isn’t appropriate.

You’re gonna spend waaay to much time overriding stuff to make your design “work” when you should be thinking should i adapt the design to BS?

Either use it or don’t.

[un-na-lee]

Using Bootstrap is largely beneficial for the structure and style of the website – it’s just this padding scenario that they didn’t want. This is the situation I’m dealing with. There’s not turning back now – only fixing it, or not fixing it. My question is, should I fix it? And if so, how?

[rkieru]

You could create a custom build of Bootstrap from their website, specifying that there should be 0px padding on all margins. That would provide you a solution that removes a lot of redundant CSS.

You could also just eliminate all the bajillion .col declarations with a wildcard:

[class*='col-'] {
  position: relative;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0;
}

A more robust approach might be to combine the wildcard AND your .no-padding idea, but apply the latter to the .container.

.no-padding [class*='col-'] {
  position: relative;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0;
}

That let’s you have padded grid layouts where appropriate, and those without where desired.

[ChristianSirolli]

To optimize a little bit, you should have just 0 instead of 0px, as you can see in rkieru’s response.

[Author]

Posts