If you’ve been intrigued by Tailwind and utility-first CSS ever since listening to JS Party #65 with Adam Wathan, but you’ve never gotten around to playing with it… here’s your opportunity. Pop a browser tab, futz with the settings, and see the results in real-time on the right side of the window.
read more
This article is Chris Coyier doing what Chris Coyier does best: pulling on people’s views from around the community, then sprinkling in his own take as he goes.
read more
Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think. No kidding! Margin collapsing has got to be one of the hardest things about CSS for new developers, and this article not only goes into it and how to avoid it, but explains the “why” behind it.
read more
I’ve always felt a little put off by the clip-path property, thinking it was rather obscure and probably not worth learning. Boy was I wrong. In this article Travis Almand takes us through how incredibly powerful this property is, and how by animating it you can create a range of beautiful transition effects with a few simple lines of CSS.
read more
A brilliant look at how CSS custom properties allow you to both utilize the cascade and provide some level of scoping and proximity-based styling. Prior solutions include the ‘big blunt hammer’ of inheritance-based styling or ignoring the cascade completely utilizing methodologies like BEM, but as author Miriam Suzanne points out: Custom properties provide a new, browser-native solution; they inherit like any other property, but they don’t have to be used where they are defined.
read more
There’s been a lot of buzz recently about things like Tailwind and functional/utility-first CSS (for more on that, check out JSParty #65 with the creator of Tailwind), but there has also been some pushback against the approach. This article spells out some of the concerns, and why this may be more of a reaction against learning CSS than a new best practice. Author Jay Freestone, after summing up a series of challenges: In summary, functional CSS doesn’t make much sense to me, as a front-end developer. I’d suggest that a dedicated front-end team would be more productive managing their own CSS approach, rather than being tied into the straitjacket of a standardised class library.
read more
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 background-image property to do a wide variety of things. To many, it’s like an old friend, but it’s one we should consider saying goodbye 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
