Developers, It's worth learning CSS properly

Copy to clipboard

Summary

Learning how to build web applications is hard, you face so many hours of complexity and frustration before even being close to building the cool things that drove to learn to code in the first place. After this exhausting marathon, learning CSS is often put at the bottom of the to-do list. I was guilty of this approach and hopefully the article below can help convince you that you shouldn’t do that same thing. To cut the below long-ish story short, you should learn CSS because:

• You are able to design better products for your users, you’re able to emulate, steal, borrow design features you see anywhere (online or offline)
• CSS really isn’t that hard when you get the fundamentals
• It can save you a ton of time when troubleshoot style issues
• It helps you write better HTML and better Javascript
• It’s a learn once, use everywhere kinda deal - there isn’t that much to learn after you know CSS to use it in the various frameworks that are available to you

Copy to clipboard

Should you read this?

I am writing this article after finishing Josh Comeau’s very excellent CSS for Javascript Developers Course. If you’re pretty much convinced that you want/need to learn CSS right now then I won’t be offended if you ignore all of the below and head straight there - you won’t look back, it’s not cheap, but it’s totally worth it. To be clear, I have no relationship with Josh, commercial or otherwise, he doesn’t know me and I don’t know him - I’m recommending him because his course is fantastic.

Ok so for the rest of you here’s the crux of the below - I am effectively trying to write an article for myself as of a few months ago. It’s an effort to imagine what would have convinced me back then that putting my energy into learning some foundational CSS would have been a worthwhile use of my time.

Copy to clipboard

Where I was: functionality first, CSS is effectively a nice paint job

Here’s what I was thinking a few months ago:

I’m just getting to a place with Typescript, React, Next.js and Backend stack that I’m happy with. It’s been a long road, I’m now able to build many of the things I want to. I know some the general ideas behind CSS and how it relates to styling, do I actually need to learn CSS in a foundational way like Javascript and HTML? I’ve found a bunch of good component libraries out there which I can sort of contort to express the UI/UX I want, many of them are built using Tailwind which is pretty simple to use. I’m tired - somebody else can worry about CSS and I’ll just use their pre-baked stuff - that’s design-ey stuff is not my bag, I’ll focus on the actual engineering, there’s still so much to learn!

Looking back I wouldn’t be too critical of myself for thinking that way. This approach allowed me to build a bunch of stuff (this website included) to a reasonable enough standard (you may disagree). It’s fair to say that if you get some off-the-shelf UI components which are built on top of Tailwind CSS you can fashion them into something half-decent looking that will suit your needs.

My approach was fairly standard, and for good reason. As somebody trying to build a modern web application; if you know CSS but don’t know any Javascript you really are not going to get anywhere at all. Consider the following for a super simple button in React which increments a count held in state:

1import React, { useState } from 'react';
2
3const CounterButton = ({ incrementBy = 1 }) => {
4  const [count, setCount] = useState(0);
5
6  const handleClick = () => {
7    setCount(count + incrementBy);
8  };
9
10  return (
11    <div>
12      <p>Current Count: <span>{count}</span></p>
13      <button onClick={handleClick}>
14        Increment by {incrementBy}
15      </button>
16    </div>
17  );
18};
19
20export default CounterButton;
Copy

If this is gibberish to you, just know that at one time it was utterly baffling to me and every software engineering ever! However, if you’ve gotten to the point of understanding this snippet you’ll have fought tirelessly (and won!) against HTML, Javascript, JSX, React, React specifics like props, useState, useEffect and so on…. It’s been an exhausting journey.

Now consider the following which is the same snippet but with some Tailwind CSS classes to take your button from the default styling provided by your browser into something appropriate for a modern web application.

