My journey into web development started through WordPress, where I was accustomed to editing pre-styled templates to suit my needs. Later as time passed by I asked myself a question, "Can I create WordPress using WordPress?"

Well, that question made me shift to writing code from scratch; the rest was history. I've now been working in the front end for almost 2 years now. In this journey, there were times when I was introduced to CSS frameworks. I used Bootstrap a lot and later shifted to TailwindCSS💙.

I used Tailwind for almost every project I made, but now as I joined another company which required me to build components which were not readily available, that is when I really started to dive deep into the wonderful world of CSS (Yes, I hated it at first, but as I understood it, I love it and you will too!!)

Here in this blog, I'll share some of the most important tips that helped me get better at writing CSS🎊

It's time to step up your CSS game!

Understand Pseudo-elements and Pseudo-classes

When I mean to understand you really got to understand them in depth. The primary difference between a pseudo-class and a pseudo-element is that pseudo-classes are used to select a particular state like hover, active, focus etc whereas pseudo-elements are used to select and apply specific styles to the selected part of the element.

Let me explain with a little example

p::first-letter {
    font-size: 1.5rem;
    font-weight: bold;
    color: red;
}

This code, as the name suggests, applies the selected properties to the first letter of the paragraph.

One major confusion that I had when I first started to dive into pseudo-elements like ::before and ::after were actual elements that were inserted before and after the element. However, it took some research to actually grasp that they are actually before and after the element. Let me give you an example

/* <p>A dummy paragraph</p> */
p::before{
content:"Hi" /*The content is actually inserted INSIDE the paragraph tag and before the CONTENT of the paragraph tag i.e A dummy ...*/
}

p::after{
content:"There" /*Similarly, "there" is inserted after the content in the p tag */
}

/* It is the reason why Z-index don't work on pseudo elements - Trust me, I've wasted days trying to find out why my after wouldn't go over the parent div😢 */

Give advanced selectors and pseudo-classes a chance!

In the initial stages, I used to write classes and IDs for every edge case that I found in the code, however, that made the code very messy and also increased its complexity. Hence, I started looking for better alternatives and that's when I stumbled upon pseudo-classes and I've never turned back!

Here are some useful points that will be handy for you!

• Want to give different backgrounds to elements? No need to write separate classes for each, instead use an attribute like "data-bg", you can give common styles to each card using one class and use the attribute selector to assign backgrounds!

• Try using :has() to target the parents depending on the content they have

• Use child selectors like :nth-child(), first-child(), last-child() to make awesome designs. You can also chain them with :not like :not:first-child(), this will help you create complicated edge cases with ease

Use CSS Grids!

It's only been a month since I started using CSS grid, and I'm telling you web dev has never been easier. I've used Flexbox for almost 2 years no matter how the layout was, but let me tell you Grid and Flexbox complement each other and you can use them to create out-of-the-world designs.

You can learn about CSS grids through an interactive game for free here

Use module CSS for big projects

When I created my first fully functional ReactJS website for a company, I saw that there were cases where I wrote a particular style for a component in the about page which is now affecting a component on my homepage. That was very odd for me, but I later explored that all the CSS code for React app is compiled into one main CSS file when it's built, which causes clashes if the class names match.

This problem is easily solved using modular CSS. The main idea behind it is, we write the CSS normally but instead import it as a JS object. What it does is it add some extra characters to the class name, which rules out the possibility of class names colliding.

Try using SCSS or SASS

When it comes to writing clean code in CSS, tools like SCSS and SASS come in very handy by providing solutions like nesting, variables, conditionals and loops in the CSS. They help you minimize the code you need to write to get the job done.

Conclusion ☮

Those were some of the points that helped me to become better and grow as a frontend developer and I hope these points will help add a little value to your existing skillset!

Kamui!