DEV Community

Breaking the CSS stigma: my step-by-step CSS cheat sheet.

Lucas H. on September 21, 2019

🔥 Don't forget to follow me on Twitter! Let's link up. If you like this article, feel free to follow me, I'll be pushing out even more content soon...
Collapse
 
seibmacdaniel profile image
Mac Daniel

I would add box-sizing:border-box; as one of the first things to declare, applicable to all divs. I find some people who are just starting out in CSS constantly frustrated by widths in nested situations.

Collapse
 
chfrom77 profile image
Christian H From

Thanks for this, Lucas! CSS is one of those things that quickly get bloated for me, so having some sort of systematic approach based on a mock-up really helps. Have you looked into Object Oriented CSS: smashingmagazine.com/2011/12/an-in... ...I think there are many similar frameworks...

Collapse
 
lucashogie profile image
Lucas H.

Happy to help!! Glad you like it, that's really good to hear.

I've not heard of OOCSS yet, I'll look into it!

Collapse
 
tuljmdev profile image
tuljmdev

Thanks! These tips answered a few questions I was already contemplating for my next session working on my portfolio site!

Collapse
 
lucashogie profile image
Lucas H.

Very happy to help :)

What questions did I answer && what do you think could be improved? 🙌

Collapse
 
tuljmdev profile image
tuljmdev

Primarily, I liked the short list of styles to implement at higher levels with wide reaching effects. In my previous experience, formatting and placement have always been the biggest nightmares of CSS, so I'm a big fan of keeping it as simple as possible. This seems like a great starting point with some additional tips and resources on where to go once that is achieved.

Thread Thread
 
lucashogie profile image
Lucas H.

Thank you so much for the compliment, the list-style instruction is really what I go for to make it really easy and fast to read and/or scan 👍

Collapse
 
oenonono profile image
Junk

Why shouldn't you think about styling as much as other aspects of the UI?

Collapse
 
lucashogie profile image
Lucas H. • Edited

Thank you for your question! I meant that I often go into styling my web-app without a proper plan of attack. This often leaves me making dumb organizational mistakes or getting confused at what I was really trying to do. That's why I wrote this cheat sheet.

Collapse
 
mmaitoza profile image
Michael Maitoza

Excellent cheat sheet Lucas. This answered a few things I was wondering about flexbox. Thanks.

Collapse
 
lucashogie profile image
Lucas H.

Super happy to hear that!!!

Collapse
 
begrafx profile image
BEGRAFX

Excellent. And I appreciate the closing point: Don't forget to learn the basics!

Collapse
 
lucashogie profile image
Lucas H.

I saw an interesting debate about that earlier. People learn Bootstrap before CSS and that's not a healthy trend. Glad you liked it, that's really good to hear!

Collapse
 
zuhriutama profile image
Ahmad Zuhri Utama

Hi

Good article. I'll try to practice this for help me when frontend programmer cannot do it immediately.

Collapse
 
lucashogie profile image
Lucas H.

Hope it helps! :)

Collapse
 
hdrabs profile image
Haider Abbas

This article is my thoughts put into words for what I want to/have been teaching to my junior colleagues. Very well written, well though out. A must read for beginners and up.