1import React, { useState } from 'react';
2
3const CounterButton = ({ incrementBy = 1 }) => {
4  const [count, setCount] = useState(0);
5
6  const handleClick = () => {
7    setCount(count + incrementBy);
8  };
9
10  return (
11    <div className="flex flex-col items-center p-4 bg-gray-100 rounded-lg shadow-md max-w-xs mx-auto">
12      <p className="text-lg font-semibold mb-4">Current Count: <span className="text-blue-500">{count}</span></p>
13      <button
14        onClick={handleClick}
15        className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300"
16      >
17        Increment by {incrementBy}
18      </button>
19    </div>
20  );
21};
22
23export default CounterButton;
Copy

Admittedly there’s additional stuff within the JSX tags in the return statement, but to the trained eye the html markup is the same but now containing some css classes (via the className attribute within the JSX tag). With a minimal knowledge of css (and our new bestest friends ChatGPT and Claude) you can basically figure out what styling is being applied with the additional code. Let’s take the div element surrounding the button and p tags.

1   <div className="flex flex-col items-center p-4 bg-gray-100 rounded-lg shadow-md max-w-xs mx-auto">
2.... 
3
4</div>
Copy

• flex:Flexbox has been applied (good for aligning items in a single direction)
• flex-col: Flex direction is column (vertically down the page) for allow for nice alignment of the button and text within the div
• items-center: to apply the alignment that flex-col has allowed for
• p-4 bg-gray-100 rounded-lg shadow-md: Adds padding, background colour, a nice preset of rounded corners, and a nice preset shadow for a card-like appearance.
• max-w-xs mx-auto : Sets a max-width for a small container and centres it horizontally

A React component styled with Tailwind

An Unstyled React Counter Component

No prizes for getting which button above has Tailwind CSS styling applied and which doesn’t. On this basis it feels like a no-brainer, you’ve done all the hard work to understand the actual “engineering” behind creating a functioning counter button - if it is as easy as applying a few Tailwind classes to make it look appropriate for the modern web - who wouldn’t just do that right?!

Forget just a button, if it’s as easy as ripping an entire card component from the various Tailwind libraries online why wouldn’t you? Look at this Tailwind template component below, it has a lovely rounded image, a nicely formatted date, a topic tag, a pleasingly sized card title, lovely spacing and a great author avatar and info component! It’s delightful isn’t it.

You’ve spent a whole morning setting up your page routing, calling the endpoint to your CMS or database, returning the data nicely. You’re hungry and you want to be able to show your client or boss some UI on the page because non-technical people are not that impressed by a console.log showing the data. All you need to do to have your work look delightful is to drop the template card component in, pass a few props in here and there and job’s a good’un, git push - time for an early carb-heavy lunch!

A Tailwind template for a React Card Component

Copy to clipboard

Where I am now. CSS absolutely deserves my effort and attention

To mirror the first section of this article where I shared my previous thinking, here’s my current thinking:

Now that I’ve gotten to grips with getting data into a functioning front-end, I want to build more tailored web experiences which accurate reflect my design ideas. I don’t want to spend lots of time chiseling, bending and melding templated components, instead I want to take the best design concepts I see in the world and be able to build these. I’ve saved time by not longer hacking my way around in CSS changing things at random to see if it looks good. I’m able to use the fundamentals I know and the incredible documentation on CSS to achieve all that I want (eventually). Furthermore I’ve found that CSS has so many elegant tools within it that actually mean I have to write less Javascript (e.g. nth child selectors) and better HTML.

Copy to clipboard

CSS Fundamentals as part of a full-stack journey

Now to be fair to the people who taught me CSS at my software engineering Bootcamp they told me NOT to take the above mentioned shortcuts and learn CSS thoroughly from first principles. They taught me key stuff like CSS selectors, specificity, positioning, Flexbox, typography and all that good stuff. They even taught me methodologies like BEM to help avoid naming collisions and extensions to CSS like SASS to make writing CSS more simple and consistent. They showed me the incredible documentation at MDN Web Docs and how with a bit of digging you can find the right CSS rule a situation demanded.

