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

Best Languages For Web Development

Best Languages For Web Development

Web development is becoming more and more popular with everyday. Everyone is creating web applications that can be accessed from anywhere and any device. In this article, we will take a look at the best languages for web development. These programming languages are...

Programming In C Sharp

Programming In C Sharp

Programming in C Sharp or C# (C Sharp is more SEO friendly) is one of the best decisions I ever made. As a lot of computer science students my age in the UK, I was learning a lot of Java. Most of my modules would explain complex programming concepts and algorithms...

Learn Swift for iOS

Learn Swift for iOS

Learning to code can give you so much freedom to create things. Things that millions of people can use. Swift is Apple’s programming language for creating software for its platforms such as iOS, Mac, Watch OS, Vision OS and TV OS. Learn Swift for iOS, and you will...