
Ask HN: Best book or resource to REALLY grasp CSS? - ssijak
What was the book or resource that really made you grasp CSS in a way that you proactively know what will happen when you change random position or display attributes on elements and that enabled you to design pages without too much trial and error?<p>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 &quot;framework&quot; 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.<p>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&#x2F;post processors, modules, etc.
======
cimmanom
I'm going to recommend what may be a controversial approach: learn CSS in a
historical order.

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.

------
andrei_says_
I recommend www.css-tricks.com as a high-quality learning resource.

For 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!

------
Kagerjay
I have a solid grasp of CSS to debug anything that comes up, and just enough
knowledge to build a small bootstrap-like framework. However, there are some
advanced concepts I do not yet understand with related to animations /
mathmatical / sass based layouts (the really interesting things in codepen). I
don't fully yet understand all the things you can do with hybrid javascript +
css related to animations

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...](https://www.smashingmagazine.com/2007/07/css-specificity-
things-you-should-know/)

\- SCSS: [https://sass-lang.com/](https://sass-lang.com/)

\- BEM / SMACSS architecture - [https://smacss.com/](https://smacss.com/) ,
[http://getbem.com/naming/](http://getbem.com/naming/)

\- 30 selectors must memorize [https://code.tutsplus.com/tutorials/the-30-css-
selectors-you...](https://code.tutsplus.com/tutorials/the-30-css-selectors-
you-must-memorize--net-16048)

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

------
LarryMade2
As another primarily back-end developer, of all the programming and scripting
stuff CSS is truly the most brain damaged.

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.

------
mrdependable
There are a lot of "gotchas" with CSS. The only thing I used books for was to
read about how other people organized their stylesheets. Other than that,
doing it day in and day out for years was how I ended up learning.

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.

------
m_fayer
I'm in exactly your boat, also interested in an answer. I'm amazed how far
I've gotten with a fuzzy understanding of both fundamentals and details, and
trial and error. But I'm not a muddle-through engineer anywhere else, and this
slow half-blind process is frustrating. If it makes you feel any better
though, it seems there's a lot of us out there, something about css encourages
many to make do with muddling through.

------
hackermailman
I read the PhD thesis of one of the CSS orig designers
[https://www.wiumlie.no/2006/phd/](https://www.wiumlie.no/2006/phd/) as a
crash course, then picked through the various specifications. There's many
surveys on CSS Preprocessors on Google Scholar if interested too.

------
__exit__
There is this book called CSS The Missing Manual, by David McFarland.

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!

------
afarrell
As a backend dev moving to the frontend, I found it super useful to work
through [http://book.mixu.net/css/](http://book.mixu.net/css/) taking notes
and then to make spaced repetition flastcards in Anki

------
ystrdytmrrw
I found that going to [http://dribble.com/](http://dribble.com/) and trying to
copy some of the designs was the best approach. You'll only learn with
practice.

