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:



.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:



& 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:


-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

GO language examples

GO language examples

GO Language Examples: A Comprehensive Guide Introduction Go, also known as Golang, is an open-source programming language developed by Google. Known for its simplicity and efficiency, it has become a popular choice for developers in areas such as web development,...

SQL Query Samples

SQL Query Samples

Mastering SQL Through Examples Introduction Structured Query Language (SQL) is the linchpin of effective data management and manipulation in relational databases. This article aims to fortify your understanding of SQL through practical examples, enabling you to...

Top 6 Coding Apps for iPad

Top 6 Coding Apps for iPad

The digital revolution has ubiquitously integrated coding into educational curriculums, with the iPad emerging as a formidable platform for such initiatives. The tactile interface and intuitive design of the iPad make it an ideal tool for teaching and learning coding....