Original Tweet From @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:
- Follow me @VincasStonys
- Like & retweet 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
Top comments (0)