I obviously ignored their advice, grabbed Tailwind with both hands and ripped a bunch of pre-made components into my projects. At the time I wanted to use my hard-won Javascript and React knowledge to start building decent looking full-stack projects as soon as possible. Being full-stack meant continuing my learning journey after Bootcamp and getting to grips with other fundamentals like, Typescript, Next.js, Prisma, Authentication, APIs etc. and deploying to infrastructure like Vercel. I was saving a bunch of time using off-the-shelf stuff which afforded me time for learning other things.

Copy to clipboard

What you gain from an understanding of CSS

As with any software engineering discussion online you’re going to get a whole range of opinions on what would seem to be a very simple question: how deeply should I understand CSS? There is no definitive answer here, but here are my thoughts for leaning towards a more complete understanding of CSS rather than treating it as the poor relation to Javascript and HTML.

Copy to clipboard

Building experiences that stand-out and connect with your users

The baseline for what constitutes good UI/UX online is now very high, users are rapidly turned off with experiences they perceive to be ugly, clunky, unintuitive or slow. This is an intimidating prospect and makes us all want to reach for beautifully design pre-made templates.

However the downside of using templates is that they were never made for you and your ideas, they are made for a wide variety of use cases. Why? Because it helps creators (quite understandably) sell their templates to as many people as possible. As such a one-size fits all approach ends up poorly fitting everybody. What ends up happening more often than not is that you “adapt” (and degrade) parts of your idea to shoehorn it into a template that was not conceived with your idea in mind. As with every project it is the idea that is the true value-adding element, not the UI/UX, engineering, infrastructure, brandname, logo etc.

A bunch of websites I have made using these templates have all looked and felt the same, whilst I succeeded in making somewhat nice looking UI’s they suffered from a homogeneity that didn’t make them stand out from much of the rest of the internet.

You will notice this blog page and the main blog articles page aren’t particularly unique in the world of software engineering blogs. They are currently built with Payload CMS (awesome btw) and their out-of-the-box template that uses Tailwind components. However, my landing page and career pages I have written my own custom CSS (using CSS Modules), which is why you will see markup in the HTML which looks like: LandingHero_heroGrid__hyEda container .

I am pretty happy with this blended setup for now and what’s cool about CSS is that you can blend frameworks in the same project. This approach works for me because I want to show a little bit of my design personality and skills on my landing page through my own “hand-coded” CSS, but I don’t want to reinvent the wheel for my blog article pages so I used pretty great looking pre-made Tailwind CSS styled components.

I do realise the hypocrisy of this blended approach in the context of this article, but I would say a few things:

1. Using pre-made Tailwind styled components is not a shortcut for not knowing CSS, I understand the Tailwind and the CSS it compiles to and what that CSS does.
2. Since I understand the Tailwind and CSS I have actually customised the pre-built Tailwind components to add some of my own styling to them.
3. I will be converting all of the Tailwind in my site to CSS Modules at some point (to further practice and consolidate my CSS knowledge).

Copy to clipboard

Knowing CSS opens up a world of design without having to be a designer

Like me you might not be a particularly good designer, but dispensing with templates and writing your own CSS does not mean that you suddenly need to become a designer. It is actually the complete opposite, it now means that a whole world of design is at your disposal. You can now wander through the internet understanding the CSS behind lovely, delightful bits of design. A simple right click allows you to investigate the CSS and combining this with your knowledge you can reverse engineer the best stuff you see. You can trawl through sites like Mobbin and take inspiration from the design greats and intelligently adapt it to your ideas. Love a particular layout style on mobile from AirBnB, you can investigate and replicate. Trying to replicate design without understanding CSS principles is almost impossible, once you understand CSS some of the most beautiful designs become very approachable to emulate and build on

Beyond copying existing designs, a solid understanding of CSS allows you to work with a UI/UX designer who creates something specific for the idea that you’re working on. They can create something and depending on how familiar they are with their tools (like Figma) can do a lot of the work for you in terms of turning mockups into functioning interfaces.

Copy to clipboard

