CSS is too hard(myth) 🤔️

CSS stands for Cascading style sheet, and it was awesome, ever since it came out in the year 1996 when Netscape was the top browser, and then the idea of a responsive layout comes in the year 2007 when Apple launches its iPhone.

CSS is not hard to learn, but it's evolved comprehensively during the last 25 years. So today, we are going to learn about how to write some clean CSS using some of the modern features.

Let's get started,

Flexbox is Fantastic:

In the early days, positioning of the element relative to each has one of the challenging aspects of CSS. If you want to position a div both horizontally and vertically,

One option is to give the child position absolute, then move it to the bottom right corner by using the top and left properties then, translate it back to 50% to put it in the center. That can work but, it's hard to graspable.

Screenshot from 2021-05-01 20-16-13.png

A much better approach in the modern CSS is flexbox, which allows you to create a flexible column or row anywhere in the UI. When an element has a display flex, it also has an x and y-axis on which you can align its children.

Screenshot from 2021-05-01 20-39-22.png

But it does have one major drawback if you have a big complex with many intersecting rows and columns, we may end up with a lot of confusion.

Screenshot from 2021-05-01 20-56-39.png

Grid is great:

Luckily, there is a modern CSS feature called a grid that can reduce much of your code. Unlike, flexbox which only deals with individual columns and rows, the grid allows you to work on multiple columns and rows.

When you set an element to display a grid, you can define its children as a bunch of columns and rows.

  • The columns have a width that can be defined with the grid template columns property.

  • We have three values here separated by spaces which means our grid has three columns notice the fr value (Fractional unit) which will responsibly share the available space with other columns in the grid.

  • We can also define some rows and now every element inside the grid will be positioned automatically.

Screenshot from 2021-05-01 22-37-09.png

Screenshot from 2021-05-01 22-37-59.png

But the important thing to be noticed is, the amount of HTML and CSS we eliminated when compared to the flexbox layout or the table layout.

A clamp function:

If we want to include responsive layouts to our website, we are using media query CSS by changing the width of something based on the available space on the device or viewport.

For example, you might have an article that has a preferred width of 50%, but on small screens, you want to make it fixed at 200px or fixed it 800px on large screens. You can do that by writing some media queries that can apply responsiveness based on the viewport size.

Screenshot from 2021-05-01 23-06-18.png

The only problem with this is hard to maintain a lot of media queries when the project grows larger. But the good news is though we can have some CSS functions min, max, and clamp.

We could refactor this code to set the width of a clamped value that has a minimum of 200px, a maximum of 600px then a preferred value of 50%.

Screenshot from 2021-05-01 23-20-02.png

It will turn 30 lines of code into one so a lot of code reduction 😎️

Aspect Ratio:

If you ever had to code a responsive image or video that maintains a particular aspects ratio.

For example, If you want to embed a video with a 16x9 aspect ratio that requires some hack where you put 56.25% padding on the top then, give its child position absolute property.

Screenshot from 2021-05-01 23-30-50.png

Alternatively, we can use the aspect ratio property from the modern CSS. So, we are eliminating a lot of CSS code by adding one line instead of many.

Screenshot from 2021-05-01 23-35-07.png

Using Variables:

The most important part of writing clean CSS code is to make it more flexible so that refactoring should be very easy. A great way to achieve that is with CSS custom properties or variables.

For example, In the given piece of code, notice how we are using the same color value in multiple places; If we decide to change the color, we need to modify every line of code that references it.

Screenshot from 2021-05-01 23-43-27.png

A better approach is to define a global variable on the root selector, which can be referenced wherever it's needed, and now when you decide to change it, you have to modify one line of code.

Screenshot from 2021-05-01 23-48-14.png

Variables cascade everything else in CSS, which means you can overwrite them by redefining them somewhere inside the property.

Screenshot from 2021-05-01 23-51-46.png

Calculations using calc function:

CSS is not a programming language, but it does have the ability to run basic calculations using the calc function. It allows you to calculate a value with basic math, but the cool thing about it is you can combine different units.

Screenshot from 2021-05-02 00-04-16.png

We can also define an inline CSS variable for every element and can be accessed inside the CSS property.

Screenshot from 2021-05-02 00-11-39.png

State Management counter:

Did you know that CSS has a state management mechanism build into it that you can keep track of a running count in your CSS code without ever writing a single line of javascript code? 🤔️

For example, If you want to number headings in your Html, the regular way to do this is by manually adding numbers in the Html, but if you want to add a new heading you have to renumber everything manually.

A smarter approach would be a CSS counter, you can create a counter in a code using the counter-reset property, then increment it by counter-increment property. It will starts from 0 then add 1 to every h1 element in the DOM.

Screenshot from 2021-05-02 00-23-55.png

There are a lot of CSS tips, but I covered some of the most important ones. So which one is your favorite CSS tips 🤗️, and if you know any other CSS pro tips that you have used in day-to-day coding, please put them in the comments 👏️.

If you like the content, please share this article with your friends.

Thanks for reading!

Happy coding.

Pratik Sharma's photo

Came here for the awesome thumbnail you made. Stayed here for the emojis and the content. I didn't get the state management thing. Can you add an example?? So every h1 element will have a counter number. Like if I have 3 h1 element will it be like I have 1 h1 .... 2h1....3h1.... Or it will change the heading elements like ... h1 ....h2... h3?

Prasath Ravichandran's photo

Hi Pratik Sharma, Thank you for your support 😊 yes, you are correct,

For example: If you have 3 h1 elements the counter will be like 1 h1... 2h1... 3h1.

Use case: If you have 10 h1 elements and you put a counter number(1 to 10) at the starting of each heading. If you want to include a new heading between any of the elements, you have to manually enter a counter number again. But this counter-increment property will reset the numbers automatically.

Live Preview: codesandbox.io/embed/elated-water-505x2?fon..

Adrienne Tacke's photo

Nice! Flexbox is fantastic and it's what I usually default to since it makes styling so much easier for me. Also, today I learned about clamp! Thanks for sharing!

Prasath Ravichandran's photo

I am very glad that you have learned new CSS tips through my article. Thank you, for your support 😊