# 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

```css
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.

```css
: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](https://css-tricks.com/almanac/properties/d/display/) or you can refer to my [Notion note](https://dr0nser.notion.site/CSS-Flexbox-Grid-Selectors-07e25aaf500d494792f83d2f15dc7c68).

## 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](https://www.w3schools.com/css/css3_mediaqueries_ex.asp)

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

[A Complete Guide to CSS Media Queries | CSS-Tricks](https://css-tricks.com/a-complete-guide-to-css-media-queries/)

## CSS Selectors

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

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

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

```css
div p {
	/* Styles here */
}
```

```css
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](https://dr0nser.notion.site/Cascading-Style-Sheets-CSS-07e25aaf500d494792f83d2f15dc7c68)