Breaking the CSS stigma: my step-by-step CSS cheat sheet.
Tags: css, tutorial, beginners, webdev
Published: 2019-09-21 12:14:41

*[🔥 Don't forget to follow me on Twitter! Let's link up.](https://twitter.com/lucashogie)* 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](https://css-tricks.com/almanac/selectors/r/root/), 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](https://bulma.io/documentation/overview/modular/).

- 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](https://caniuse.com/) 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](https://dev.to/lkopacz/beginning-to-demystify-aria-5bi5).
- **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](https://medium.com/@zreitano/on-behalf-of-hims-patients-thank-you-for-copying-ro-aba99193d231) (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](https://dev.to/neshaz/css-animation-how-to-make-things-move-b02) - 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](https://getbootstrap.com), [TailwindCSS](https://tailwindcss.com), [Bulma](https://bulma.io/), 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](https://serfo.com/p/css-gradients/), and [blobs](https://www.blobmaker.app/)
- [CSSreference](https://cssreference.io/) and [HTMLreference](https://htmlreference.io/)