CSS Learning Roadmap
Front-end development is not only about being a JS coder. Our main strength, as front-end developers, is our ability to be in charge of the whole pipeline that a feature goes through — from the design in Zeplin to production deployment and monitoring. Needless to say, being able to handle proper styling of a UI element is a vital part of that pipeline.
This article is another take on setting a roadmap and reference points for a deeper and more fluent understanding of CSS. Hopefully, these resources will also help you gain practical skills to increase the quality of your project’s UI. We will start off with fundamentals (syntax, selectors, floats, box model, etc) and then move to architecture and more advanced topics.
CSS Basics
This section has everything you need to learn CSS from the ground up and be confident in your knowledge in your day-to-day routine.
“How to learn CSS” is a layout of basic but very important parts of CSS, to give you a structural understanding of the CSS universe. The most fundamental parts are lightly covered in the article. The title speaks for itself.
“The CSS Pocket Guide” is the number one book I recommend if you want to learn CSS fundamentals once and for all and you are more into reading books rather than reading articles. The book, however, lacks information about the new CSS features.
Marksheet’s CSS tutorial is a very lightweight and interactive way to learn or revise the basics of CSS.
MDN rocks as always! They managed to create a structured intro to CSS with links to all the nifty documentation pages.
In Chris Coyier’s article “Beginner Concepts: How CSS Selectors Work,” you can find the comparison of CSS selectors and their priorities.
Coming to CSS-tricks again, “A Complete Guide to Flexbox” has almost everything you need to know to claim that “you know how to flexbox.” You might also want to play around with this nice tool afterward.
Ever wondered what a specific CSS property does? Using cssreference.io you can find all of them explained, accompanied with visual examples. Worth bookmarking.
cssvalues.com is a super quick reference to properties and their values. Also worth bookmarking.
Everything that should go to the HTML’s <head> before your app hits production. Just gethead.
Methodologies and architecture
Knowing what CSS properties are and what they do is a must. Writing quality, scalable and maintainable CSS is just as important. This section contains links to practices and methodologies that ensure you will get blessed and not cursed by the next developer working on stylesheets you wrote.
- Idiomatic CSS
- 8 simple rules for a robust, scalable CSS architecture
- CSS code guidelines
- Some more CSS guidelines
- MaintainableCSS
- Atomic design
- The incredible BEM
Advanced
Here are a couple of links that will feed your hunger for more CSS!
In the article “Understanding CSS Layout And The Block Formatting Context”
you can find the old and the new methods of understanding and working with block formatting contexts (I had no idea about what BFC was before stumbling upon this article).
Our friends at Google have a great writeup on how all this comes together to form pixels on the screen and how to make sure our websites stay performant. Make sure to check that out for useful CSS stuff and more.
If you would ever want to look up something CSS-related in the spec that defines it, this index is your best bet.
To be updated…
Check out our open roles at https://sflpro.com/job/.
Read More:
