When you style your elements, always think about reusing a class globally

Cascading Style Sheet (CSS) is a decoupled layer to style your HTML elements. In that regards, it is easy to fall into the trap of creating multiple IDs and Classes for every single element we want to style.

To improve performance and oriented CSS, we need to have the mindset of planning what will our CSS serve. Is it unique or can it serve multiple purposes?

Is it unique?

  • Use an ID (#Something)

Will it serve multiple purpose?

  • Use a class (.Something)
  • Think about general usage as well. For instance, text alignment and font classes can be reused globally and mixed together:
    • .text-center{text-align:center !important}
    • .text-left{text-align:left !important}
    • .text-right{text-align:right !important}
    • .text-bold{font-weight:bold !important}

    After this is set in your CSS, you can style whatever element with both. For instance:

    <p class="text-center text-bold">This is centered and bolded</p>

    That’s just an example, this approach can be applied to lots of circumstances.

The Bootstrap framework is one good way to minimize effort and reuse classes globally. We highly suggest to play around it and see from yourself how beneficial it could be!