? From the Blog
The Differing Perspectives on CSS-in-JS
Drama! Feelings! Muuuuurder! Okay, that last one not so much. But folks tend to have BIG opinions when it comes to styling things with JavaScript—whether that’s with CSS Modules, emotion or any other system that lets you write CSS within a JavaScript file.
So in this post, Chris thankfully breaks down the who, what, and why of CSS-in-JS and tries to rid it of all the dang drama:
👎 Some people outright hate the idea of CSS-in-JS. Just that name is offensive. Hard no. Styling doesn’t belong in JavaScript, it belongs in CSS, a thing that already exists and that browsers are optimized to use. Separation of concerns. Anything else is a laughable misstep, a sign of not learning from the mistakes of the past (like the
fonttag and such.)
👍 Some people outright love the idea of CSS-in-JS. The co-location of templates and functionality, à la most JavaScript frameworks, has proven successful to them, so wrapping in styles seems like a natural fit.
I think a lot of this probably depends on the project and team you’re working on. If you’re on a snappy team working on lots of little websites then you probably don’t need a CSS-in-JS solution. But if you’re working on a giant app with hundreds of engineers all contributing to that codebase then you need to address the concerns of everyone working on it.
That’s where the drama comes from, I think. Front-end development solutions change depending on the problem you’re trying to solve and sometimes it can be particularly difficult to see the argument from that other side.
Weekly Platform News
Perhaps the most exciting thing that’s happened in web development lately is Chrome shipping a native solution for lazy loading images and assets. Šime Vidas has the scoop:
The HTML loading attribute for lazy-loading images and iframes is now supported in Chrome. You can add loading=”lazy” to defer the loading of images and iframes that are below the viewport until the user scrolls near them.
Google suggests either treating this feature as a progressive enhancement or using it on top of your existing JavaScript-based lazy-loading solution.
Houssein Djirdeh also noted that when one web app used the loading attribute to images they made significant performance improvements to their app.
Chrome, feature-wise, moves a lot faster than other browsers as a whole. Dave Rupert once described it like Chrome is DDoSing other browsers with feature onslaught (tounge-in-cheek, but puts a point on the situation well). So it doesn’t always feel right to start cracking the whip at other browsers the second Chrome drops something new. In this case though, the performance benefits are so great for something so easy for authors to do, I’d like to see it happen cross-browser sooner than later.
Oh and hey, here on CSS-Tricks, since it’s a WordPress site which makes it easy to filter content, we’re looking for any HTML that contains a src="" and filtering it to also include loading="lazy".
WooCommerce
WooCommerce is the most popular e-commerce platform on the web. Use WooCommerce to sell anything from luxury mattresses and cupcakes, to date-driven sales like kayak lessons, to one-off items like beautiful hand-crafted jewelry.
The Making of an Animated Favicon
Preethi Sam writes in to walk through how to make an animated favicon with an invisible canvas element that’s hidden on the page and which is then added to the head of the document with a little JavaScript. Pretty neat, huh?
Wait, but why is this useful though?
Imagine you’re backing up photos from your recent summer vacation to a cloud service. While they are uploading, you’ve opened a new tab to gather details about the places you went on vacation to later annotate those photos. One thing led to the other, and now you’re watching Casey Neistat on the seventh tab. But you can’t continue your YouTube marathon without the anxious intervals of checking back on the cloud service page to see if the photos have been uploaded.
It’s this type of situation where we can get creative! What if we could dynamically change the pixels in that favicon and display the upload progress? That’s exactly what we’ll do in this article.
I can think of a couple of scenarios where this might be useful outside of loading. Perhaps you want to have a success or warning message flash up, that might also be a good time to animate or update the favicon to show that the state of the page has changed in some form, too.
In search of a stack that monitors the quality and complexity of CSS
Project Wallace is a nifty website and command-line tool that shows a breakdown of your CSS and how you might want to go about improving things.
I’m a huge fan of this tool because I think it’s really easy to let things slide with CSS and get a bit lazy when you’re working on a giant, complex system of styles. Sometimes you need a helping nudge to remind you that you could spend an extra five minutes re-writing this thing, deleting that old selector, unbundling that one big CSS file.
Accessibility and web performance are not features, they’re the baseline
Lately, I’ve been thinking a lot about performance and accessibility and how often the two appear to be tied together in some way. A lot of modern web development tools, such as AMP, suggest that we have to pick one over the other for some reason and so in this piece I thoroughly disagree with that whole idea.
Instead, I reckon we have to start to see performance and accessibility as being the baseline of a good website:
I think it’s important to make note of Deb Chachra’s argument that “any sufficiently advanced negligence is indistinguishable from malice.” With that in mind, it’s not just bad software design and development if a website is slow. Performance and accessibility aren’t features that can linger at the bottom of a Jira board to be considered later when it’s convenient.
Instead we must start to see inaccessible and slow websites for what they are: a form of cruelty. And if we want to build a web that is truly a World Wide Web, a place for all and everyone, a web that is accessible and fast for as many people as possible, and one that will outlive us all, then first we must make our websites something else altogether; we must make them kind.
The best thing is that it’s never been easier to make a fast and performant website. We have all the tools! Now all we have to do is put them to good use.
Flywheel
CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the business, with a local development tool to match. We love Flywheel. It’s hosting that’s actually optimized and built for WordPress, ensuring a smooth content editing and management experience you won’t find anywhere else. Give it a try and experience the difference for yourself.
Hey random thing: we started an Instagram account for CSS-Tricks now.