It really enjoyable once you get to grips with it

It’s fair to say that unlike JavaScript (and even more so TypeScript) that there is nothing screaming at you if you write “bad” CSS. What I mean is that CSS doesn’t “know” what you are aiming to do from a design perspective. It doesn’t have any opinion on how you decide to style your html elements. If you resize the page and all of a sudden you have a horizontal scrollbar or your text overflows the container CSS doesn’t “care” about that.

This is what makes CSS so frustrating for the beginner; what seems to be perfectly sensible CSS is doing something clearly stupid and the language provides no feedback mechanism as to what you need to fix to stop this happening. I myself spent hours of frustrated hacking around to no avail. Yes I could change border colours, shadows and typography fairly easily, but when grappling with responsive layouts I was more often than not baffled and reaching for pre-made components which often broke when I moved them out of the context they were originally designed for.

However with some fundamental understanding of key concepts I could begin to understand the “class” of problem that was facing when approaching some CSS decisions. Much in the same way as reaching for array methods, functions, props and state in React development you begin to get an understanding of when and how to use concepts like positioning, Flexbox and Grid in CSS. You then are able to appreciate some of the power within CSS in terms of its ability to target specific HTML elements in a way that you thought only possible with some convoluted Javascript.

You then begin to extend yourself a bit and are able to use cool stuff like animations and transitions to make interactions feels a bit more organic and pleasurable for your user. You add subtle touches than make your application go from merely functional to delightful.

Copy to clipboard

It doesn’t take that long to get a “feel” for how CSS works

CSS is just like with Javascript (and other programming languages - of which I know very little), in that once you’re familiar with the broad concepts (Flexbox, Grid, Positioning) you can fiddle with the various properties and experiment with see what they do. And unlike actual programming languages CSS by it’s nature is very visual in its feedback when you tweak things - change a flex-direction to column for example and see what happens!

To get an idea of the different troubleshooting toolkit with CSS. Imagine that you’ve built a nice Node/Express server and keep on getting a 500 Internal Server Error each time you click submit on a simple front-end form. This 500 is pointing you to an error on the server, but this could be a bug in your handler, an issue with the database, a network-issue, a permissions issue, bad error handling, bad inputs and so on…

Contrast this with CSS: you have an element which isn’t behaving itself, when you flip to mobile - the naughty element overflows its container and looks ridiculous. A quick inspection in the browser developer tools will reveal every CSS rule that is being applied to the particular element and what .css files are applying those rules. You don’t even have to return to your source files to troubleshoot the issue, the browser dev tools give you a playground to change/remove/add CSS rules and see the results right there on the page! Fix the problem in the browser, copy over the css edits that you’ve made and problem solved.

Copy to clipboard

How long does it take to get to grips with CSS then?

Everybody learns at different speed, but I think that about 30-40 hours of really playing around with CSS and trying to build various UIs from scratch will get you to a place where you feel comfortable enough with the broad strokes of CSS to not find it overwhelming and exasperating. As with anything in programming, once you start to get to grips with the paradigms the documentation opens itself up to you. MDN, CSS-Tricks, W3 et al. have so much good stuff for learners and experts alike. There is a section on resources at the end of this article.

I personally found it much less emotionally draining to learn CSS than say Javascript, React or Next.js. With just a little bit of fundamental knowledge there is much less of a “computer says no” feel to the feedback when things go wrong with learning basic CSS. For many of the CSS problems you face your eyes are able to do a lot of the troubleshooting and “error” handling for you. Is an element not growing/shrinking properly when you resize the container? Well with a little bit of knowledge you can find out what rule in the cascade is setting the size? Is your sticky navigation header not sticking, well with a bit of knowledge about CSS positioning you can find out what element it is actually sticking to (if any at all).

