CSS in 2022

A quick note before you start. CSS is a very broad language and learning everything is not possible in the shortest amount of time. This blog is for you to know what to prioritize while learning CSS today.

Introduction

While learning CSS, most people tend to ignore the best features of CSS due to its learning curve and just focus just on how the webpage looks. While this is fine initially, but just think the code you wrote today, can that be modified or how easily can new css be added to elements or how readable the CSS file is. These questions are enough to answer how well you write css. These are some of the most basic and important features I have seen a beginner should know to write well-defined CSS.

CSS variables

h1 {
  color: #32f45e;
}
p {
  color: #27332f;
}

This type of declaration can be seen in a lot of CSS files. While this can be done for small webpages, but as the number of components increase, maintaining consistent theme accross the webpage becomes harder. This is where CSS variables come into play. Declare a variable in the :root pseudo element and now the variable can be used anywhere in the CSS file. This

1. improves code readability,
2. make code modular and
3. reduces the chances of error.

:root {
  /*
  Sample declaration 
  --varname: value;
  */
  --color-primary: black;
  --color-secondary: red;
}

CSS Display Property

CSS display property is the most important property to learn. Learning when to use block, flex and grid is a great understanding to have. There are other properties as well but there 3 are the primary ones.

display: block is used when you want a container to always start in a new line and occupy the entire width of the page.

display: flex is used when you want items to be arranged in the specified direction(row/column/row-reverse/column-reverse). Declaring something as flex will change the size of the component as viewport changes.

display: grid is used for creating 2d arrangements and complex layouts. Grids allow creating responsive 2D layouts in much compact code.

These 3 are the most widely-used properties in CSS. You can checkout examples and try them from here or you can refer to my Notion note.

Media Queries

While learning CSS this is the part most beginners ignore. It’s 2022, and as a web developer knowing how to make a website responsive is expected in general. Understanding breakpoints and writing media queries based on screen size is an expected skill to have.

If you are beginning to learn, learn from here.

CSS3 Media Queries - Examples

Comfortable with media query, breakpoint and created responsive website ? Proceed with this.

A Complete Guide to CSS Media Queries | CSS-Tricks

CSS Selectors

This is one of the first things we learn while learning CSS. If you have done CSS you have seen these:

/* ID selector */
#corn { 
    color: yellow;
}
/* class selector */
.salad {
    color: green;
}

Another example of this would be writing the below defined CSS types interchangeably:

div p {
    /* Styles here */
}

div > p {
    /* Styles here */
}

Knowing these selectors and their differences will help you write better CSS. Using selectors correctly can drastically reduce redundancy in CSS code. I have created my own Notion note for Flexbox, grid and selectors. It will be a good reference when you try to use the styles and forget something. The link to my Notion note is given below.

CSS Flexbox, Grid & Selectors