5 tips for writing better CSS

5 tips for writing better CSS

Every day in a software developer's life have some amount of time spent thinking about writing better, fast and efficient code and that is what make difference from juniors to seniors. I mean writing better code is not only what makes you a senior developer but it has a contribution to that. In this post I'm going to share with you 5 tips that will help you to write better css. Let's get in right away starting from first tip but don't worry about the order, there is no specific order that I used.

1. Avoid using !important

Normally when an element has styles which is not going to change we use !important tag to override the style of the existing element and when we want to change these styles we are required to use !important and this causes a problem when the more your codebase gets bigger. Okay okay I know this may sound a bit complicated to grasp but here is what I mean by example.

<h1 class="title">Will be RED.</h1>
h1 {
  color: blue !important;
}
.title{
  color: green;
}

The h1 will be blue without caring that it's color was changed on it's class (.title) and to override that or to change that you will need to also user !important in .title so that the h1 can be green. Hope fully now it makes sense. The advice here is that you might use !important when you feel like it's really necessary. A lot of developers take using !important as being selfish.

2. Use shorthands

Some properties like margin, padding and border can be written in one line of code which is very simpler and can help you save some time, write less and make your code clean and readable. For example, instead of doing this👇

.post-container {
  padding-top:  1rem;  // OR border-top, margin-top 
  padding-bottom: 1rem, // OR border-bottom, margin-bottom
  padding-left:  0.5rem;
  padding-right: 051rem,
}

You can use this

.post-container {
  padding:  1rem ;  // This means that ALL SIDES(top, right, bottom and left) have 1rem
// the same apply to borders, margins etc..

  padding:  1rem 0.5rem;  // This means that top and bottom have 1rem and left & right have 0.5rem
// the same apply to borders, margins etc..

  padding:  1rem 0.5rem;  // This means that top and bottom have 1rem and left & right have 0.5rem
// the same apply to borders, margins etc..

  padding:  1rem 1.2rem 0.5rem;  // This means that  have 1rem and left & right have 1.2rem and the bottom have 0.5rem
// the same apply to borders, margins etc..

  padding:  1rem 0.5rem 2rem 1.2rem;  // This goes clock wise (from top-> right -> bottom ->left)
// the same apply to borders, margins etc..


}

3. Use Hex values instead of color names

Most developers use color names when they are assigning colors to the elements but here is the thing. Using Hex values not only adds compatibility with all browsers it also give you more options of colors to chose from because not every color has a name.

don't

.btn {
  color: white;
}

do

.btn {
  color: #ffffff;
}

Enjoy varieties of colors by using Hex values, and you know what? most IDEs have color selector which allow you to pick a color instead of searching it or memorizing these Hex values. Luck you!

4. Use font fallback

I know in real life motivational speakers tell us to not have a fallback plan(because plan B contribute in not achieving plan A) but in css this can save you a lot. The font-family property should have several font fallback system to ensure that when one font is not supported by a certain browser it tries another one. This is all about compatibility between browsers.

body {
  font-family: 'Poppins', Arial, Helvetica, sans-serif; // This means that if one browser come to not support Poppins the it tries Arail and so on..
}

5. Avoid redundant properties

Writing some codes again and again is what we call redundancy. To avoid that in css you can use comma (,) to give same styling to two or more selectors. Example

don't

.selector1 {
  padding: 0.8rem 1rem;
  color: white;
  font-size: 1rem;
  border-radius: 3px;
}
.selector2 {
  padding: 0.8rem 1rem;
  color: white;
  font-size: 1rem;
  border-radius: 3px;
}

do

.selector1, .selector2 {
  padding: 0.8rem 1rem;
  color: white;
  font-size: 1rem;
  border-radius: 3px;
  margin: 1rem;
  border: none;
}

And that will be applied to both .selecot1 and .selector2.

There are a whole lot tips for writing better css and many of them will be covered on this blog as times goes, however by using these 5 tips above you can take your css from one level to another. So if this post seems or is helpful to you, then don't hesitate to share it to your fellows and don't forget to live a reaction to it. Comments are of much value so that I know what to improve or which topic to write on in my next post. Cheers 🍻