First off, everything happens in your CSS file. You can layer this into your websites as you see fit. You can use this to layer on just a little bit more functionality in your CSS here and there or construct an entire page. It’s up to you! If you think this sounds crazy… just wait until you have a look at it: .item { cursor: pointer; --js:( function toggle() { this.classList.toggle('active'); } this.addEventListener('click', toggle ); ); } Play around with CJSS on Codepen, but that’s all I’d advise you to do with it (as would the author).

read more

CSS Grid is a wonderfully powerful technology, making possible incredibly complex and interesting layouts with fractions of the effort of older tools. But with great power comes great responsibility, for it is now also very easy to shoot the accessibility of your site in the foot. Author Rachel Andrew: I think this is something we sorely need to address at a CSS level. We need to provide a way to allow the tab and reading order to follow the visual order. Source order is a good default, if you are taking advantage of normal flow, a lot of the time following the source is exactly what you want. However not always, not at every breakpoint. If we don’t give people a solution for this, we will end up with a mess.

read more

We’re talking with Sacha Greif to discuss the State of CSS survey and results. CSS is evolving faster than ever. And, coming off the heels of their annual State of JavaScript survey, they’ve decided to take on the world of styles and selectors to help identify the latests patterns and trends in CSS. We talk through the history and motivations of this survey, the methodology of their data collection, the tooling involved to build and run the survey, and of course we dig deep into the survey results and talk through the insights we found most interesting.

read more

There’s a lot of CSS love & hate that flows around online, and one of the key reasons it is so polarizing is that it takes a different mental model than most other programming. Author Max Böck has put together a list of some of the items that go into that mental model: For most people who write CSS professionally, the mindset just comes naturally after a while. Many developers have that “aha!” moment when things finally start to click. It’s not just about knowing all the technical details, it’s more about a general sense of the ideas behind the language. I tried to list some of these here.

read more

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.

read more

This is the coolest webpage I’ve seen in awhile. The way the quine is accomplished is so brilliantly simple, it almost feels like cheating. It’s brilliant, by the way, because of the esoteric knowledge required to pull it off. It’s simple, because it’s literally a single CSS rule.

read more

Andrew Welch of nystudio107 digs into why our age old stalwart the CSS background-image property may have outlived it’s most common usecases. Many of us have cut our teeth using the CSS back­ground-image prop­er­ty to do a wide variety of things. To many, it’s like an old friend, but it’s one we should con­sid­er say­ing good­bye to.

read more

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…

read more

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!

read more

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.

read more

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 😮

read more

Once the extensions is installed, open a css, scss, js, jsx or tsx file and toggle on the sidebar.

read more

Huge thanks to Sarah Drasner for creating and sharing this with the world! Generate basic CSS Grid code to make dynamic layouts!

read more

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.

read more

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.

read more

It’s easy to hate on the idea of a ‘full stack’ developer, with memes abounding and article after article claiming that ‘full stack’ developers are a myth. In this piece, Chris Coyier asks an even more fundamental question: What does it even mean to be a ‘full stack’ developer? What do you think?

read more

A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed. You’re gonna want to click through and then click around. 💯

read more

This is a truly glorious hack. How do they do it? Background-images loaded via pseudoselectors + a forever-loading index page (remember Comet?). There’s a more detailed explanation of what’s going on here in the README. Hopefully doesn’t need to be said, but I’ll say it anyway just in case: don’t try this at $HOME

read more

CSSBattle is a fun developer game where players replicate visual targets using the smallest possible code and climb the leaderboards. Looks like a fun way to waste spend your Friday afternoon…

read more

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.

read more

Chris Coyier joins Suz and Jerod to continue the discussion on The Great Divide in front-end-land. We also use this as an opportunity to gush on how much CSS-Tricks has done for the community, get Chris’ perspective on the history of the website, and finish up by sharing some amazing Pens on CodePen.io.

read more

Panelist Jerod Santo and first-time panelist Adam Stacoviak talk with Adam Wathan of Full Stack Radio fame about his CSS utility library called Tailwind CSS that’s growing in popularity to rapidly build custom user interfaces.

read more

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!

read more

This is notable/different because it uses descriptive HTML rather than semantic CSS classes: <grid columns=8> <c></c> <c span=3>3</c> <c></c> <c span=7-8>7-8</c> <c span=2+2>2+2</c> <c span=5-8>5-8</c> <c span=1-4>1-4</c> <c span=6..>6..</c> <c span=2..>2..</c> <c span=4..>4..</c> <c span=1-2>1-2</c> <c span=4-5>4-5</c> </grid>

read more

Use dynamic prop based styles with the React bindings and have them transpiled to CSS variables automatically. Great productivity with source maps and linting support. When it comes to web frameworks: ("build-time").wired? && ("run-time").tired?

read more