Lucas H.
Posted 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 (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,100vhfor example - The
max-width,730pxfor 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:rowis the default, which is handy for nav-bars, andcolumnfor 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
Posted on September 21, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
