loading...

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

lucashogie profile image Lucas H. ・Updated on ・4 min read

πŸ”₯ 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 (at least one article a week)!

CSS is not hard but can be incredibly frustrating at times; it's often hard to find the 'correct' methodology for what you're trying to get done. To me, it often feels like I shouldn't think about styling that much, but using a specific methodology has proven to be pretty useful. There are a few steps I would recommend following, and a lot of resources that I'm sure you'll find useful.

I hope this article helps you organize your step-by-step process for writing good CSS.

Step one: preparation, body and :root 🌟

Don't know what :root is? I didn't either. Check out this article from CSS-tricks, they explain it very well.
Step one is good to prepare your CSS styling by setting anything you want in the <body> element and :root selector. Some things you might want to style in these:

  • Background color (background-color)
  • Document-wide padding (padding)
  • Fonts (font-family, font-style, font-size)

Note: defining font-size in :root allows you to set the standard for em measurements (so you can set that to 16px and 1em will be 16px guaranteed)

Step two: container πŸ’­

The container class should be the div in which I store the entirety of the app. In here, I define:

  • The min-height, 100vh for example
  • The max-width, 730px for example.
  • The width of the app, usually 100%.
  • Whether I want to display it with flexbox or not: display: flex; (why not? :D)
  • The flex-direction: row is the default, which is handy for nav-bars, and column for top-to-bottom applications
  • How to align things horizontally: align-items
  • How to align things vertically: justify-content

Step three: more containersπŸ’»

Inside of your parent div, put more divs for the app itself. Want to use a grid-system that doesn't hurt your brain? Check out bulma.

  • A differentiating background color if you want it to stand out
  • The width within the container, e.g. 100%
  • The maximum width your app can take within the container, can be done with calc(100% - {{your amount of pixels}} ) for example!
  • The border and/or drop-shadow (box-shadow, border, border-radius)
  • More flexbox: how do you want to align things internally, inside of the container?
  • Center things inside of the container (because it's aligned left inside of the now-centered container, most likely): align-items: center;

Last step, step four: the elements

Before this step, it has been mostly following along each step and you can style the basis easily. Now, you'll need to take the wheel. I can't decide what elements you have inside of your app, but I can give you some best practices:

  • Make sure to practice very clear styling
  • Your CSS may not work on every browser!! Check out this amazing application if you're wondering what you can and cannot use with CSS.
  • ARIA attributes are nice for visually impaired people (that use screen readers). Check out a great article on that here.
  • Steal! Using CSSscan is super useful for learning CSS. If you see a form that looks amazing, don't be afraid to look at the CSS and find out how to do it yourself. Take the CSS you like, tinker with it, make it your own, and be proud of the fact you just saved yourself time. Don't go overboard, though (genuinely fun article, go read it!)
  • Animation is a w e s o m e, and clarifies things if you don't overuse it. So use it! Here's an article on that - though I'll also be writing a few on CSS animation too, with some specific uses for fun.
  • Frameworks are fun, but don't forget to learn the basics! It's easy to get caught up in using things like Bootstrap, TailwindCSS, Bulma, or any other framework that's buzzing right now, but learning how to style yourself is important. These frameworks are temporary. Actual skill in styling and design is forever, and will forever benefit you. Also, you look super cool when someone looks up what framework you're using and it turns out you're not using one πŸ˜Žβ›±
  • Gradients, and blobs
  • CSSreference and HTMLreference

homepage

Conclusion πŸ™Œ

This resource cheat sheet is partially based on Garth Braithwaite's Style an Application from Start to Finish course on Egghead.io

I like to write things. I'm thinking of starting a newsletter of my favorite links of the week. If you're curious & love interesting and well-written articles about developer things, please pre-sign up here! πŸ’–

Discussion

pic
Editor guide
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. Author

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. Author

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. Author

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. Author

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. Author

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. Author

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. Author

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.