Un-Bloat your CSS

A unique CSS class for each element
Here, we have a unique CSS class for each element we wish to style. In this case, we would end up with 6 different CSS classes, each repeating a lot of the same properties.
HTML for the 6 elements.
Each element would define a class attribute corresponding to the style properties we want to apply.
6 Colored Boxes
Our colored boxes, rendering just as expected!
5 CSS classes
The same job — with 1 less class and DRY-er code!
HTML with multiple classes defined on each element.
To add multiple classes to elements, we simple add a space between each element.
CSS Custom Variables make life so easy!
CSS Custom Variables make life so easy! Look: now we only need four classes!
HTML
We don’t need to define our ‘default’ color, since this is what will render if we don’t pass the custom variable through!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to create a Serverless AWS project

One Week With Nvidia Omniverse

Kharagpur Winter of Code Project Report

How to Extract a Single Term from a List of Dictionaries

Maplotlib

The Complete Guide to Hosting Your Static Website to Firebase

How to Utilize gRPC-Web From a Blazor WebAssembly Application

Neovim configuration for beginners — Part two

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store