If you’re learning CSS or you’re experienced, you can get pigeonholed into the same routine. Since it’s comfortable and safe, knowing the pressure of working, you can stick to the same stuff over and over again. However, CSS is a language that’s constantly changing all the time.

As someone on a mission to improve their developer’s skills, I have been digging around and I have discovered so many useful things that have already boosted my skills and saved me a lot of time. To start, this is not a comprehensive list but just a few of the new things I have learned about.

Native nesting:

I’m sure you use SCSS and SASS for nesting selectors and like any sane or insane human being, you’re just sick of having to repeat the same lines over and over again:

eg

.mainBdyWrapper

.mainBdyWrapper .rightSide

.mainBdyWrapper .rightSide h2

Yes, you see the problem. Here is what you can do if you can’t use SASS or SCSS, or you just want to keep your CSS skills sharp:

.mainBdyWrapper{

&.rightSide{

& h2{

}

}

}

See? And it’s so easy!

This saves you lines and lines of code, so you don’t have to repeat yourself.

CSS Variables

Okay, I’m sure if you have coded, you know about variables, right? CSS has variables too.

Why use CSS variables? We think of it this way: imagine if you are creating a new page and you don’t want to type the same lines of code over and over again, especially with font names, colors, etc. This is where CSS variables come in!

Here is how you can use them:

:root{

-main-bg-color: brown;

}

then in the selector you just do this:

mainBdyWrapper{ background: var(--main-bg-color);; }

PS Dont ever use brown as a background color but SEE how easy it is?

Ok the third one is something i am just learnig about and

CSS Containers

Im sure yu use media queries a t but we are nw in the transitining phase where a t f native stuff in css is being impemented s keep yur eyes pe!

CSS cntainer queries are the new thing

<div class=”container”> <div class=”box”>Box 1</div> <div class=”box”>Box 2</div> </div>

Before you had to:

@media (max-width: 768px) { header { width: 80%; } }

Now you can just

header { @container (max-width: 768px) { width: 80%; } }

You can see how this saves you soo much time.

Mohammed Al Hashamy is a web developer with a focus on UX, ecommerce and startups. To connect with him https://twitter.com/MHashamy

Other Articles