Hello everyone, I am back and continue with part 18 of the series about some CSS tricks that Frontend itself may not even know.

Let’s get started!

1. Reduce the size of the code with CSS variables

I have previously mentioned the powerful features of CSS custom properties (aka CSS variables).

1. Discover the benefits of CSS Variables .
2. Some CSS tricks that Frontend itself may not know (Part 8) .

Today I discovered another good tip when using CSS variables that is to reduce many lines of code repetition, by changing the value of the variable.

The way it works is extremely beneficial for devs, whereas CSS preprocessors like SASS or LESS do not.

I will demonstrate its flexibility through an example of Grid System, more specifically Grid of Bootstrap everyone!

Here’s the way we often write (or often think):

(I’m just focusing on the main attributes.)

You see clearly, if you add some type of modifier for the grid types, the CSS code repeats quite a lot.

And this is how CSS variables overcome this drawback:

Awesome yet you! The CSS code has been greatly reduced.

In addition to white-space are other values, each value will be applied appropriately to solve different problems.

Browser Support: YOU ARE MIND

white-space is not a new attribute anymore, you should feel free to use it in browsers!

https://caniuse.com/#search=white-space

Read more

• https://dev.to/arbaoui_mehdi/css-white-space-property-explained-4bh5
• https://alligator.io/css/white-space-property/
• https://css-tricks.com/almanac/properties/w/whitespace/
• https://meyerweb.com/eric/css/tests/white-space.html

3. Don’t code like rua..Code like ri is better nè !!!

In the previous share, I also introduced you to some tips to help CSS Best Practices code like:

• Make the most out of shorthand spelling of some attributes
• Font-weight: 700 should be used rather than font-weight: bold

Today I will continue to discover 1 more Best Practices!

1. There are selectors it is always right, so you do not need to write extra tags, your selectors are not wrong.

• The src attribute exists only in the img tag.
• The standard HTML structure, the direct sub-tag of the ul must always be li , if the above CSS is wrong, then you are wrong in HTML. .

2. Change the value to English type, the code read is understood immediately!

• Replace 2n + 1 with odd , do you find it easier to understand? odd is referring to odd -order child elements such as 1 , 3 , 5 . Besides, there is even an even order like 2 , 4 , 6 .
• Replace 360deg with 1turn (1 round). There you see it? Switch to English and read and understand right away. No need to imagine how many degrees it rotated .

Browser Support: YOU ARE MIND

The selectors and values ​​mentioned above work well in all browsers.

summary

Hope everyone adds CSS skills with these 3 tips.

If you like it, Upvote, if you find it interesting, Clip this post! ^^

P / s: Title sentence view only offline! Frontend brothers and sisters, please stop slashing me!