What do I need to read to be a CSS dev?
baldurbjarnason.com
baldurbjarnason.com
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.
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 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:
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.
> Advanced features that address specialised use cases you’re never going to encounter.
This is why, as a backend developer, with little time to invest into CSS, I will rely almost 100% on frameworks like Bootstrap or Tailwind. I do not have time to go and check if a feature has been adopted on most browsers or whether they are super advanced or unorthodox.
By using a framework I trust that people much smarter than me at CSS and who actually gives more of a damn at keeping up with it have worked a feature into the framework and if it is not found then that is a limitation that I do not wish to overcome with research, hard work or trial and error.
If I can use some brevity: I have other, usually more important, shit to do.
I’m a backend engineer too and I learned most of this css stuff fairly easily in a few weeks without much pain. The truth is something like tailwind can get you to understanding 95% of css, just by digesting someone else’s editorialized model of it. You also sidestep a lot of issues with class-based nature of CSS, which just complicates the learning experience.
I can copy/paste an extremely complicated layout that I made in tailwind to an entirely different section of html or the codebase, and 99% of the time it just works.
Anyway I highly recommend to everyone who comes from a backend background to just learn something like tailwind. It’s basically css, just expedited and editorialized by professionals. When you run into gaps in the metaphor they’re easy to understand why they’re there, and you can easily add them yourself using their plugin system, which fit me just enhanced my own learning.
I'm not sure I follow - tailwind is entirely class based, but fights hard against the "cascading" in cascading style sheets?
When I said side step issues with class-based natured of CSS, I meant there's really no way to leverage the cascading nature of CSS using tailwind. You don't even really write css in tailwind. Because of this you get code duplication, but your styling is super portable. This, I think, is the nature of using a utility based framework. You can literally copy and paste almost anything and it will probably work, because the specificity doesn't depend on any sort of class hierarchy or make any assumptions about the structure of your css classes.
They're basically inline styles but use class names that are designed to be more useful than just writing css inline. Basically a light amount of editorialization.
But like I said I don't really know, so if someone knows a better way to word what I'm trying to say please correct me. I think the tailwind creator said something like "the canonical way of writing 'modular' CSS just doesn't work" (I'm paraphrasing but something to this effect).
See eg: https://alistapart.com/article/braces-to-pixels/
for a brief overview / recap.
The "other" options to utility/tailwind approach is to avoid classes, and use semantic html (easier in HTML5, where you can just decide you'll have an <article> with <lede> and <section>s) or heavily customized css classes (like bootstrap).
Main difference between tailwind and bootstrap, is that bootstrap still assumes you'll have some container-elements that wrap other elements - while theoretically tailwind styles every element in isolation. (sort of)
Them I basically realize that css is not my (first) problem. I have no idea how to design a website that looks good.
And even the templates I have used end up being so incredible messy and full of things like bootstrap overrides that effect the rest of the site in unexpected and unwanted ways that I try to stay away from them as much as possible now.
I just really want isolated designed components that I can put around the site. But I haven't found an option I like their either. :(
Holding the paper vertically, you'll notice you now have 3 main sections (header, intro, rest of the page) and 3 columns you can arrange your content into.
Take another A4 piece of paper, fold it in 3 and then in half this time, you'll have 3 main sections and 2 columns in each section.
Now cut each of the 3 blocks from each paper, you will end up with 6 sections (3 with 3 columns and 3 with 2 columns)
Try and write some of your content down on these 6 Lego blocks you created, sketch images (or just draw a rectangle with an X inside, that means "image placeholder" in graphic design layouts).
This exercise will help you understand how design is just content split in manageable parts.
You'll soon notice most sites are not monoliths, but the very same blocks you jotted down on paper.
This will make your template-scavengig effective, you'll notice you like certain types of blocks (say 3 columns with a background image) and dislike others (say hero banners with buttons). Steal the ones you like (crop screenshots and save them), then see if you can see what you like in each of those you saved. Try and recreate them as abstractly as you can either on paper or by using the rectangle tool in any graphic editor (don't get lost making it perfect, you'll get there faster by doing it by code instead than using graphic design tools).
Toy with design, it's all a fad anyway and what matters is what I've outlined here: blocks, columns, steal what you like.
I have a decent amount of experience starting with plain HTML in 1995 and table based layouts in late 199xs. Modern CSS grid named areas are awesome!
However, whenever I teach at bootcamps and at a university 90% of my students produce better homework than my own pages.
It is a combination of lack of design chops and lack of time to perfect.
I can talk about transitions, color theory and everything but I have no eye for it.
So I when I need something quick and dirty I fall back to Bootstrap at least it will not be absolutely horrible.
If you can’t apply a theme or make use of a designer, keep all your colors gray, and just focus on the shades. Darker shades to bring emphasis.
Secondly, make sure there is consistent padding, margins, and alignments. This is more tricky because it requires you to see the empty spaces and think of them as their own elements. Always be looking for areas of inconsistency and misalignment. This finicky because just two pixels offset here and there can have a big impact, but it is very much worth making thing look more consistent.
Lastly, look for opportunities to reduce the total number of visual elements in busy areas (within reason). Good examples of superfluous elements example might be outlines around icons, underlines, borders, two “empty space rectangles” that can become a single rectangle.
I’ve found 70% of my design methods are just applying these three concepts over and over again, and formulating somewhat logical principles to apply them. My designs aren’t as good as what a designer would produce, but are much higher quality than I didn’t apply any thought to design at all.
I was looking for a static site template just earlier today (along the lines of Hugo, Jekyll, etc.) and was quickly reminded that a lot of templates available online, and there are thousands both free and paid ... do not look that great or work that well. Even ones you like at first blush will likely need a ton of customization to fit your use case.
Rabbit hole, indeed!
For picking a usable one, I think other comments in the thread have it right: look for basic things like consistency of the spacing, non-obnoxious colors and fonts, etc. Does it just seem "clean" and usable at first glance, or does it give you an instinctive mental itch that something about it seems clunky or poorly done? Or too contrived or too opinionated for your use case?
And whether or not the design breaks on mobile. Even if you don't really care about mobile for your use case, if a pre-built design gets it right, that's a good indicator that some care and thought went into it.
https://www.xfive.co/blog/itcss-scalable-maintainable-css-ar...
https://www.digitalocean.com/community/tutorials/how-to-solv...
Also, css-tricks.com is a great resource and a hub of the css community.
SCSS / Sass is the most mature, stable, and powerful professional grade CSS extension language.
Apart from these I’d look into using consistent type scales https://type-scale.com/ and definitely learn css-grid.
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.
Alternatively, read this (it's a chapter from a book which is meant to help engineers "get" design): https://www.refactoringui.com/previews/building-your-color-p...
The book chapter outlines the philosophy, and Tailwind provides a functional system for putting it in practice.
For both of these, you don't need any CSS background. Not only does the video series teach you Tailwind, it'll also give a foothold onto CSS, and how to use it in practice to make reasonable websites even if one is design-challenged.
Alternatively, you could write CSS to get better at CSS.
I use ITCSS, BEM and some utility classes in my projects.
I also like and use Tailwind’s presets for colors and spacing as SCSS variables - but still write my css.
If you needed to code the same thing without Tailwind you can easily convert the syntax.
I would agree more with “Bootstrap is not CSS.”
A lot of my personal collection of CSS tricks[2] are inspired by his videos...
[1] https://www.youtube.com/user/KepowOb [2] https://pilabor.com/blog/2021/03/html-and-css-tricks/
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.
https://alistapart.com/article/braces-to-pixels/
still help get a good overview of how CSS work - and might be good in addition to more pragmatic guides on how to use tailwind etc.
It will go the farthest in teaching you how to think about CSS
[0] https://www.oreilly.com/library/view/css-secrets/97814493727...
top notch
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.
I also recommend two that were already mentioned but I have found them extremely enlightening: CSS-in-depth and CSS-for-JS-devs (I am a programmer first so it speaks to me).
I have also enjoyed the first few episodes of The CSS Podcast though I have not gotten to far into it.
Cameau has good stuff https://css-for-js.dev/ and for random snippets css tricks.
Once I came back to styling with CSS, I immediately understood how to use flex and develop slick UIs with it.
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.
1. Know that everything is a box that wants to float up. Learn about `display` and `position`.
2. Know about how things are measured. I think this is what causes the most troubles. You think something is 50% so it should fit, but it doesn't. Almost all of these problems go away with `*{ box-sizing: border-box}` but you should learn about this.
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.
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.)
If you don't like polishing details, well you are in a bit of bad luck. Unlike with backend code, with CSS your mistakes will show and be evident to everyone who can distinguish bad design from good.
And often doing less is better. It might sound self-evident but when you are making some dumb positioning with tops and lefts you are probably doing it wrong. Or there can be an easier solution. And when you color or add borders you probably want them to blend in, not stand out. Often a very small change in hue can be enough to provide depth and contrast.
It turns out most users do not really care for visual bells and whistles since visual noise gets in the way of doing things, which is why the lowest common denominator of shopping and restaurant sites have all converged on a basic design with a few splash photos or pretty typefaces to spice things up.
anything i need more examples of, I head to MDN and css-tricks.
The manual doesn’t tell you how people do things in practice, common gotchas you need to handle, tooling, or how to combine different bits together. Not to mention there are multiple manuals, and it’s unclear to a beginner with which one you’d start.
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.
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).
JavaScript-free too!
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.
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.
Man's Search for Meaning by Viktor Frankl
The Book of Job
After that CSS has been mostly trivial to write cross browser for me. The biggest challenges I would encounter are helpers, like jQuery or frameworks, getting in the way and breaking things.
for example, if you want to make a single screen app (the body doesn't scroll) I know of no css frameworks that do this. Tailwind, Bootstrap, are for height unrestricted pages. I'm not sure what a good example of single screen pages are, maybe codesandbox, google maps, google slides, codepen. Maybe someone has a suggestion for a framework that handles l the conatraints of keeping a bunch of content panes filling the window and no more with all the pane's content able to fill the pane with zero issues. I always find that trying to get say a canvas to be 100% of its container in such a situation to be trial and error.
another imo unintuitive CSS design is the Medium style of paragraphs have a max-width but images do not. The arguably normal way to constrain a bunch of content is a wrapper for all of that content and the wrapper is set to the max-width. But that doesn't work if you want images to go bigger than that wrapper. I'm not saying it's hard, only that it was different than just about every previous site out there. and imo "margin: 0 auto" is not an intuitive way of centering
(not saying they did it first)
Put your outermost container as
{
box-sizing: border-box;
width: 100vw;
height: 100vh;
overflow: none;
}
You may also want to use <meta viewport> to control zooming on mobile devices: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m...
Then you can use grid to divvy up that internal space without having to deal with the kind of rounding issues that using ems or %s used to have
http://google.com/search?q=100vh+mobile
Grid might solve some issues that Flexbox didn't but my experience is that without fail, I try to make the various panes, then I try to put some content inside the panes and either (a) the content doesn't correctly fill the panes (b) the panes get warped in ways I wasn't expecting because of the content. And, it's always a bunch of trial and error and unintuitive crap like "max-width: 0" to get it to work
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.
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?
I have the most trouble with this with CSS. I'm ordinarily at keeping my programming logic well-organized and maintainable, but with CSS I do bad and feel bad about it.
Appreciated the references for some things to read on this.
With modern frameworks, CSS/SCSS is often "scoped" to components which could lead to just a handful of general purpose or page specific CSS files that need no organizing as files go.
Content of said files is another topic. Inheritance is built in and you can overwrite pretty much anything from everywhere. That's both good and bad.
If you happen to reuse something, put in (one of your) main css file. Having your own set of lego block goes a long way.
Learn and relax.
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.
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.
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?
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.
Webflow will teach you every pattern for building pretty things and docs will let you match the buttons to code.
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).