CSS Icon

CSS

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

Bradley Taunt bradleytaunt.com

Making tables responsive with minimal CSS

There’s still a use case for tables!! No seriously, there is. If you’d like to learn how to optimize table elements for mobile using minimal CSS, read on…

My recent article, Write HTML Like It’s 1999, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how table elements don’t play nice with mobile devices or that it’s not possible to have a useable layout on smaller screens. This simply isn’t true.

Brad Frost bradfrost.com

Reducing motion with the picture element

The prefers-reduced-motion media query is a great tool for improving accessibility and helping users with visual impairments that make animations and such hard to follow, but did you know you can use it inside a picture element with a srcset? Brad writes:

This technique would definitely be helpful for posts with embedded animated GIFs in it. Authors would have to grab a static frame of a GIF as a fallback, so there’s a bit of extra work involved, but the technical execution is pretty dang straightforward.

What would be even cooler is if blogging and social media services did this automatically…

CodyHouse Icon CodyHouse

Benefits of CSS custom properties over Sass variables

While they may have been inspired by Sass variables, CSS custom properties are a whole other level of powerful, enabling some elegant new patterns in UI development. Just ask Sebastiano Guerriero:

Are they the same? Not really! Unlike SASS variables, custom properties 1) are scoped to the element they are declared on, 2) cascade and 3) can be manipulated in JavaScript. These three features open a whole new world of possibilities. Let me show you some practical examples!

CSS Wizardry Icon CSS Wizardry

Self-host your static assets

A revealing look at the costs and risks of linking out to CDN-hosted assets for common libraries. This “best practice” may be anything but, especially with today’s ease of setting up CDNs in front of your own content with tools like Cloudflare.

On the practice of linking to 3rd party CDNs, Harry doesn’t hold back:

There are a number of perceived benefits to doing this, but my aim later in this article is to either debunk these claims, or show how other costs vastly outweigh them.

CSS joshwcomeau.com

Folding the DOM

This absolutely floored me. Beautiful step by step demonstration of creating 3D interactive effects using React and CSS, all on vanilla DOM nodes.

I typically think of web effects in two dimensions, but as author Josh Comeau says:

And yet, for years now, browsers have bundled in a surprisingly capable 3D CSS engine! Someone even built an experimental first-person shooter prototype using it 😮

Design betterwebtype.com

The state of fluid web typography

Matej Latin takes us through the current state of fluid typography on the web:

Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues. Is fluid web typography ready to be used?

TLDR: No, it’s not ready. But you should still read the article, which has a great breakdown of pros and cons of fluid typography and other typography approaches.

freeCodeCamp Icon freeCodeCamp

CSS rules that will make your life easier

This is a solid set of recommendations from Nick Gard that will help you keep your CSS in order and in good shape. There’s a lot of rules that relate to accessibility, others to consistency, and some just to simple maintainability, but all are good to at least consider.

After years of writing and maintaining a couple of very large web projects and numerous smaller ones, I have developed some heuristics for writing maintainable CSS. I have used BEM, SMACSS, and CSS Modules for naming, though this article is not about naming, per se. (I tend to use a mix of atomic classes and BEM-ish naming.) This article is more about the properties and values I use or avoid.

CSS github.com

A just-add-css collection of styles to make simple websites just a little nicer

I commonly make quick demo pages or websites with simple content. For these, I don’t want to spend time styling them but don’t like the uglyness of the default styles.

Water.css is a css framework that doesn’t require any classes. You just include it in your and forget about it, while it silently makes everything nicer.

Includes a light theme and a dark theme. Demo here.

Max Stoiber mxstbr.com

Why I write CSS in JavaScript

You might be on the fence with CSS-in-JS — especially after hearing from Rich Harris about Svelte on The Changelog #332. Max Stoiber writing on his personal blog with his take on the matter:

Primarily, CSS-in-JS boosts my confidence. I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets!

Andy Bell andy-bell.design

CSS doesn’t suck

Andy makes three compelling arguments in favor of CSS. This conversation is ever more critical as our industry grows and matures.

It’s turning into a bit of a trend—particularly in the JavaScript community—to crap on CSS wherever possible. I could lambaste those who frequently do this, but instead, I thought I’d write about CSS positively to counter the falsities that are spread over the tech tyre fire that is Twitter.

Cathy Dutton cathydutton.co.uk

Stepping away from Sass

Cathy Dutton:

the more I looked at my old Sass files the more I questioned whether it was adding value to my site, or just an extra level of complexity and dependency. CSS has evolved over recent years and [sic] the problems that lead me to Sass in the first place seem to be less of an issue today.

Lots of great examples in Cathy’s post. While I’m not 100 percent convinced to leave Sass, its days are numbered. CSS has come a long way since I started using Sass in 2012, and while I feel the syntax settled on for variables is a bit verbose, there’s no question it’s pretty powerful.

0:00 / 0:00