Ask HN: Best book or resource to REALLY grasp CSS?
Background: I was primarily a backend developer but in the last 3-4 years I do full-stack development, first with angular now with vuejs on the frontend. I always use CSS "framework" on the frontend like Bootstrap and usually buy some theme when I start a project and start from there. I was always able to get the look that I wanted when I changed stuff in CSS but it was always with many trials and errors, usually trying stuff in the browsers inspect window until I get things right. I am sick of that so I would finally really like to properly learn CSS.
The end result that I like to achieve is that I would be able to not use CSS framework (maybe just something like tailwind css) and easily create and maintain responsive page designs. I am primarily interested in pure CSS stuff, not how to organize it, that is a broader topic especially if you use SPA framework, pre/post processors, modules, etc.
10 comments
[ 2.9 ms ] story [ 35.9 ms ] threadFor structuring CSS (its cascading nature requires a lot of discipline esp. on larger projects) I recommend looking into BEM and SMACSS approaches.
If you choose to use CSS for layout, I recommend Susy grids v.2 — look up the Youtube of videos creating different responsive layouts with it. Really fantastic and a time saver. If you’re designing only for the latest browsers, look into CSS grid and flex box.
I recommend using the SCSS preprocessor — dry your code with variables and mixins, simplify complex calculations, manipulate color easily, incorporate a layout calculation framework like Susy etc.
CSS is powerful, complex and has variable compatibility across browsers. This means a lot of attention to detail and a good amount of hours solving edge cases.
Good luck!
First off, do NOT attempt to learn using a framework. They're complicated and tend to make a lot of compromises in order to satisfy everyone.
Start with CSS1. This supports basic font selection and sizing, bold and italics; margins, padding, borders, and backgrounds. You can't do much in terms of positioning, but the simplicity will help you understand crucial basic concepts: the cascade and the difference between inline and block elements.
Next, learn CSS2, which adds more selectors, positioning and display properties, floats, and a more sophisticated box model. You'll know you've mastered this when you can produce 2-3 different variations of what used to be called the "Holy Grail" layout.
The holy grail layout is a header, 3 columns, and a footer. The columns are ordered center, left, right in HTML markup. Each column has a different background color or pattern, and they all stretch the full height of the layout, no matter how much content is in them or which one has the longest content. It does not have to be responsive, but bonus points if it is.
Responsive layouts can be created with CSS2, and knowing how will mean you've really mastered the concepts, but CSS3 has better features to support more flexible and sophisticated ones.
Smashing Magazine used to be a pretty good resource for CSS2 tutorials, and I bet you can still dig them up with some determined googling. If you want to see what CSS2 is capable of, check out the CSS Zen Garden.
Finally, learn one CSS3+ concept at a time: yet more selectors; generated content; more sophisticated backgrounds and borders; alternative box models; columns; grids; flexbox. Each of these concepts can take a little while to grasp, so they're best approached independently.
I'm not aware of a good source for tutorials on CSS3+ (maybe try W3Schools?), but MDN and CSS Tricks are my go-to references.
Although I did not finish it, I started it with regards to learn CSS properly (like you) and started to grasp some basic concepts (could not finish it though, due to procastrination). Honestly, I think the books delivers , maybe you could use it!
CSS doesn't require a huge amount of conceptual knowledge, but rather pure memorization / practice of many techniques.
- Specificity rules: https://www.smashingmagazine.com/2007/07/css-specificity-thi...
- SCSS: https://sass-lang.com/
- BEM / SMACSS architecture - https://smacss.com/ , http://getbem.com/naming/
- 30 selectors must memorize https://code.tutsplus.com/tutorials/the-30-css-selectors-you...
I went through lynda.com's 3 video tutorials on CSS, and a few their SCSS/SASS videos. I don't know if this is the best way to learn this, but it did go through all the fundamentals. Wesbos had a few good videos on javascript30 related to CSS (such as root variables). Most of what I learned through CSS is writing my own themes to popular notetaking tools, and modifying wordpress themes
I personaly prefer to use css-tricks.com and smashingmagazine. Books aren't a great resource for this topic IMO, we are talking about CSS here. There are plenty of good articles on nicely made sites.
Copying things from dribbble is what I see what most advanced CSS developers do
People will design all sorts of stuff that requires some creative problem solving with the tools CSS gives you. If I see something interesting on a site, I'll open inspector and see how they did it. That's usually how I learn new tricks. That and by experimenting on my own. As far as not having to use trial and error, that just takes practice. I'll go for 3 years making sites that all look the same, then tastes change and I have to go through trial and error again figuring out the best way to do something new until I've done it so many times I don't even need to look at the screen when coding anymore.
Most of what I've seen is making CSS way more complex than it needs to be - part of it is thanks to years of general browser incompatibilities causing people to put in "dont go there" warnings or for the sake of compatibility of X stuff. Second would be various tools and frameworks that may have been partially implemented in some other peoples' teaching of CSS.
I would say these two books cleared away a lot of the muck for me:
Stylin' with CSS by Charles Wyke-Smith - very concise.
I also found bits in Handcrafed CCS by Dan Cederholm to be good as it worked on either bad styling or no styling and how to clean up stuff or achieve a good effect CSS wise.
After that a lot of Googling, examining pages that worked, and reading how to do x, y or z as well as just trying stuff out myself till I get it right.