5 CSS tips and tricks you don’t want to miss out on in 2021
Before talking about CSS trends in 2021, let me take you back to 1994 when the web is starting to be used as a platform for electronic publishing. However, one important part of a publishing platform is missing: There is no way to style documents.
Håkon Wium Lie, who was working along with Tim Berners-Lee (father of HTML) at CERN, saw the need for a style sheet language for the Web, and hence the CSS was originated!
We have come a long way and we can do outstanding things with CSS in 2021. I have curated a small list of concepts I think are interesting and useful to better understand and write CSS. I hope you’d like it.
1) :where() pseduo-class function
When you want to apply the same styling to multiple elements, your CSS might look something like this:
If you say to me, that does not look very readable! This is where :where() pseudo-class function comes to the rescue.
The
:where()CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
The equivalent CSS to the above example would look like this:
Say yes to :where() and say yes to clean CSS!
2) Conic gradients
CSS gradients let you display smooth transitions between two or more specified colors.
While most people already know about linear gradient and radial gradient, let’s talk about the new conical gradient.
The conical gradient can be achieved by using conic-gradient() CSS function.
The
conic-gradient()CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels.
Consider the following examples:
The output of the above CSS looks like this:
Isn’t that cool? We can create a complete chessboard just using just 1 CSS property.
The complete example can be found here.
3) Scroll Snap
Remember the Thanos snap in Avengers infinity war? It was epic, right?
But wait, I’ve got something better:
Scroll snapping allows you to define and restrict the boundaries of scroll viewport to certain locations or elements when the scroll has completed.
It is very useful when you want to drive the user’s attention to certain parts of your website. Plus, it helps you create cool scroll transitions.
Read more about scroll snapping here
4) Setting aspect ratio
Who doesn’t likes responsive designs! But it gets really tricky when you want your elements to resize in a specific proportion, i.e, width and height should grow and shrink maintaining a specific ratio.
Aspect ratio is a proportional relationship between width and height(commonly expressed as
width:height).
Before January 2021, maintaining aspect ratios were quite challenging. We use to add a parent container and an absolutely placed child container. One would then calculate the aspect ratio as a percentage to set as the padding-top. For example:
- 16:9 aspect ratio = 9 / 16 = 0.5625 =
padding-top: 56.25% - 1:1 aspect ratio = 1 / 1 = 1 =
padding-top: 100%
But with the new aspect-ratio property, setting up aspect ratios is bliss!
5) Scss variables and Mixins
While Scss variables and mixins are not new, it is still the best way to write elegant and structured CSS.
Imagine you have a large project with lots of styling all around the place, and your client comes up with a new theme for your application. It would be a nightmare to search and replace style values manually in your codebase.
You can make your life much easier by defining custom data containers, popularly known as variables!
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Scss uses the
$symbol to make something a variable.
While variables are used to store one piece of information, mixins can be used to store multiple pieces of information.
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
