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
Clean Code Principles: Best Practices for Writing High-Quality Software
Clean code principles are a set of best practices and guidelines that software developers adhere to in order to write high-quality and maintainable code. Clean code is not just about the aesthetics of code formatting; it is about writing code that is easy to...
Angular NgIf Else Example
Table of Contents 1. Introduction2. Understanding Angular ngIf Else Directive3. Syntax and Usage4. Examples of Angular ngIf Else 4.1 Example 1: Simple ngIf Else Statement 4.2 Example 2: Using ngIf Else with Template References 4.3 Example 3: Multiple ngIf...
Angular ngFor Map: A Comprehensive Guide to Mapping Arrays in Angular
Angular is a popular JavaScript framework used for building dynamic web applications. One of the key features of Angular is its ability to efficiently work with arrays and perform various operations on them. The ngFor directive is an essential tool in Angular for...