CSS Icon

CSS

Styling the web and views since 1996.
120 Stories
All Topics

Josh Comeaujoshwcomeau.com

The styled-components happy path

This is Josh Comeau’s personal suite of “best practices.”

If you work with styled-components, or a similar tool like Emotion, my hope is that this article will help you get the most out of it. I’ve distilled years of experimentation and practice into a few practical tips and techniques. If you apply these ideas, I genuinely believe you’ll be a happier CSS developer ✨

Jerod Santochangelog.com/posts

Why do people complain so much about CSS?

Why do people complain so much about CSS? There’s memes and jokes about CSS… there’s all sorts of tooling for CSS… On our Frontend Feud episode when we asked, “Name something that frontend devs complain about”, CSS was the #3 answer, which was pretty high up the list.

So it seems like it is a thing that people struggle with, complain about etc. I’m just curious, why do you think that is?

CSScss-tricks.com

Why do we still need tricks to autogrow <textareas>?

Chris Coyier:

Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a <textarea> more like a <div> so it expands in height as much as it needs to in order to contain the current value. It’s almost weird there isn’t a simple native solution for this, isn’t it?

I’ll go a step further and say that this lack of a feature isn’t merely “almost weird”, it’s down right criminal. I’d love to champion this feature to the browser vendors/standards bodies, if one of y’all is willing to help me understand and navigate that process…

Adam Wathanadamwathan.me

How Tailwind CSS became a multi-million dollar business

Adam Wathan shares the backstory of Tailwind CSS, from humble beginnings to a multi-million dollar business. Thankfully, if you read the story, Nathan hated Sass enough to do something about it. Sometimes changes to our tools force us to change as well, and that change JUST MIGHT lead to scratching a multi-million dollar itch.

We’re also about to cross $2 million in revenue from Tailwind UI, our first commercial Tailwind CSS product which was released about 5 months ago — a bit under two years after the very first Tailwind CSS release.

Here’s the story from the beginning, while it’s still fresh enough to remember…

Andy Bellpiccalil.li

CUBE CSS — Composition Utility Block Exception

Andy Bell recently shared his new CSS methodology oriented towards simplicity and consistency with “a heavy dosage of pragmatism.”

If there’s one thing you can guarantee in tech, it’s that someone, somewhere, will declare that CSS isn’t up to the job of “big projects” and what will undoubtedly be recommended by those same people will be either a JavaScript-heavy approach or some sort of all-in utility class approach like Tailwind.

The problem is, a huge number of projects are websites, so that advice normally doesn’t work for the vast majority of developers. For context, it’s estimated that WordPress powers around 36% of the internet and is still rising. Compare that to a paltry 0.3% of websites that use React, for example. It’s important to keep those figures in mind.

If you’re deep in CSS, you’ll want to read the whole post. Andy goes on to explain the methodology and how he writes CSS, then wraps up saying…

This isn’t a heavily documented, complex methodology. Well, not now, anyway. It’s more of a concept method of organizing CSS just enough to not pull to far away from the “classic” way of writing it. Really, it’s more of a thinking structure.

Learnamberwilson.co.uk

CSS tips for new devs

A delightful list of 24 tips that Amber dubs as “for new devs”, but I’ll just go ahead and scratch the new out of there and it still fits the bill.

CSS expertise comes with time! While CSS is easy to start with and gives you immediate visual results, mastering it takes time and this is perfectly okay 😃. It is the same for everyone.

CSSgithub.com

Preview minimal CSS frameworks with this drop-in switcher

Minimal CSS “frameworks” are on the rise. There are so many of them now that it’s hard to compare apples to apples. This’ll help.

This is a quick drop-in CSS switcher to allow for previewing some of the many minimal CSS-only frameworks that are available. See the demo or drop the switcher into your own page to see how different frameworks would look together with your content.

This project only includes minimal frameworks, in other words, boilerplate / classless frameworks that require no adjustment of the corresponding HTML and can be simply dropped into the project to provide a starting point for further design. No additional javascript, compiling, pre-processors, or fiddling with classes should be required for these to look good and be responsive.

CSSgithub.com

A ridiculously small responsive CSS framework

lit is 395 bytes small. For reference, here’s 395 bytes of Lorem Ipsum text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at gravida nibh. Aenean vulputate ante quam. In imperdiet fermentum risus, vel varius dui vehicula non. Nunc gravida faucibus erat, vitae accumsan eros accumsan eget. Nam at fringilla turpis. Aenean mollis diam leo, quis eleifend ex efficitur sit amet. Sed porttitor quis mauris eu varius. Sed viverra sagittis dapibus blandit.

0:00 / 0:00