Cool CSS tips And Tricks

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.

Comments

[Temani Afif]

there's no spelling anything so the risk of making a typo is virtually eliminated. --> I would say the risk of typos is higher because emojis doesn't render the same way in all the OS so I might not see the same emojis as you and lets not forget the fact that we may not understand emojis the same way (due to different culture).

[Kinanee Samson]

I have tried using emojis as class names in my code, i use firefox, edge, chrome, it works fine even on my android device, i still get the same results. Haven't tested it on a mac but hey these are pro tips supplied by experts.

[Temani Afif]

it's not about the result of the code. It's about the code itself. Emojis don't render the same in all the OS so I may not see the same code (not the same result) and this will make it difficult to manage. We may both see a different rendred emoji and this will lead to a lot of confusion.
Check this to understand what I mean: unicode.org/emoji/charts/full-emoj... see how each emoji can have different rendring, the same can happen with your code even if it's still the same one.

[Temani Afif]

media query cannot be defined with CSS variables, you can try your example. It won't work.
The reason is simple, we can easily run into undefined behaviors:
Ex:

:root {
  --m:700px;
}
@media screen and (min-width: var(--m)) {
 :root {
   --m:800px
 }
}

[Kinanee Samson]

Forgive me, i used this a lot with SCSS, i thought it has built in support for CSS..

[Stuart Homfray]

Ok, there's a few things that need to some clarification:

• variables: actually known as custom properties, are not quite the same as (for example) SCSS variables; they are scoped, can be read/modified by JS, and they can be modified after the initial render. You can use them in a similar way as typical variables, as you indicate, but they can be more!

• clamp() - great, but bear in mind the lack of support in IE11 (we continue to partially support that browser in commercial projects, so some properties/functions need a little consideration). Also bear in mind that the example here is not, in itself, responsive: the 2nd/middle font value needs to be something variable, eg a vw/vh value or a %.

• use emojis for class names - ok for personal projects, but confusing AF for larger projects, where some may not understand without some extra documentation. Unless you're joking for this one, obviously 🙂

• exadiv / visbug - can't say that I've ever heard of these, but they seem to replicate what's already available in the browser dev tools

• use SCSS (or Sass 😉). I use SCSS every day, so I'd completely agree. But folks should definitely try to understand plain CSS too, as it will most definitely help.

Couple of other things:

Watch out for spaces between the numeric part and the unit for property values (see the relative units example).

css is to a website what beauty is to a woman - this is a predominantly male community, right? If not, I think there will be a few women who will be a bit pissed off reading that. Just sayin'

[𒎏Wii 🏳️‍⚧️]

I don't think you understand what the clamp function does; your example font-Size: clamp(14px, 24px, 36px) is the same as just a static 24px.

developer.mozilla.org/en-US/docs/W...

[Gaurav]

+1 @afif .
Also, any specific reason for using the * selector for defining variables?? I mean I've always been using the :root for it. (Not bashing or anything, just asking it out of curiosity 😅)

[Kinanee Samson]

Yes, it ensures that all elements share that rule as their default, it works well especially if you want to really control the element and its spacing...

[Temani Afif]

all elements share that rule as their default --> CSS variables are by default inherited so defining them inside :root or * will give you the same result. This said I am against both configuration (the :root and *) because it's a very bad practise we see in all the courses/tutorial. CSS variables should be defined based on your use case. If you have to define a color that will get used everywhere then do it inside :root but if you will define a variable that will get used by one or two elements then define it only for them using a specific class. All the elements don't have to inherit all the variables

[kleksowa]

Sorry, I can't aggree with the emoji tip - personally, I prefer clear class names, for example, if I'm creating a specific container for some section, I would rather use a proper class name, so in CSS I know exactly what HTML part it refers to. I'm still a beginner and I already hate my code being messy and my advice would be create as less specific classes as possible ;)

[Sheikh Rashed]

thnx brother, I knew lots of things that I didn't touch since my career