Javascript experts will argue that with judicious use of try-catch blocks, error handling, proper use of Typescript you can hunt down Javascript errors pretty quickly. Yes that is true, but nobody learning Javascript has those tools in their arsenal from day 1, at that point we were still pulling our hair out after forgetting to include a return statement in our API endpoint to provide a list of water Pokemon. My argument is that starting off from the basics of CSS with some solid foundational grounding means that the learning journey can be far less challenging than that of Javascript.

Copy to clipboard

The CSS Landscape out there

So if you’re convinced at this point to learn CSS you’re probably wondering what the future will look like once you have gotten to grips with it. The good news is that once you understand CSS you’re pretty much done!

As every web developer will know - once you learn the key concepts in JavaScript the journey has just begun, you now need to learn how React uses JavaScript in the front-end, how Node uses JavaScript in the backend and how (for example) Express uses JavaScript for building endpoints. Somebody will then tell you that the pros use TypeScript, so you start using that and you rapidly pull your hair out as TypeScript complains about every little thing it can!

This isn’t the case with CSS once you really understand CSS the ecosystem around is basically various perspectives on the best way to apply CSS in your particular use case/preference. I will discuss some of these below, but note there are loads of far better resources than this article if you want more robust understanding and comparison of these approaches.

Copy to clipboard

Vanilla CSS stored in .css files

In the olden days you would apply classes to all your HTML elements and link them with a <style> sheet into your html. Having a lot of CSS classes in a single (or a small number) of style sheets would creating problems such as class name collisions. Every different HTML element would have to have different class name applied as an attribute so that the correct CSS classes would be applied. This causes the very human problem of choosing appropriate but not overlapping names for things and this problem is only compounded when working in team where people have different ideas on how to name things.

These problems have been incrementally overcome with the development of methodologies like BEM and tools like SASS. However the biggest improvement for the world of vanilla CSS has come through the development of CSS Modules. In a world of component driven frameworks like React, CSS Modules allow use to specifically ring-fence the CSS that a components is exposed to to just that component’s CSS. This means we no longer need to care about class name collisions across all the various classes we’ve created in our style sheets. It also makes identifying and editing the applicable CSS in your source code really easy.

If all of the above makes no sense, you can ignore it for now. What I’m saying is: if you learn CSS then CSS Modules is almost zero incremental learning. It is simple vanilla CSS chopped into small files to save you the mental anguish of having to create unique classes for everything.

Copy to clipboard

CSS-in-Javascript: closely linking CSS to the Javascript Component Logic

Ok, so if you know some React you’ll know that you pass props from parent to child to influence some characteristics of the child. For example imagine a parent component which is a sign-up form and it contains a child component which is a submit button. The parent passes a disabled prop down to the child submit button whilst the email field is empty - can’t allow submitting for sign-up without an email right? Pretty standard stuff. The below code looks a bit heavy but essentially what’s happening here is that by using a library called styled-components (one of the many CSS-in-JS libraries) we have dispensed with the separate .css file and instead included all the relevant CSS in the same file where Javascript and React exist to define the component. The button component is styled differently when it is disabled (passed the disabled prop), to help the user understand that she can’t proceed without an email.

Without getting into the weeds on the the technicals right now the takeaway is that much of the code within the backticks is still vanilla CSS. Even the inline arrow function that uses props resolves to a CSS declaration, so if you know CSS (and Javascript) you pretty much know how to use CSS-in-JS. You will need to learn a few specifics about how the library creates components and where to put the CSS, but the specific CSS part of it requires no additional knowledge beyond CSS.

1import React from 'react';
2import styled from 'styled-components';
3
4// Styled button with conditional styling based on the 'disabled' prop
5const StyledButton = styled.button`
6  padding: 10px 20px;
7  font-size: 16px;
8  font-weight: bold;
9  border: none;
10  border-radius: 5px;
11  cursor: pointer;
12  transition: background-color 0.3s;
13
14  /* Default styling for an enabled button */
15  background-color: ${props => (props.disabled ? '#ccc' : '#3498db')};
16  color: ${props => (props.disabled ? '#666' : '#fff')};
17  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
18
19  /* Hover effect only if the button is not disabled */
20  &:hover {
21    background-color: ${props => (props.disabled ? '#ccc' : '#2980b9')};
22  }
23`;
24
25// Button component
26const Button = ({ disabled, children }) => {
27  return <StyledButton disabled={disabled}>{children}</StyledButton>;
28};
29
30export default Button;
Copy

