🔥 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
Top comments (16)
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.
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...
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!
Thanks! These tips answered a few questions I was already contemplating for my next session working on my portfolio site!
Very happy to help :)
What questions did I answer && what do you think could be improved? 🙌
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.
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 👍
Why shouldn't you think about styling as much as other aspects of the UI?
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.
Excellent cheat sheet Lucas. This answered a few things I was wondering about flexbox. Thanks.
Super happy to hear that!!!
Excellent. And I appreciate the closing point: Don't forget to learn the basics!
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!
Hi
Good article. I'll try to practice this for help me when frontend programmer cannot do it immediately.
Hope it helps! :)
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.