Good day guys, css is to a website what beauty is to a woman and you cannot get away with writing bad css, i'm going to share with you some cool css tips and tricks today. I saw a video on youtube that fireship.io made on a similar topic, i learnt some cool css tips that can make writing css much easier. There are also a few tips i use personally, i thought i should share with you guys, let's get to it.

Use Variables

You wouldn't believe it but if you can define some variables in your CSS that will hold a certain value that you might use in more than one rule or over several lines. Rather than hard coding the value each time, you can just call the variable, Later you can just change the value of the variable and it will take effect in all rules it is used.

/* syntax */
*{
--name: value
}


/* example */
*{
--min-width: 400px;
--max-width: 700px
--secondary: green;
--danger: red;
}

h1 {
background: var(--danger);
}


h2{
 color: var(--secondary)
 }

This is just a simple use case but it might come in hand when you want to manage your css file, maybe update or change something, you can just do that once and it takes effect over multiple lines rather than manually having to change all values by yourself.

Clamp function

CSS now has a clamp function that will reduce the amount of media queries in your code. The clamp function accepts three values, the first is the lowest possible value, the next is the default value while the last is the maximum value. As the screen size changes the values will automatically switch, with the minimum being used for small screen sizes while the maximum for large screens.

.foo{
font-Size: clamp(14px, 24px, 36px)
}

/* rather than */
@media screen and (max-width: 400px){
.foo{
 font-size: 14px
 }
}
/* and again, thank God for clamp() */

use relative units

Keeping in mind that your website needs to be as responsive as hell, you should do away with static units like px, inch or cm and use rems, ems as much as possible, you can combime this with the clamp function to achieve heaven while writing css.

*{
font-size: clamp(14px, 24px, 32px)
}

h2{
font-size: 3 rem /* and now its fully fluid */
}

And relative units are not only em and rem, you have fr, which represents a fraction of a container size although you can only use this with grid, talking about grids.

using Grid for layout

If you still use floats or table to define a grid system for your web project then you should be hanging out with internet explorer. Css has a grid value that you pass to the display property and now you have god like control over the structure of your layout.

<div class="container">
  <div class="item">john</div>
  <div class="item">doe</div>
</div>

<style>
.container { /* grid container */
display: grid;
grid-template-columns: 1fr 1fr; /* this specifies the width of each item in the grid */
}
</style>

There is more to css grid than i can explain here because that would take us outside the scope of this article and it deserves it's own article so i might make one in the future.

using emoji characters for class names

This might sound wierd but you should probably use emoji characters as your class names to style up your elements rather than using complex class names that might lead to typos or is too long and disconnected from what you're tying to style, emoji characters are short and there's no spelling anything so the risk of making a typo is virtually eliminated.

<div class="😂">
  Foo bar
</div>

<style>
.😂{
font-size: 1.2rem
}
</style>

You will agree with me thst this is shorter and makes reviewing your code much more fun.

exadiv

This is a chrome extension you can download from the chrome web store and it's totally free, you can click on an element and exadiv will give you a rundown of the styles of that element. I use this a lot when i want to copy some styles from another website. It also highlights the element so you can see it's width, border and padding. It will really increase your css skills and make you more productive, so you should definitely try it out.

visbug

This is another chrome extension and this also gives u god-like control over the elements on a website, you can use this extension to visually interact with a website and do stuffs like drag an element to a new position, see the styles associated with the element, change its z-index with button press on your keyboard, measure the element, see it's box-model representation and more. It might take you some time to learn all the features of the extension but it is worth having and i would advice you to get it.

colors.co

This is an amazing website that can help you generate a color palette that you can use accross your application, it has a fun to use UI and you can just press space on your pc to generate a random color, once you find one you like, you can lock it in and continue till you have your palette all selected, then you can download it as an image or svg or pdf, or whatever format suits you.

write SCSS instead of CSS

SCSS is to CSS what TypeScript is to javascript, all valid CSS is valid SCSS because it compiles down to CSS. And like TypeScript, browsers cannot directly understand SCSS so we need to compile it to CSS, we can easily do that from vs code by installing SCSS compiler extension from the vs code extension marketplace. I will not go into SCSS here because it is outsids the scope of this article but if you want to learn about SCSS then you should check the net ninja scss tutorial on youtube.

That's it for this article, i hope you find it useful, untill the next one it's bye for now.