The CSS experts among you will highlight that there is actually a :disabled css pseudo-selector which could be used to add additional styles to the <button> when it is being disabled without having to resort to the Javascript in lines 15-17 above.

You would be absolutely right and with that little bit of CSS knowledge would save yourself a bunch of faffing around with the above Javascript inline arrow functions. This is an example of how powerful CSS can be you have a bit of insight into all the clever things that are available to you in CSS.

1import React from 'react';
2import styled from 'styled-components';
3
4const StyledButton = styled.button`
5  padding: 10px 20px;
6  font-size: 16px;
7  font-weight: bold;
8  border: none;
9  border-radius: 5px;
10  cursor: pointer;
11  transition: background-color 0.3s;
12  background-color: #3498db;
13  color: #fff;
14
15  &:hover {
16    background-color: #2980b9;
17  }
18
19  /* :disabled removes the need for any conditionals based on props */
20
21  &:disabled {
22    background-color: #ccc;
23    color: #666;
24    cursor: not-allowed;
25  }
26`;
27
28const Button = ({ disabled, children }) => {
29  return <StyledButton disabled={disabled}>{children}</StyledButton>;
30};
31
32export default Button;
Copy

Copy to clipboard

CSS Frameworks like Bootstrap or Bulma

CSS frameworks, such as Bootstrap, Bulma, and Foundation, offer pre-built components and responsive grids to simplify the design process and speed up development compared to writing vanilla CSS. These frameworks provide ready-made styles for common elements—buttons, forms, navigation bars, and more—eliminating the need to write extensive custom CSS from scratch. They are useful rapid prototyping and creating cohesive designs quickly, especially for developer who have limited CSS skills or are in a hurry to validate ideas.

As you might expect these frameworks often limit customisation, leading to “cookie-cutter” designs that can look similar across sites - we discussed this in the context of Tailwind previously. They can be more trouble than they're worth when you ultimately find yourself wanting to or needing to customise the preset styles to achieve a non “cookie-cutter” look. Possibly the worst thing about these frameworks is that they are often “good enough” to stop developers ever actually learning the fundamentals of CSS which would allow them to produce products with great design.

Copy to clipboard

Tailwind CSS: A utility-first CSS framework

As already discussed, using Tailwind prior to properly learning CSS was my preferred approach. It allowed me to use some decent looking off-the-shelf components, gave me some scope for CSS customisation and avoided any naming collisions issues. Whilst technically using Tailwind allows you to do almost anything that you can do with CSS it often doesn’t work out this way in reality. CSS beginners are attracted to Tailwind for its ease and speed. The cost is that it abstracts away the key concepts in CSS and hands you components which you tend to only have a superficial understanding of and thus limited understanding of how to adapt and customise. When your UI doesn’t look exactly as it should because you’ve used a one-size fits all component or you’ve taken a component out of one context in the template and used it in another context in your app - you have no idea why it isn’t working and you end up changing Tailwind classes at random in the hope that it fixes your issue. The time you spend fumbling around trying to adapt a templated component to suit your needs, would be better spent learning some foundational CSS. With these solid foundations you will not only be able to design the exact component you want from scratch you will be able take any legacy CSS, Tailwind or otherwise, and update it.

Copy to clipboard

How I learnt CSS: Resources, Courses

Ok so if you are somewhat convinced and think that now is the time to properly learn CSS, here are some resources which have helped me over the journey.

Copy to clipboard

Courses

