I am a backend engineer and recently had to improve my CSS to work on a side project. I highly recommend book "CSS in Depth" by Keith J Grant - it helped me to build a solid foundation.
If you live somewhere where this price is too expensive (south America or some SEA country for example) Josh offers to send him an email and he will give discount, if he agrees that it is fair.
Edit: adding source for my claim.
Go to the website of the course that was already posted here and search for “Purchasing Power Parity”
I can confirm and share additional details. Located in India, I automatically see a message that says I can choose a purchasing power parity discount if I wish to. The discount is 70%, but it applies only to the most expensive package (bringing it down from $349 to $105). The lower tier packages are marked as not eligible for such pricing. It clearly says that the access will work only in India (I’m guessing this whole thing is based on IP addresses).
I don’t yet know if I’m interested enough in this course, but I really appreciate content authors who consider pricing variations in different locations. Bonus if they offer to help people in tough situations (even in countries where PPP may be higher).
I took this course and it really is superb. Josh builds mental models like media queries as IF statements and compares selector specificity to prototypal inheritance. It's mentally really sticky stuff. He also goes in depth into the different layout modes(flow, position, flex, grid) and ensures you know the differences between them, when to use one over the other, in which cases one overrides the other, etc. If when youre building something you go through every combination of flex, grid, & position and not really sure which one is going to get you closer to the layout you want, these exercises will build your confidence. He breaks down lots of edge cases and quirks that go into CSS that Id consider "mastery" level that only someone who dreams in CSS would know off the top of their head.
I also am taking that course (1/3 completed so far, it’s a long course) and have some things to say. Not affiliated in any way, my company paid for it.
I think it doesn’t teach anything you couldn’t learn yourself by reading the spec or css-tricks etc, however there’s just no way I would have bothered reading those things myself as in depth as I am going with the course. There’s definitely some information in the course that I don’t feel is useful, and I already knew quite a lot about css so most of it is familiar, but I still learn important things every time I sit down and go through a module. And I love the interactivity and actual practical challenges included.
So overall I give it an 8/10, and would recommend to anyone working (or who aspires to work) on the frontend.
Is it worth $350? If you’re on an average dev salary then yes, if you’re in school or not exactly floating in money, then I’d say stick to just reading free content online or making things you enjoy and learn by doing.
I second charesjrdan's point. If money isn't a huge factor for you and it's a course you're excited enough to pursue then go for it.
The course isn't necessary however. Reading through MDN docs in addition to Josh W Comeau's blog should get you 90% of the way there, if not all the way there.
Just echoing the other users. It’s definitely great and the community that comes with it is good, but the value prop it’s asking for, particularly since it’s attempting to charge a college course, you can be fine through trial by fire. A meetup, or even a proper discord can give you similar value.
The article seems to focus on what is and isn't good to read. I'd say, don't focus on reading at all, focus on building. Decide to build something that'll need some CSS, and search and read and try things in pursuit of the goal of getting that thing working right. It's more interesting and easier to remember things that you've actually used, or at least tried and decided not to use, than to just read about 50 things that you might never use at all.
I've always found value in at least scanning some articles and books for general overview of what is possible. Many dev get to a point where they learn a method and abuse it. It's the method they know and have never been exposed to an alternative. They found something that solves the problem sorta so why go look for something else.
While reading a lot of articles and books gives you a wider view, you don't have to memorize but as the article says, know it exists.
> You are basically doing the same using another syntax…
You seem to be thinking of Tailwind as just syntactic sugar. If that's your lens and you're not leveraging its strengths as a framework, then yes — you might as well use raw CSS.
I do thing that it's a bit more than replacing the style attribute with the class attribute using a billion classes and css rules that needs to be removed later on, but not much more. You need to know a lot of CSS anyway to understand what tailwind is doing.
Raw css is not the perfect solution either, I personnally prefer SCSS but I hope to see better solutions.
You really can't avoid CSS unless you use turgid, opinionated and increasingly out-of-date stuff like Bootstrap and it's ilk.
If you just want to be able to execute your will intuitively, it's much better to learn "enough" modern CSS and stick to modern browsers.
Now with CSS Grid for layout it's so much less frustrating than just having Flexbox, and a world away from the dumpster-fire that was Floats (and before that, html tables).
I agree, for all functional layouting (not text) grid gives you so much for so few. You can spend a year trying various float tricks and get nowhere, or napkin write a grid layout and get going in 5 minutes.
Css classes will complicate the css it can for example become hard to see what takes precedence when you mix classes and element. And it doesnt help that CSS is also has significant white space as in .foo.bar vs .foo .bar
So by practicing withot classes you will find that classes are rarely needed and in turn all your CSS get more simple - as long as you understand specifically. And you will also start to appreciate semantic HTML, and hopefully replace some of the divs with the appropriate semantic element!
I couldn’t agree more, and the hilarious thing is that I have spent much of the last few months doing exactly this. I’m writing yet another static site generator so by definition it must use classless HTML as the output. I am greatly enjoying the challenge of preserving semantic information while also making the output attractive. Thanks for the clarification!
Not just more specific rules, ones that just come later in source order too (with an identical specificity).
Oh, and more "important" rules too. "!important" overrides everything. Well, except more specific instances of !important, or instances of !important with the same specificity but later in source order.
Specificity is easy, the amount of specificity a selector has is measured using four different values represented by four single digits in four columns. (Of course, a single ID will override a thousand nested class selectors.)
And that's ignoring the origin of the rule (author, user, or user agent stylesheet).
I would recommend learning by doing. Don't waste time reading a book - just get out there and do things.
Top tips for someone starting out: learn the box model, then look at flexbox or grid. MDN is pretty much all you will need in terms of reference and pared-down examples
Totally this ^^^. I still battle with CSS. I have no love for it but the best way I've found to approach it is to have some idea of what I want to achieve visually and work from there. Almost everything one would seek to achieve has been done by $someone and is out there on the internet. Steal it! Sometimes it's blog posts, sometimes I just scrape other sites (modern browser really help here). But yup, grid, box, floats. MDN rocks.
Speaking of battles, I’ve liked trying CSS Battle’s challenges. Kevin Powell and some others have YouTube videos where they compete but it’s not really that competitive.
Don’t worry about minimizing the number of characters, try to match the challenges 100% with just enough HTML and just enough CSS rules and properties to be elegant.
Somewhere on the continuum between "learn by doing" and "learn by studying", the truth lies.
I mostly learned CSS by happenstance "doing" and have been able to do a fair bit, but I didn't really understand selectors until I went through a book on CSS.
There is a good MDN page on CSS selectors that takes about 5 minutes to read. Sorry you wasted time reading a whole book! You can't get that time back.
That page is actually part of an MDN module, which is sort of like a book. I actually considered going through that MDN module methodically, but ultimately chose a book I thought was more suitable for my needs.
For me, developing a sense of mastery over selectors meant studying all their variations and practicing with all of them. I also had to understand that "selectors" were a thing in the first place — a coherent and scope-limited topic that I could study and master. I didn't really get that from all of my CSS practice — the book gave me an agenda I wasn't able to develop on my own.
> Sorry you wasted time reading a whole book! You can't get that time back.
It's not like it was an entire book on selectors. I don't need that time back — it was productive, and I learned a lot about many aspects of CSS.
Of course, it would have been less productive if I had not
already accumulated a lot of knowledge via the "learn by doing" method. I'm certainly not opposed to that... it's jarring to see someone so adamantly opposed to books.
(For the curious, the book was Architecting CSS by Martine and Michael Dowden. It's not really a beginner book. I chose it because I needed to understand how to organize CSS in large projects to get more predictable behavior and reduce time spent on maintenance and debugging).
Even with years of experience, probably the fastest way to debug tricky CSS is to disable all even close-to-applicable rules, and re-enable piece by piece until you find the culprit.
The source of web sites that have good design. Use developer mode on a browser. You can edit their CSS live and see the results. You can change the viewport and see how it renders on mobile. You can figure out what's using JS and you'll come to your own conclusions on whether that's the right way to do things.
While you're reading, start building things from scratch. MDN is a great resource if something doesn't make sense.
It even helps to just study frameworks’ documentation. Tailwind and Foundation/Bootstrap are both great ones that approach CSS through different opinionated structures.
I found this particular article instrumental in building my understanding of CSS's flexbox feature, which largely replaces decades worth of ugly, nasty positioning hacks with a handful of simple definitions:
Beyond that, the only advice I can give when starting out is to avoid inline "style=" attributes like the plague, and figure out how you want to organize your elements, styles, and classes. This is the trickiest part to get a feel for, and there's no substitute for practice. Frameworks like bootstrap and semantic ui make for especially good starting points, giving you a collection of opt-in helper classes for the basics, letting you focus on adding whatever custom stuff you need for your site without implementing a ton of extra boilerplate. You don't need to use them, but they can help you get a v0.96 built very quickly during your prototype stage, and they're battle-hardened enough to be used in the wild if you decide you like their opinions.
I only started feeling a sense of actually understanding CSS (as opposed to working on it based on acquired intuition) when I started reading the official specs. I think that most other material is an abstraction over those that usually doesn’t explain the broader context surrounding a feature or its edge cases / interactions with other features. For example here’s the spec on positioning: https://www.w3.org/TR/css-position-3/
I’ve found directly useful information in specs that was not commonly pointed out in tutorials/stack overflow/etc when discussing those features (not remembering a specific example right now unfortunately). Can say the same for JavaScript.
I think in general when learning about an API it’s best for understanding to read primary sources. And thankfully the W3C specs are quite good documents and not too inaccessible in my opinion.
The movie industry took this very seriously. They got Norway to raid the home and prosecute the one known author. Hosting a file with the name DeCSS led to copyright infringement complaints.
So some wise guy wrote another app also called DeCSS that had the sole purpose of removing Cascading Stylesheet references from an HTML file. It became one of the most popular hosted applications for a while.
I also remember. The previous generation DRM tool (macrovision) only needed a simple ~5 dollar filter to defeat. You could buy aftermarket boxes that would strip it in-line, plug and play style, for about 10-20 dollars in the early 90s.
Thankfully for the rest of us, the inevitable failure of all rent-seekers is that rent-seekers don't tend to be very smart / innovative (by definition, I suppose).
Writing modes, box-model, margin, padding, positioning (relative/absolute), flexbox, grid, media queries and units (px, %, rem, em).
I've tried following the blogs mentioned in the past but it wasn't really worth the bother. I don't really care about CSS beyond the need to use it to solve problems - and to do so with confidence that I know what I'm doing.
That's the most important thing in CSS, to really understand the fundamentals so you're not frustrated or in a state of trial and error. Seen too many devs who work this way.
Fixing annoyances of highly-obfuscated Google+ sourc using Developer Tools under Chrome and (my strong preference) Firefox, a style-manager extension (Stylus), the W3C documentation, Mozilla's web dev discussions, and Stack Exchange and Reddit discussions did the trick for me.
(Given my recent adoption of a B&W e-ink device, I'd either reverse my preference for off-white / off-black for straight white/black, or use @media queries to probe for device colour depth. On balance, I'd probably opt for the first, simpler option. Getting font-size correct for the reader, line-lengths to a readable width, and margins such that text does not run into the gutters is really the principle objective.)
Makes sense in general. However there's a geat deal of expectations related to the intended look. These expectations are formed by the current looks of the popular sites, which may be built on frameworks. So trying to achieve such outcomes from scratch would be quite a lengthy journey.
For a practical way to learn CSS, perhaps a set of simple styling objectives should be sufficient in order to understand the mechanics of CSS. I'm not sure if there's any value in memorizing the myriad of tweakable props or "the tricks" and browser specifics.
I agree, no need or even possibility to build a football stadium to learn construction. Fix that screw holding the radiator. Maybe make a shelf out of wood. If you are brave maybe construction a patio from scratch. I think people don't realise how CSS and tech in general is about fiddling with things. And literature is becoming out dated at a faster pace than ever. So I would rather warn against "good" reads rather than recommend that path.
My rant about CSS. There is nothing like "compiler error messages" for CSS. The best we have is "inspect" in browsers. It shows the final state of browser has done, not the intermediate "why" or "how" part of it. For example, we will know that an image overflows a div, but browser won't tell why.
The problem is almost never that the CSS you wrote has a syntax error.
The problem is almost always the CSS with no syntax errors you wrote isn't doing what you wanted it to do. The browser doesn't know what you wanted it to do so it can't help you.
That's obviously true, the browser just blindly interprets the rules. However, sometimes spec changes or solidifies in a way that can break existing code so there are other cases to consider.
There's also tooling to catch these errors if it really matters.
Firefox's developer tools shows a warning against CSS properties that will not function as intended (i.e. flex properties on a non-flex container). It can be quite helpful for debugging unexpected behaviour.
In Firefox (not sure about the others), they do give some info on some errors, such as what might be overriding a rule (other rules or not an appropriate display type or something) or some invalid property or value. Not perfect, but it is not all in the dark.
And the ability to directly manipulate the CSS and see the impacts can make getting the right visuals fairly quick, not to mention the ability to change the view size and directly interact with that in all the different screen sizes.
I have the same complaint, but I also don’t know how such a thing would be addressed. Ideally I would like to right-click a computed style value in the devtools and be able to hit a “But Why?” option, but I feel like even linking to the relevant part of the relevant spec would be a monumental engineering effort.
Being a backend developer, I've always assumed CSS to be magical.
Recently I needed to learn CSS to make my website viewable, so I started with w3schools. But the pace was too slow, and it made me search for other alternatives. A good amount of SEO friendly sites containing the list of best CSS books suggested `CSS In Depth - Keith J. Grant`. With low hopes, I thought to give it a try just for a day but it did not disappoint me. Being a CSS noob I liked the way `Layout` concept was presented. It started with `float` and ended with `grid` with a couple of chapters in between dedicated to `flex` and other techniques. Then it picks up responsive design. The concepts were presented in such a way that it became a responsibility for me to replicate whatever the author has done in the chapters. It was a satisfactory experience.
Afterward, it presents the transition and animation related concepts which I read but I've forgotten because of not using them in day to day work.
I can second this and also mention that if you buy it through manning it is DRM free! They also have a "livebook" version that lets you try code right inline with the book. Highly recommend.
Hmm.. I see chapter 3 is "Mastering the Box Model", which is the part my co-workers really don't understand and seems to be the whole reason they treat CSS as magical. So that definitely sounds like a plus for that book (especially since one of the headers mentions border-box), although I've never read it myself.
From the headers it's not clear if it touches on block vs inline vs inline-block though, nor how margin/border/padding are related to each other (though that could just be mixed in with the border-box section). Is it complete there?
This site which was posted here a while back is great, it's up to date and explains the concepts CSS is based on clearly with examples using Codepen so you get to see both the HTML and CSS as well as the result, plus you can open them in Codepen to edit them yourself. I've been doing CSS for close to a decade and learnt quite a few things from reading through it :)
If you are just getting started, take an online class. Seriously. Reading page source or inspecting the applied css on other website will be slow confusing process.
Go to lynda.com (now linkedin learning unfortunately) and take the css essential course, then build your own personal website. The videos will give you good fundamentals and your website will give you real world experience.
No amount of advice or tricks can help you when you don't know the fundamentals.
138 comments
[ 3.2 ms ] story [ 191 ms ] threadhttps://css-for-js.dev
Edit: adding source for my claim. Go to the website of the course that was already posted here and search for “Purchasing Power Parity”
I don’t yet know if I’m interested enough in this course, but I really appreciate content authors who consider pricing variations in different locations. Bonus if they offer to help people in tough situations (even in countries where PPP may be higher).
Note: Not affiliated in any way.
I think it doesn’t teach anything you couldn’t learn yourself by reading the spec or css-tricks etc, however there’s just no way I would have bothered reading those things myself as in depth as I am going with the course. There’s definitely some information in the course that I don’t feel is useful, and I already knew quite a lot about css so most of it is familiar, but I still learn important things every time I sit down and go through a module. And I love the interactivity and actual practical challenges included.
So overall I give it an 8/10, and would recommend to anyone working (or who aspires to work) on the frontend.
Is it worth $350? If you’re on an average dev salary then yes, if you’re in school or not exactly floating in money, then I’d say stick to just reading free content online or making things you enjoy and learn by doing.
The course isn't necessary however. Reading through MDN docs in addition to Josh W Comeau's blog should get you 90% of the way there, if not all the way there.
While reading a lot of articles and books gives you a wider view, you don't have to memorize but as the article says, know it exists.
You seem to be thinking of Tailwind as just syntactic sugar. If that's your lens and you're not leveraging its strengths as a framework, then yes — you might as well use raw CSS.
Raw css is not the perfect solution either, I personnally prefer SCSS but I hope to see better solutions.
Not caring for pixel-perfection, I want to be able to develop simple UIs intuitively, without any need to code (css) anything.
What are my options?
If you just want to be able to execute your will intuitively, it's much better to learn "enough" modern CSS and stick to modern browsers.
Now with CSS Grid for layout it's so much less frustrating than just having Flexbox, and a world away from the dumpster-fire that was Floats (and before that, html tables).
Learn and relax.
https://www.youtube.com/kepowob
So by practicing withot classes you will find that classes are rarely needed and in turn all your CSS get more simple - as long as you understand specifically. And you will also start to appreciate semantic HTML, and hopefully replace some of the divs with the appropriate semantic element!
Oh, and more "important" rules too. "!important" overrides everything. Well, except more specific instances of !important, or instances of !important with the same specificity but later in source order.
Specificity is easy, the amount of specificity a selector has is measured using four different values represented by four single digits in four columns. (Of course, a single ID will override a thousand nested class selectors.)
And that's ignoring the origin of the rule (author, user, or user agent stylesheet).
And of course transitions override all of this.
Isn't CSS fun?
Top tips for someone starting out: learn the box model, then look at flexbox or grid. MDN is pretty much all you will need in terms of reference and pared-down examples
Don’t worry about minimizing the number of characters, try to match the challenges 100% with just enough HTML and just enough CSS rules and properties to be elegant.
https://cssbattle.dev/
Somewhere on the continuum between "learn by doing" and "learn by studying", the truth lies.
I mostly learned CSS by happenstance "doing" and have been able to do a fair bit, but I didn't really understand selectors until I went through a book on CSS.
I've read that page! In fact I reviewed it while reading the book, along with many other MDN pages.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
That page is actually part of an MDN module, which is sort of like a book. I actually considered going through that MDN module methodically, but ultimately chose a book I thought was more suitable for my needs.
For me, developing a sense of mastery over selectors meant studying all their variations and practicing with all of them. I also had to understand that "selectors" were a thing in the first place — a coherent and scope-limited topic that I could study and master. I didn't really get that from all of my CSS practice — the book gave me an agenda I wasn't able to develop on my own.
> Sorry you wasted time reading a whole book! You can't get that time back.
It's not like it was an entire book on selectors. I don't need that time back — it was productive, and I learned a lot about many aspects of CSS.
Of course, it would have been less productive if I had not already accumulated a lot of knowledge via the "learn by doing" method. I'm certainly not opposed to that... it's jarring to see someone so adamantly opposed to books.
(For the curious, the book was Architecting CSS by Martine and Michael Dowden. It's not really a beginner book. I chose it because I needed to understand how to organize CSS in large projects to get more predictable behavior and reduce time spent on maintenance and debugging).
I’m guessing you have little experience with books but the general approach is you read something and then practice what you just learned.
What areas are you spending your time?
Are you making complicated layouts? How much of your layout is JS based? Personally learning more about @media selectors turned out to be a big win.
Do you have a mentor? It's one thing to know the entire CSS catalog and another to know how to use it.
What does your project require?
The source of web sites that have good design. Use developer mode on a browser. You can edit their CSS live and see the results. You can change the viewport and see how it renders on mobile. You can figure out what's using JS and you'll come to your own conclusions on whether that's the right way to do things.
While you're reading, start building things from scratch. MDN is a great resource if something doesn't make sense.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Beyond that, the only advice I can give when starting out is to avoid inline "style=" attributes like the plague, and figure out how you want to organize your elements, styles, and classes. This is the trickiest part to get a feel for, and there's no substitute for practice. Frameworks like bootstrap and semantic ui make for especially good starting points, giving you a collection of opt-in helper classes for the basics, letting you focus on adding whatever custom stuff you need for your site without implementing a ton of extra boilerplate. You don't need to use them, but they can help you get a v0.96 built very quickly during your prototype stage, and they're battle-hardened enough to be used in the wild if you decide you like their opinions.
I’ve found directly useful information in specs that was not commonly pointed out in tutorials/stack overflow/etc when discussing those features (not remembering a specific example right now unfortunately). Can say the same for JavaScript.
I think in general when learning about an API it’s best for understanding to read primary sources. And thankfully the W3C specs are quite good documents and not too inaccessible in my opinion.
Off topic but I remember when CSS stood for Content Scramble System and was the digital rights management technology on DVDs.
Three people (two unidentified, one in Norway) cracked CSS in 1999 and created an app called DeCSS to remove DVD copy protection.
https://en.m.wikipedia.org/wiki/DeCSS
The movie industry took this very seriously. They got Norway to raid the home and prosecute the one known author. Hosting a file with the name DeCSS led to copyright infringement complaints.
So some wise guy wrote another app also called DeCSS that had the sole purpose of removing Cascading Stylesheet references from an HTML file. It became one of the most popular hosted applications for a while.
Thankfully for the rest of us, the inevitable failure of all rent-seekers is that rent-seekers don't tend to be very smart / innovative (by definition, I suppose).
I've tried following the blogs mentioned in the past but it wasn't really worth the bother. I don't really care about CSS beyond the need to use it to solve problems - and to do so with confidence that I know what I'm doing.
That's the most important thing in CSS, to really understand the fundamentals so you're not frustrated or in a state of trial and error. Seen too many devs who work this way.
Then again, my design ethic is 14 motherfucking rulesets: https://codepen.io/dredmorbius/full/KpMqqB
YMMV.
(Given my recent adoption of a B&W e-ink device, I'd either reverse my preference for off-white / off-black for straight white/black, or use @media queries to probe for device colour depth. On balance, I'd probably opt for the first, simpler option. Getting font-size correct for the reader, line-lengths to a readable width, and margins such that text does not run into the gutters is really the principle objective.)
I think reading the spec only starts to make sense once you've done quite a few things with CSS.
Of course there is udemy /s
Makes sense in general. However there's a geat deal of expectations related to the intended look. These expectations are formed by the current looks of the popular sites, which may be built on frameworks. So trying to achieve such outcomes from scratch would be quite a lengthy journey.
For a practical way to learn CSS, perhaps a set of simple styling objectives should be sufficient in order to understand the mechanics of CSS. I'm not sure if there's any value in memorizing the myriad of tweakable props or "the tricks" and browser specifics.
JavaScript-free too!
https://egbert.net/blog/index.html
M.CSS is a nice JavaScript-free template for me that works in portrait/landscape in both mobile and desktop.
Used a Penguin static website generator.
- https://mcss.mosra.cz/ - https://blog.getpelican.com/
The problem is almost always the CSS with no syntax errors you wrote isn't doing what you wanted it to do. The browser doesn't know what you wanted it to do so it can't help you.
There's also tooling to catch these errors if it really matters.
And the ability to directly manipulate the CSS and see the impacts can make getting the right visuals fairly quick, not to mention the ability to change the view size and directly interact with that in all the different screen sizes.
Recently I needed to learn CSS to make my website viewable, so I started with w3schools. But the pace was too slow, and it made me search for other alternatives. A good amount of SEO friendly sites containing the list of best CSS books suggested `CSS In Depth - Keith J. Grant`. With low hopes, I thought to give it a try just for a day but it did not disappoint me. Being a CSS noob I liked the way `Layout` concept was presented. It started with `float` and ended with `grid` with a couple of chapters in between dedicated to `flex` and other techniques. Then it picks up responsive design. The concepts were presented in such a way that it became a responsibility for me to replicate whatever the author has done in the chapters. It was a satisfactory experience.
Afterward, it presents the transition and animation related concepts which I read but I've forgotten because of not using them in day to day work.
https://www.manning.com/books/css-in-depth
From the headers it's not clear if it touches on block vs inline vs inline-block though, nor how margin/border/padding are related to each other (though that could just be mixed in with the border-box section). Is it complete there?
https://web.dev/learn/css/
This site has a bunch of guides on how to use modern CSS to achieve particular tasks such as button and form control styling or particular layouts:
https://moderncss.dev/
Go to lynda.com (now linkedin learning unfortunately) and take the css essential course, then build your own personal website. The videos will give you good fundamentals and your website will give you real world experience.
No amount of advice or tricks can help you when you don't know the fundamentals.