20 CSS Rules You Should Never Forget. - VincasStonys

Original Tweet From @VincasStonys

Vincas Stonys

@vincasstonys

There are 259 CSS properties. To be productive, you only need to know 20.

Here's the list of CSS rules you should remember, and how to derive the rest.

A thread 🧵

06:51 AM - 05 Oct 2022

There are 259 CSS properties. To be productive, you only need to know 20.

Here's the list of CSS rules you should remember, and how to derive the rest.

A thread 🧵

1/. color

Changes the text color. Prefix with background or border to change the respective color. It will cover 95% of your coloring needs.

Here's how to use them:

2/. width

3/. height

Use to change the size of the element. Can be a fixed value (px, em, rem) or a percentage value.

Here's how:

4/. padding

5/. margin

Use to control free space inside and around the element.
Suffix with top/bottom/right/left for more granular control.
The shorthand syntax follows a clockwise direction starting from the top.

Here's an example:

AdSpace Here!!

6/. border

Use a shorthand: "border: 1px solid red;"

It combines the properties: border-width -> border-style -> border-color.

Often you don't need fancy borders, so just remember that shorthand and tweak it to your needs.

Here it is in code:

7/. display

Used to hide the elements or change to flexbox model.

Here's what to remember:

8/. flex

9/. flex-direction

10/. align-items

11/. justify-content

They're all necessary flexbox properties. Learn them in-depth from @NikkiSiapno.

12/. font

Shorthand is long and confusing. But the properties you will use the most are font-family and font-size. Remember it's font, not text.

AdSpace Here!!

13/. position

Relative - use on the parent of "absolute" element.
Absolute - overlay on content, specifying coordinates in "relative" parent.
Fixed - overlay on top, relative to the browser window.

14-17. top / left / right / bottom

Coordinates for fixed and absolute elements.

18/. z-index

To control which elements will be on top when their boxes overlap. Higher number - higher priority. Often used with absolute or fixed elements.

19/. overflow

Most commonly used to enable scrolling inside of the element by specifying overflow: auto;

Sometimes combined with overflow: hidden; on the parent.

Can control the horizontal/vertical direction by suffixing with x/y.

20/. box-sizing

Controls what width/height mean - content size or box size.

Just set box-sizing: border-box; on all elements to prevent frustration.

If you want to understand this, here's an in-depth explanation from @ishratUmar18

@ishratUmar18 The 80/20 rule applies to CSS.

This guide is simplified and isn't a complete list of available properties/values. But that's the point! You don't need to know everything to be efficient.

If you enjoyed and want more of these:

1. Follow me @VincasStonys
2. Like & retweet

   

   Vincas Stonys

   @vincasstonys

   

   There are 259 CSS properties. To be productive, you only need to know 20.
   
   Here's the list of CSS rules you should remember, and how to derive the rest.
   
   A thread 🧵

   06:51 AM - 05 Oct 2022

   

Click Here For More Posts Like This https://www.knowledge-twitter.com