As I mentioned at the beginning of this piece, I recently completed Josh Comeau’s online course which is specifically targeted at Javascript Developers and Josh provides a pretty expansive curriculum which takes the learner from first principles of how the CSS engine works through all of the conceptual “paradigms” of CSS (positioned layout, Flexbox, Grid) and the adds completeness with modules on typography, images, animations and CSS-in-JS. In my opinion it is the understanding of the paradigms which fundamentally helped me level up my CSS. At the end of most modules there are exercises which involve applying the correct CSS to replicate a Figma design in code. I think these are great as they represent what happens in a real-world context between designer and developer.

W3 Schools is a great resource for so many things, CSS included. This is technically not a guided course like Josh’s but it is more a collection of the key areas you need to understand in. CSS. Each concept explained on W3 includes a simply written explanation and a super useful code playground to allow you to interact with the concepts, fiddle around and learn in your own way.

In terms of channels on YouTube you should check out Web Dev Simplified and Kevin Powell, Kevin also has a tutorial website called CSS Demystified, I haven’t taken this course myself so I cannot speak to it but it seems popular.

MDN as we all know is a heavy-weight resource for all things web development, but it also has some guides on learning HTML, CSS and JS. Whilst I think the whole of MDN is incredible and the guides sections are great, their discussion of CSS Layout is particularly useful in getting to grips with those key paradigms that I’ve spoken about above.

Copy to clipboard

Books, yes books kids

Despite building digital experiences I still like to purchase books in hardcopy, there is something about reading through a physical book on the couch, bus, desk the produces a different level of attention for me when compared to reading off a screen. I like writing notes in the book to help me add little things which I know will help me if I ever return to that page. Obviously this preference is very personal, all that I would advise is that if you’re buying a Kindle version off Amazon, you should get the Kindle App for Mac or PC. Trying to read long blocks of CSS (or other code) in the mobile Kindle app can get pretty frustrating and confusing.

If you’re the kind of person who wants a comprehensive resources for any and all questions you might come across in CSS then get yourself a copy of CSS: The Definitive Guide: Web Layout and Presentation. As with all of the O’Reilly published software books it is very well written and laid out. Beware though it is a huge tome (1000+ pages) and I would recommend it primarily as a companion resource when taking an online or other CSS Course.

Responsive Web Design with HTML5 and CSS is another great book which also provides great insights into understanding how to correctly (semantically) structure your HTML. I would say this is a less comprehensive but more practical guide than The Definitive Guide mentioned above.

Art Direction For The Web is a great example of a very practical book where the author explains his intent as a designer and how for a given content different design decisions can convey totally different meaning. The author very cleverly uses the same HTML and content and with different CSS shows you entirely different UIs and therefore experiences that can be produced with an understanding of the fundamentals of CSS.

Copy to clipboard

Games to Learn CSS

I really recommend playing games to help you learn, especially with CSS. The challenge, frustration and sense of accomplishment cycle seems to really consolidate the understanding of novel CSS ideas. Flexbox Froggy is a great way of learning all the way Flexbox allows your to align items. Grid Garden made by the same team does that for learning some (but not all) of the key concepts in CSS Grid.

I can’t vouch for the below as I’ve not tried them but Coding Fantasy and CSS Battle seem to have some pretty extensive CSS games so if you’re into this approach it might be worth checking them out.

Copy to clipboard

Final Words

CSS often gets relegated into the category of things you think you can get by without knowing properly and to a certain extent that’s true. If you are struggling with JavaScript and React and your components don’t work, what’s the point in being able to style them nicely? It makes a lot of sense to prioritise JS and React and put CSS on the backburner when initially learning web development. However as I hope you’ve absorbed from this article, learning CSS sooner rather than later has so many benefits. It opens up a whole world of designs you can build which means better and more targetted products for your users. Knowing CSS saves you a ton of time when trying to understand why interfaces aren’t behaving properly. Finally since HTML, CSS and JS are all so interdependent, a proficiency with CSS can help you write less but more semantic html and reduce your reliance on Javascript to control styles.