I totally get the goal here: make CSS more modular and scalable in WordPress. Put all your global WordPress theme styles in a single file, including variations. JSON offers a nicely structured syntax that’s easily consumable by JavaScript, thereby allowing the sweet affordance of loading exactly what we want when we want it.
The problem, to me, is that writing “CSS” in a theme.json file is a complete mental model switcher-oo. Rather than selectors, we have a whole set of objects we have to know about just to select something. We have JSON properties that look and feel like CSS properties, only they have to be camelCased being JavaScript and all. And we’re configuring features in the middle of the styles, meaning we’ve lost a clear separation of concerns.
I’m playing devil’s advocate, of course. There’s a lot of upside to abstracting CSS with JSON for the very niche purpose of theming CMS templates and components. But after a decade of “CSS-in-JS is the Way™” I’m less inclined to buy into it. CSS is the bee’s knees just the way it is and I’m OK relying on it solely, whether it’s in the required style.css file or some other plain ol’ CSS file I generate. But that also means I’m losing out on the WordPress features that require you to write styles in a theme.json file, like style variations that can be toggled directly in the WordPress admin.
One of the interesting (but annoying) things about CSS is the background of children’s elements can bleed out of the border radius of the parent element. Here’s an example of a card with an inner element. If the inner element is given a background, it can bleed out of the card’s border.
CodePen Embed Fallback
The easiest way to resolve this problem is to add overflow: hidden to the card element. I’m sure that’s the go-to solution most of us reach for when this happens.
But doing this creates a new problem — content outside the card element gets clipped off — so you can’t use negative margins or position: absolute to shift the children’s content out of the card.
CodePen Embed Fallback
There is a slightly more tedious — but more effective — way to prevent a child’s background from bleeding out of the parent’s border-radius. And that is to add the same border-radius to the child element.
The easiest way to do this is allowing the child to inherit the parent’s border-radius:
.child {
border-radius: inherit;
}
CodePen Embed Fallback
If the border-radius shorthand is too much, you can still inherit the radius for each of the four corners on a case-by-case basis:
Or, for those of you who’re willing to use logical properties, here’s the equivalent. (For an easier way to understand logical properties, replace top and left with start, and bottom and right with end.)
If you have a background directly on the .card that contains the border-radius, you will achieve the same effect. So, why not?
CodePen Embed Fallback
Well, sometimes you can’t do that. One situation is when you have a .card that’s split into two, and only one part is colored in.
CodePen Embed Fallback
So, why should we do this?
Peace of mind is probably the best reason. At the very least, you know you won’t be creating problems down the road with the radius manipulation solution.
This pattern is going to be especially helpful when CSS Anchor Positioning gains full support. I expect that would become the norm popover positioning soon in about 1-2 years.
That said, for popovers, I personally prefer to move the popover content out of the document flow and into the element as a direct descendant. By doing this, I prevent overflow: hidden from cutting off any of my popovers when I use anchor positioning.
What’s in a word? Actions. In the realm of user interfaces, a word is construed as the telltale of a control’s action. Sometimes it points us in the correct direction, and sometimes it leads us astray. We talk a lot about semantics in front-end web development, but outside of code, semantics are at the heart of copywriting where each word we convey can mean different things to different people. Words, if done right, add clarity and direction.
As a web user, I’ve come across words in user interfaces that have misled me. And not necessarily by design, either. Some words are synonymous with others and their true meaning depends entirely on context. Some words are easy to mistake for an unintended meaning because they are packed with so much meaning. A word might belong to a fellowship of interchangeable words.
Although I’m quite riled up when I misread content on a page — upset at the lack of clarity more than anything — as a developer, I can’t say I’ve always chosen the best possible words or combination of words for all the user interfaces I’ve ever made. But experience, both as a user and a developer, has elevated my commonsense when it comes to some of the literary choices I make while coding.
This article covers the words I choose for endings, to help users move away, and move on, without any confusion from the current process they are at on the screen. I went down this rabbit hole because I often find that ending something can mean many things — whether it be canceling an action, quitting an application, closing an element, navigating back, exiting a chat interaction… You get the idea. There are many ways to say that something is done, complete, and ready to move on to something else. I want to add clarity to that.
Getting Canceled
If there’s a Hall of Fame for button labels, this is the Babe Ruth of them all. “Cancel” is a widely used word to indicate an action that ends something. Cancel is a sharp, tenacious action. The person wants to bail on some process that didn’t go the way they expected it to. Maybe the page reveals a form that the person didn’t realize would be so long, so they want to back off. It could be something you have no control over whatsoever, like that person realizing they do not have their credit card information handy during checkout and they have to come back another time.
Cancel can feel personal at times, right? Don’t like the shipping costs calculated at checkout? Cancel the payment. Don’t like the newsletter? Cancel The Subscription. But really, the person only wants to undo an incorrect action or decision leaving no trace of it behind in favor of a clean slate to try again… or not.
The only times I feel betrayed by the word cancel is when the process I’m trying to end continues anyway. That comes up most when submitting forms with incorrect information. I enter something inadvertently, hit a big red Cancel button, yet the information I’ve “saved” persists to the extent that I either need to contact customer support or start looking for alternatives.
That’s the bottom line: Use “cancel” as an opportunity to confirm. It’s the person telling you, “Hey, that’s not actually what I meant to do,” and you get to step in and be the hero to wipe the mistake clean and set things up for a second chance. We’re not technically “ending” anything but rather starting clean and picking things back up for a better go. Think about that the next time you find yourself needing a label that encourages the user to try again. You might even consider synonyms that are less closely associated with closed endings, such as reset or retry.
Quitting or Exiting?
Quit window, quit tab, quit app — now we’re talking about finality. When we “quit” or “exit” something, we’re changing course. We’ve made progress in one direction and decide it’s time to chart a different path. If we’re thinking about it in terms of freeway traffic, you might say that “quitting” is akin to pulling over and killing the engine, and “exiting” is taking leaving the freeway for another road. There’s a difference, although the two terms are closely related.
As far as we’re concerned as developers, quit and exit are hard stop points in an application. It’s been put to rest. Nothing else beyond this should be possible except its rebirth when the service is restarted or reopened. So, if your page is capable of nuking the current experience and the user takes it, then quit is the better label to make that point. We’re quitting and have no plans to restart or re-engage. If you were to “quit” your job, it’s not like your employer is expecting you to report for duty on Monday… or any other day for that matter.
But here’s my general advice about the word quit: only use it if you have to. I see very few use cases where we actually want to offer someone a true way to quit something. It’s so effective at conveying finality in web interfaces that it shuts the door on any future actions. For instance, I find that cancel often works in its place. And, personally, I find that saying “cancel payment” is more widely applicable. It’s softer and less rigid in the sense that it leaves the possibility to resume a process down the road.
Quit is also a simple process. Just clear everything and be gone. But if quitting means the user might lose some valuable data or progress, then that’s something they have to be warned about. In that case, exit and save may be better guidance.
I consider Exit the gentler twin of Quit. I prefer Quit just for the ultimatum of it. I see Exit used less frequently in interfaces than I see Quit. In rare cases, I might see Exit used specifically because of its softer nature to Quit even though “quitting” is the correct semantic choice given that the user really wants to wipe things clean and the assurance that nothing is left behind. Sometimes a “tougher” term is more reassuring.
Exit, however, is an excellent choice for actions that represent the end of human-to-human interactions — things like Exit Group, Exit Chat, Exit Streaming, Exit Class. If this person is kindly saying goodbye to someone or something but open to future interactions, allow them to exit when they’re done. They’re not quitting anything and we aren’t shoving them out the door.
Going Back (and Forth)
Let’s talk about navigation. That’s the way we describe moving around the internet. We navigate from one place to another, to another, to another, and so on. It’s a journey of putting one digital foot in front of the other on the way to somewhere. That journey comes to an end when we get to our destination… or when we “quit” or “exit” the journey as we discussed above.
But the journey may take twists and turns. Not all movement is linear on the web. That’s why we often leave breadcrumbs in interfaces, right? It’s wayfinding on the web and provides people with a way to go “back” where they came from. Maybe that person forgot a step and needs to head back in order to move forward again.
In other words, back displaces people — laterally and hierarchically. Laterally, back (and its synonym, previous), backtracks across the same level in a process, for instance, between two sections of the same form, or two pages of the same document. Hierarchically, back — not to mention more explicit variants like “home” — is a level above that in the navigation hierarchy.
I like the explicit nature of saying something like “Home” when it comes to navigating someone “back” to a location or state. There’s no ambiguity there: hey, let’s go back home. Being explicit opens you up to more verbose labels but brevity isn’t always the goal. Even in iconography, adding more detail to a visual can help add clarity. The same is true with content in user interfaces. My favorite example is the classic “Back to Top” button on many pages that navigate you to the “top” of the page. We’re going “back to the top” which would not have been clear if we had used “Back” alone. Back where? That’s an important question — particularly when working with in-page anchors — and the answer may not be as obvious to others as it is to you. Communicating that level of hierarchy explicitly is a navigational feature.
While the “Back to Top” example I gave is a better illustration of lateral displacement than hierarchical displacement, I tend to avoid the label back with any sort of lateral navigation because moving laterally typically involves navigating between states more than navigating between pages. For example, the user may be navigating from a “logged in” state to a “logged out” state. In this case, I prefer being even more explicit — e.g., Save and Go Back, or Cancel and Go Home — than hierarchical navigation because we’re changing states on top of moving away from something.
Closing Down
Close is yet another term you’ll find in the wild for conveying the “end” of something. It’s quite similar to Back in the sense that it serves dual purposes. It can be for navigation — close the current page and go back — or it can be for canceling an action — close the current page, and either discard or save all the data entered so far.
I prefer Close for neither of those cases. If we’re in the context of navigation, I like the clarity of the more explicit guidance we discussed above, e.g., Go Back, Previous, or Go Home. Giving someone an instruction to Close doesn’t say where that person is going to land once navigating away from the current page. And if we’re dealing with actions, Save and Close affirms the person that their data will be saved, rather than simply “closing” it out. If we were to simply say “cancel” instead, the insinuation is that the user is quitting the action and can expect to lose their work.
The one time I do feel that “Close” is the ideal label is working with pop-up dialogues and modals. Placing “Close” at the top-right (or the block-start, inline-end edge if we’re talking logical directions) corner is more than clear enough about what happens to the pop-up or modal when clicking it. We can afford to be a little less explicit with our semantics when someone’s focus is trapped in a specific context.
The End.
I’ve saved the best for last, right? There’s no better way to connote an ending than simply calling it the “end”. It works well when we pair it with what’s ending.
End Chat. End Stream. End Webinar.
You’re terminating an established connection, not with a process, but with a human. And this is not some abrupt termination like Quit or Cancel. It’s more of a proper goodbye. Consider it also a synonym to Exit because the person ending the interaction may simply be taking a break. They’re not necessarily quitting something for good. Let’s leave the light on the front patio for them to return later and pick things back up..
And speaking of end, we’ve reached the end of this article. That’s the tricky, but liberating, thing about content semantics — some words may technically be correct but still mislead site visitors. It’s not that we’re ever trying to give someone bad directions, but it can still happen because this is a world where there are many ways of saying the same thing. Our goal is to be unambiguous and the milestone is clarity. Settling on the right word or combination of words takes effort. Anyone who has struggled with naming things in code knows about this. It’s the same for naming things outside of code.
I did not make an attempt to cover each and every word or way to convey endings. The point is that our words matter and we have all the choice and freedom in the world to find the best fit. But maybe you’ve recently run into a situation where you needed to “end” something and communicate that in an interface. Did you rely on something definitive and permanent (e.g. quit) or did you find that softer language (e.g. exit) was the better direction? What other synonyms did you consider? I’d love to know!
Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between dark and light themes, but the options are starting to get increasingly sophisticated.
In this set, we have dark and light options, images and text-only options, color changes, whole theme change options, a custom text option, and even image editing options. This type of interaction differs from event-triggered animations and transitions. For the best effect, simplicity in layout is usually best, as is the case with these examples. Enjoy!
Luxury chocolate brand Montezuma’s has updated its website to improve the user experience. The color scheme and casual typeface match the product packaging, which in turn reflects the company’s ethical brand identity.
The type choices add crispness and modernity to this predominantly black and white design for Sake High. The contrast adds extra depth to the occasional color photos.
This is a fun little site with the serious intention of reducing stress. It has been established that micro-interactions and feedback make users feel good, and that is what Confetti Therapy is all about: click a button and pop some confetti from the direction of your choice.
The animation on this architectural firm’s site, particularly the transitions, makes for a really pleasing user experience. The fresh yellow accent color adds zest to the clean layout.
High quality photographs are cleverly combined with mockups to allow the user to visualize the product as it could be. Information is available but broken into small chunks to let the images take the lead.
Following Wildfire is a now sadly all too rare example of social media, technology, and good design combining to make something that is genuinely useful. Publicly available photos are scanned for signs of potential wildfire and added to the interactive map.
Sound Ethics advocates for artists’ rights and new standards for ethical AI. Their aim is not to exclude AI but to make it work for musicians and artists instead of against them. The site makes a statement with dark background images contrasted with neon yellow-green.
The architecture for this restaurant chain website does a good job of centralizing content that applies to all its branches – for example, menus – while at the same time allowing each branch its own identity.
Orken is a new fantasy portrayed across different media and is due to launch soon on Kickstarter. This teaser site provides sample illustrations and video clips and offers just enough information to intrigue the user.
Cotton candy pink and smiley faces might not seem the obvious choice for an agency with the word ‘serious’ in its name, but actually, the contradiction works really well here.
This teaser page for The Cure’s new album harks back to a time when it was deemed acceptable to let users play about and discover things for themselves. It’s simple but fun and more intriguing than the usual ‘big red button’ CTAs.
This is a resource hub for Stripe developers, with videos, articles, and community links. It’s also a lot of fun. The default styling is basic black and white with highlighter highlights, but there is a console that allows you to mess about with everything that isn’t actual practical content. And play snake.
Branding agency Treize Grammes re-designed their site to meet changes they had experienced in their business. The result is well structured and indicates a high level of competence. The choice of colors and the sliding switch motif add personality and approachableness.
The Netlify platform is celebrating reaching 5 million developers with this interactive game. Each waypoint in the game reveals a piece of Netifly’s story so far.
This site for market research agency Sonder combines bright colors with crisp type and a clean layout to create a look that is confident and positive in tone.
Brutalist lives on in this visually basic but also pleasing site for design and technology studio Printer Scanner. Clicking on the logotype swaps the overall theme randomly between two dark versions and two light versions.
This is a well-structured portfolio site with a clean layout and intuitive flow. As an extra demonstration of the subject’s frontend development skills, there are options to switch between dark or light mode, images or text only mode, and color or grayscale.
Unsurprisingly perhaps, photographs are the dominant element in this site for surfer and snowboarder Mathieu Crepel. Photographs are even used for the menu instead of the usual text or icons. It’s unusual, but it works here.
The concept behind PackBags is customized bags put together from a set of components (body, strap, carabiner) chosen by the customer. The site is clear and easy to follow, and the configurator is very user-friendly.
CSS gradients have been so long that there’s no need to rehash what they are and how to use them. You have surely encountered them at some point in your front-end journey, and if you follow me, you also know that I use them all the time. I use them for CSS patterns, nice CSS decorations, and even CSS loaders. But even so, gradients have a tough syntax that can get very complicated very quickly if you’re not paying attention.
In this article, we are not going to make complex stuff with CSS gradients. Instead, we’re keeping things simple and I am going to walk through all of the incredible things we can do with just one gradient.
Only one gradient? In this case, reading the doc should be enough, no?
No, not really. Follow along and you will see that gradients are easy at their most basic, but are super powerful if we push them — or in this case, just one — to their limits.
CSS patterns
One of the first things you learn with gradients is that we can establish repeatable patterns with them. You’ve probably seen some examples of checkerboard patterns in the wild. That’s something we can quickly pull off with a single CSS gradient. In this case, we can reach for the repeating-conic-gradient() function:
Pretty simple so far, right? You have two colors that you can easily swap out for other colors, plus the background-size property to control the square shapes.
If we change the color stops — where one color stops and another starts — we get another cool pattern based on triangles:
If you compare the CSS for the two demos we’ve seen so far, you’ll see that all I did was divide the color stops in half, 25% to 12.5% and 50% to 25%.
Another one? Let’s go!
CodePen Embed Fallback
This time I’m working with CSS variables. I like this because variables make it infinitely easier to configure the gradients by updating a few values without actually touching the syntax. The calculation is a little more complex this time around, as it relies on trigonometric functions to get accurate values.
I know what you are thinking: Trigonometry? That sounds hard. That is certainly true, particularly if you’re new to CSS gradients. A good way to visualize the pattern is to disable the repetition using the no-repeat value. This isolates the pattern to one instance so that you clearly see what’s getting repeated. The following example declares background-image without a background-size so you can see the tile that repeats and better understand each gradient:
CodePen Embed Fallback
I want to avoid a step-by-step tutorial for each and every example we’re covering so that I can share lots more examples without getting lost in the weeds. Instead, I’ll point you to three articles you can refer to that get into those weeds and allow you to pick apart our examples.
I’ll also encourage you to open my online collection of patterns for even more examples. Most of the examples are made with multiple gradients, but there are plenty that use only one. The goal of this article is to learn a few “single gradient” tricks — but the ultimate goal is to be able to combine as many gradients as possible to create cool stuff!
Grid lines
Let’s start with the following example:
CodePen Embed Fallback
You might claim that this belongs under “Patterns” — and you are right! But let’s make it more flexible by adding variables for controlling the thickness and the total number of cells. In other words, let’s create a grid!
.grid-lines {
--n: 3; /* number of rows */
--m: 5; /* number of columns */
--s: 80px; /* control the size of the grid */
--t: 2px; /* the thickness */
width: calc(var(--m)*var(--s) + var(--t));
height: calc(var(--n)*var(--s) + var(--t));
background:
conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0)
0 0/var(--s) var(--s);
}
First of all, let’s isolate the gradient to better understand the repetition (like we did in the previous section).
CodePen Embed Fallback
One repetition will give us a horizontal and a vertical line. The size of the gradient is controlled by the variable --s, so we define the width and height as a multiplier to get as many lines as we want to establish the grid pattern.
What’s with “+ var(--t)” in the equation?
The grid winds up like this without it:
CodePen Embed Fallback
We are missing lines at the right and the bottom which is logical considering the gradient we are using. To fix this, the gradient needs to be repeated one more time, but not at full size. For this reason, we are adding the thickness to the equation to have enough space for the extra repetition and the get the missing lines.
CodePen Embed Fallback
And what about a responsive configuration where the number of columns depends on the available space? We remove the --m variable and define the width like this:
Instead of multiplying things, we use the round() function to tell the browser to make the element full width and round the value to be a multiple of --s. In other words, the browser will find the multiplier for us!
Resize the below and see how the grid behaves:
CodePen Embed Fallback
In the future, we will also be able to do this with the calc-size() function:
Using calc-size() is essentially the same as the last example, but instead of using 100% we consider auto to be the width value. It’s still early to adopt such syntax. You can test the result in the latest version of Chrome at the time of this writing:
CodePen Embed Fallback
Dashed lines
Let’s try something different: vertical (or horizontal) dashed lines where we can control everything.
.dashed-lines {
--t: 2px; /* thickness of the lines */
--g: 50px; /* gap between lines */
--s: 12px; /* size of the dashes */
background:
conic-gradient(at var(--t) 50%, #0000 75%, #000 0)
var(--g)/calc(var(--g) + var(--t)) var(--s);
}
CodePen Embed Fallback
Can you figure out how it works? Here is a figure with hints:
Try creating the horizontal version on your own. Here’s a demo that shows how I tackled it, but give it a try before peeking at it.
What about a grid with dashed lines — is that possible?
Yes, but using two gradients instead of one. The code is published over at my collection of CSS shapes. And yes, the responsive behavior is there as well!
CodePen Embed Fallback
Rainbow gradient
How would you create the following gradient in CSS?
You might start by picking as many color values along the rainbow as you can, then chaining them in a linear-gradient:
linear-gradient(90deg, red, yellow, green, /* etc. */, red);
Good idea, but it won’t get you all the way there. Plus, it requires you to juggle color stops and fuss with them until you get things just right.
There is a simpler solution. We can accomplish this with just one color!
background: linear-gradient(90deg in hsl longer hue, red 0 0);
I know, the syntax looks strange if you’re seeing the new color interpolation for the first time.
If I only declare this:
background: linear-gradient(90deg, red, red); /* or (90deg, red 0 0) */
…the browser creates a gradient that goes from red to red… red everywhere! When we set this “in hsl“, we’re changing the color space used for the interpolation between the colors:
background: linear-gradient(90deg in hsl, red, red);
Now, the browser will create a gradient that goes from red to red… this time using the HSL color space rather than the default RGB color space. Nothing changes visually… still see red everywhere.
The longer hue bit is what’s interesting. When we’re in the HSL color space, the hue channel’s value is an angle unit (e.g., 25deg). You can see the HSL color space as a circle where the angle defines the position of the color within that circle.
Since it’s a circle, we can move between two points using a “short” path or “long” path.
If we consider the same point (red in our case) it means that the “short” path contains only red and the “long” path runs into all the colors as it traverses the color space.
CodePen Embed Fallback
Adam Argyle published a very detailed guide on high-definition colors in CSS. I recommend reading it because you will find all the features we’re covering (this section in particular) to get more context on how everything comes together.
We can use the same technique to create a color wheel using a conic-gradient:
And while we are on the topic of CSS colors, I shared another fun trick that allows you to define an array of color values… yes, in CSS! And it only uses a single gradient as well.
Hover effects
Let’s do another exercise, this time working with hover effects. We tend to rely on pseudo-elements and extra elements when it comes to things like applying underlines and overlays on hover, and we tend to forget that gradients are equally, if not more, effective for getting the job done.
Case in point. Let’s use a single gradient to form an underline that slides on hover:
You likely would have used a pseudo-element for this, right? I think that’s probably how most people would approach it. It’s a viable solution but I find that using a gradient instead results in cleaner, more concise CSS.
Creating shapes with gradients is my favorite thing to do in CSS. I’ve been doing it for what feels like forever and love it so much that I published a “Modern Guide for Making CSS Shapes” over at Smashing Magazine earlier this year. I hope you check it out not only to learn more tricks but to see just how many shapes we can create with such a small amount of code — many that rely only on a single CSS gradient.
Some of my favorites include zig-zag borders:
CodePen Embed Fallback
…and “scooped” corners:
CodePen Embed Fallback
…as well as sparkles:
CodePen Embed Fallback
…and common icons like the plus sign:
CodePen Embed Fallback
I won’t get into the details of creating these shapes to avoid making this article long and boring. Read the guide and visit my CSS Shape collection and you’ll have everything you need to make these, and more!
Border image tricks
Let’s do one more before we put a cap on this. Earlier this year, I discovered how awesome the CSS border-image property is for creating different kinds of decorations and shapes. And guess what? border-image limits us to using just one gradient, so we are obliged to follow that restriction.
Again, just one gradient and we get a bunch of fun results. I’ll drop in my favorites like I did in the last section. Starting with a gradient overlay:
CodePen Embed Fallback
We can use this technique for a full-width background:
CodePen Embed Fallback
…as well as heading dividers:
CodePen Embed Fallback
…and even ribbons:
CodePen Embed Fallback
All of these have traditionally required hacks, magic numbers, and other workarounds. It’s awesome to see modern CSS making things more effortless. Go read my article on this topic to find all the interesting stuff you can make using border-image.
Wrapping up
I hope you enjoyed this collection of “single-gradient” tricks. Most folks I know tend to use gradients to create, well, gradients. But as we’ve seen, they are more powerful and can be used for lots of other things, like drawing shapes.
I like to add a reminder at the end of an article like this that the goal is not to restrict yourself to using one gradient. You can use more! The goal is to get a better handle on how gradients work and push them in interesting ways — that, in turn, makes us better at writing CSS. So, go forth and experiment — I’d love to see what you make!
More times than I can count, while writing, I get myself into random but interesting topics with little relation to the original post. In the end, I have to make the simple but painful choice of deleting or archiving hours of research and writing because I know most people click on a post with a certain expectation of what they’ll get, and I know it isn’t me bombing them with unrelated rants about CSS.
This happened to me while working on Monday’s article about at-rules. All I did there was focus on a number of recipes to test browser support for CSS at-rules. In the process, I began to realize, geez we have so many new at-rules — I wonder how many of them are from this year alone. That’s the rabbit hole I found myself in once I wrapped up the article I was working on.
And guess what, my hunch was right: 2024 has brought more at-rules than an entire decade of CSS.
It all started when I asked myself why we got a selector() wrapper function for the @supports at-rule but are still waiting for an at-rule() version. I can’t pinpoint the exact reasoning there, but I’m certain rthere wasn’t much of a need to check the support of at-rules because, well, there weren’t that many of them — it’s just recently that we got a windfall of at-rules.
Some historical context
So, right around 1998 when the CSS 2 recommendation was released, @import and @page were the only at-rules that made it into the CSS spec. That’s pretty much how things remained until the CSS 2.1 recommendation in 2011 introduced @media. Of course, there were other at-rules like — @font-face, @namespace and @keyframes to name a few — that had already debuted in their own respective modules. By this time, CSS dropped semantic versioning, and the specification didn’t give a true picture of the whole, but rather individual modules organized by feature.
Random tangent: The last accepted consensus says we are at “CSS 3”, but that was a decade ago and some even say we should start getting into CSS 5. Wherever we are is beside the point, although it’s certainly a topic of discussion happening. Is it even useful to have a named version?
The @supports at-rule was released in 2011 in CSS Conditional Rules Module Level 3 — Levels 1 and 2 don’t formally exist but refer to the original CSS 1 and 2 recommendations. We didn’t actually get support for it in most browsers until 2015, and at that time, the existing at-rules already had widespread support. The @supports was only geared towards new properties and values, designed to test browser support for CSS features before attempting to apply styles.
The numbers
As of today, we have a grand total of 18 at-rules in CSS that are supported by at least one major browser. If we look at the year each at-rule was initially defined in a CSSWG Working Draft, we can see they all have been published at a fairly consistent rate:
If we check the number of at-rules supported on each browser per year, however, we can see the massive difference in browser activity:
If we just focus on the last year a major browser shipped each at-rule, we will notice that 2024 has brought us a whopping seven at-rules to date!
I like little thought experiments like this. Something you’re researching leads to researching about the same topic; out of scope, but tangentially related. It may not be the sort of thing you bookmark and reference daily, but it is good cocktail chatter. If nothing else, it’s affirming the feeling that CSS is moving fast, like really fast in a way we haven’t seen since CSS 3 first landed.
It also adds context for the CSS features we have — and don’t have. There was no at-rule() function initially because there weren’t many at-rules to begin with. Now that we’ve exploded with more new at-rules than the past decade combined, it may be no coincidence that just last weekthe Chrome Team updated the function’s status from New to Assigned!
One last note: the reason I’m even thinking about at-rules at all is that we’ve updated the CSS Almanac, expanding it to include more CSS features including at-rules. I’m trying to fill it up and you can always help by becoming a guest writer.
A WordPress theme that doesn’t look modern, doesn’t come with built-in flexibility, and with a developer that doesn’t support it can spell trouble for you down the line. Your website’s design needs to adapt and evolve alongside the business it represents.
A WordPress theme that doesn’t look modern, doesn’t come with built-in flexibility, and with a developer that doesn’t support it can spell trouble for you down the line. Your website’s design needs to adapt and evolve alongside the business it represents.
There are tens of thousands of WordPress themes available on the market. And there are new ones being developed every day. When it comes time to choose a theme for your website and brand, how do you decide which is the best from so many?
In the following review, you’ll discover the best WordPress themes for 2024. They include:
These tried and tested WordPress themes are the best of the best. If you’re looking for incredible designs, intuitive page builders, and feature-packed themes, keep reading.
What do all the top WordPress themes have in common?
There are certain traits that all the best WordPress themes share. Whether you’re looking for a theme for your new website or to replace an existing one, make sure your theme has the following:
User-friendliness: You might see a theme with the most incredible looking pre-built websites or demos. However, if it takes more than a minute to figure out how to edit that theme on the backend, that’s a major issue.
Page builder options: From WordPress’s own builder to Elementor, every page builder has its fans. Finding a WordPress theme that allows you to design and customize your website with an intuitive page builder is critical.
Customizability: One of the drawbacks to using a popular WordPress theme is that it can end up looking like other people’s websites. The best WordPress themes in 2024, however, include a wide variety of website demos. They also give you the ability to customize as much or as little of them as you want.
Design quality: Before you purchase or install a theme, take a look at the multipurpose demos it comes with. They should look like they were built today, not five years ago. You should also be able to find designs made for your niche (or something close to it).
Mobile editing: As more people scour the web from their smartphones, you can’t afford to have a site not built for their screens. While many of the top WordPress themes offer responsive demos, it’s just as important that the page builders have easy-to-use mobile editing tools.
Speed: Speed matters in a number of ways. For starters, your WordPress theme and page builders should load quickly. If you’re having to wait for each new screen to open, editing your site will quickly become a nightmare. Your website visitors will feel the same way if your beautiful web design takes too long to load.
Support: Even the most seasoned of designers need help from time to time. That’s why it’s crucial to use themes that are well-supported by their developers. That includes self-support options like user manuals and video tutorials as well as timely customer support from the theme developer.
11 top WordPress themes for your website projects
Finding the perfect WordPress theme can feel like trying to find a needle in a haystack. The WordPress themes below, however, are the best of the best.
While you can’t go wrong with any of these themes, you might find that some of them are better suited to your current website needs than others. To help you narrow down the options, you’ll find information on their top features, the average customer rating, as well as what real users have to say about them.
TL;DR: UiCore PRO is a WordPress theme tailored explicitly for agencies looking to build unlimited websites under one yearly subscription.
UiCore PRO stands apart from the rest in the realm of WordPress themes. Crafted with agencies in mind, this theme offers unparalleled features designed to elevate your web design game and streamline your operations.
The Startup template, the epitome of sophistication, melds elegant design choices, boundary-pushing content structures, and captivating special effects, all culminating in an unrivaled user experience. Backed by a seamless backend interface, users revel in a hassle-free customization process, free from lag or errors, setting UiCore PRO leagues ahead of the competition.
Agencies looking for a game-changer in WordPress themes gravitate toward UiCore PRO for numerous reasons:
Unlimited Websites: Build limitless sites under one subscription, simplifying your workflow.
Tailored Agency Functionality: Designed specifically to meet the demands of agencies seeking efficiency and excellence.
Strategic Long-Term Investment: A single subscription grants access to a treasure trove of features, making it a smart investment for scaling your agency’s online presence.
Experience the power of UiCore PRO – where unlimited website creation meets unparalleled innovation. Take charge of your agency’s digital landscape today.
Customer testimonial: “This is the most flexible yet powerful theme I’ve used. The use of Elementor with theme blocks and theme settings has let me completely recreate a website in 2 days.”
TL;DR: BeTheme is the best WordPress theme for designers who want one theme for all their websites.
BeTheme is a WordPress theme and page builder all rolled in one. If you’re looking for a powerhouse that will allow you to come up with something original and impressive for your own site or for your clients, you’ve found it.
BeTheme comes with more than 700 pre-built websites. New websites are released monthly, so you’ll always have new, modern designs like BeFurnitureStore to play around with.
BeTheme’s own page builder is another rave-worthy feature. BeBuilder is fast, stable, and user-friendly. What’s more, you can edit any part of your website — including things like the header, footer, and WooCommerce content — with it.
Here are some more reasons to give BeTheme a try:
Time savings. BeTheme’s pre-built websites are just that — full-fledged websites. They’re not templates.
Ease of use. You won’t need to write CSS or install a ton of plugins to wow your visitors with a BeTheme site.
Support. If you run into trouble, BeTheme’s technical support is ready and able to help.
Customer testimonial:“Technical support is excellent. Clear, friendly, and always willing to help to solve any problem. It really pays to have the updated support subscription. Great service.”
TL;DR: Avada is the best WordPress theme for web designers and developers who want a flexible, feature-rich, all-in-one website building solution.
Avada isn’t so much a WordPress theme as it is a complete website builder solution. While this theme comes with 83 pre-built websites and more than 120 design elements, it’s the live visual builder that makes this theme one of the best options for 2024.
Take something like Avada’s pre-built eBike website. Using the live builder, you could easily repurpose this template for other types of small ecommerce shops. And it would feel as though you’re editing it on the website instead of inside of WordPress.
There are other reasons why Avada is a fan favorite in the WordPress community:
Flexibility. You can design anything you imagine with it.
Feature-packed. You won’t need to install or purchase tons of plugins since Avada comes with most, if not all, the features you need.
Fast support. If you have questions or need help, Avada support is helpful and responsive.
Customer testimonial:“I am a web designer, and I purchased this builder for all my clients. I love it. I enjoy how flexible it is and all the ways I can mold different websites, and the many features it comes with, without purchasing anything extra. I’ve been using this builder since 2015 and it keeps getting better and better.”
TL;DR: Uncode is the best multiuse WordPress and WooCommerce theme for professional designers and agencies looking for a go-to solution for any project.
Uncode is one of those multipurpose themes that makes you never want to look at a plugin again. In terms of designing with Uncode, it comes with about 100 demos, 550 premade section wireframes, plus 85 content modules.
Whatever you can dream up, you’ll have an easy time recreating it with Uncode.
Shop Ajax is a great example of what you can do with Uncode. This ecommerce demo is attractive and full of all the features you’d need to improve your customers’ shopping experience (like filters, hover-revealed options, logo integration, and so on).
It’s this level of attention to detail that makes Uncode one of the top WordPress themes.
Here are some other reasons to try Uncode:
Personalization. You can fine-tune as much of your website or shop with Uncode as you want. Variations and settings allow you to go really deep when it comes to editing.
Coding. This theme is really well-coded. So bugs and slow performance won’t be an issue with your websites.
Support. Requests and issues are addressed promptly and in full by the support team.
Customer testimonial:“It is the best WordPress theme out there and the support is top notch (amazing response times and knowledge from their support team). The way it is built is smart and intuitive. Truly easy to use and consistent in all its options. I love it!”
TL;DR: Blocksy is the best free WordPress theme in 2024 for building beautiful, lightweight websites.
Blocksy is a freemium WordPress theme unlike any other. What’s most notable about it is that it is lightning fast — not just to use, but the websites you design with it, too. With performance playing such a big role in SEO these days, this is a big deal.
Blocksy-built websites aren’t just fast. They’re also built with beautiful aesthetics. Take, for instance, the Persona starter site. Modern users will love the dark theme and classy layout.
Anyone editing these starter sites will fall in love with Blocksy, too. This WordPress theme works with the top page builders — WordPress’s Gutenberg, Elementor, Beaver Builder, and Brizy.
There are other reasons why you’ll enjoy working with Blocksy:
It’s free. The free version of Blocksy is feature-packed. Upgrading to premium gives you even more power and flexibility.
Easy to use. You won’t need a comprehensive user’s manual to figure out how to edit this theme.
Helpful support. Users report quick response times and helpful advice.
Customer testimonial:“Blocksy is fast and light, responsive and beautiful. Blocksy has nothing superfluous and has everything you need. I love Blocksy, and Blocksy loves me.”
TL;DR: Total is the best WordPress theme for web designers and developers seeking the flexibility to design from-scratch as well as to use time-saving templates.
Total is the total package. You can build any type of website you want, regardless of your skill level. You also have the ability to design it from-scratch using the WPBakery live customizer or to start with a fully editable and professionally designed template.
Have a look at the Reach demo and you’ll get a sense for the types of designs you can come up with for businesses. In this case, the basic look and layout are smart choices. They’re what make this service provider’s portfolio really pop.
Visit Total’s website and you’ll see how diverse and complex the other demos are. The possibilities will feel endless with Total. And when you’re building websites for dozens of clients every year, that’s important.
Here are other reasons why Total will be one of the best WordPress themes in 2024:
Out of the box. You won’t need to spend hours researching, installing, and setting up plugins to get all the features your site needs. They’re right there out of the box.
Scalability. With features like dynamic templates, global headers, and more, you can program your designs for easier, hands-free scalability.
Well-maintained. Users refer to this support as world-class. They also appreciate the regular updates that add new features to the theme.
Customer testimonial:“Among several themes purchased from ThemeForest, I can say Total theme is the only theme that I can recommend. It is a fast theme with most options already built in, and the support is excellent.”
TL;DR: Litho is the best WordPress theme for users of all experience levels wanting to use a theme that’s well-built and supported.
Litho is one of the best WordPress themes for 2024 for numerous reasons. The one that stands out the most is the level of customer support.
While every great theme has a great team behind it, Litho goes the extra mile when it comes to user support. Whether you have questions about how to get started or experience an issue, you can expect customer service to be super friendly, fast, and capable of solving your problem.
This makes Litho an especially good choice for novice WordPress users and professional designers alike.
Plus, with dedicated support behind you, you won’t feel limited in what you do with the theme. Whether you want to create a startup site or something more complex, someone will be there to help you when you need it.
Here are some more reasons Litho is a good choice:
Versatility. Although there are hundreds of templates available, there are loads of customization options that allow you to design something unique.
Template quality. Litho’s collection of premade designs look fresh and new.
Elementor integration. Elementor is one of the most popular and user-friendly WordPress page builders, guaranteeing an easy editing experience in Litho.
Customer testimonial:“I’m absolutely thrilled with Litho. Its flexibility and customization options allowed me to create a unique and visually stunning website that perfectly fits my vision. The remarkable customer support provided by the team is incredibly responsive, genuinely friendly, and exceptionally helpful.”
TL;DR: Rey is the best WordPress theme for designing full-featured, high-converting ecommerce websites.
Rey is a stylish and modern alternative to WooCommerce’s collection of themes. It’s also a great option if you’re tired of having to outfit great-looking WordPress themes with all the ecommerce features and functionality they’re missing.
Take a glance at the San Francisco demo and you’ll see how incredible these ecommerce sites are. With designs that rival those of luxury brands and wow-inducing product pages, websites built with Rey are sure to impress visitors and turn them into customers.
This WordPress theme seamlessly integrates with Elementor. If you’re familiar with this page builder plugin, then you know how easy it’s going to be to customize any Rey demo you use.
Speaking of customization, here are other reasons why you should consider using Rey:
Customization. If you see a feature or layout you like on another ecommerce site, chances are good you’ll be able to recreate it with Rey.
eCommerce functionality. With Rey, you won’t need to install lots of plugins to make it work how you want.
Support. Rey’s support team does a great job assisting with everything from basic requests to the most complex of problems.
Customer testimonial:“This is by FAR the best theme I have ever purchased from here. So easy to modify, and if you stumble across a roadblock the dev is quick to help!”
TL;DR: WoodMart is the best WooCommerce theme for niche ecommerce design.
WoodMart is a fantastic option if you’re looking to build a niche ecommerce website that is uniquely your own.
This WooCommerce theme comes with more than 80 pre-built demo sites. You’ll find sites for businesses like video game companies, food delivery services, coffee retailers, and furniture stores — like the Furniture 2 demo.
These demos and the hundreds of templates included in the theme are easy to customize. From a global level down to each element on the page, WoodMart gives you all the options and settings needed to customize your designs as much or as little as you need to.
If you get stuck, there’s a search feature built into the settings to help you find the exact setting you need. The theme documentation is helpful, too, if you’re ever feeling stuck or wondering what more you can do.
Here are some other benefits to using WoodMart to design your online shop:
Organized. Many multipurpose themes can feel overwhelming to users. WoodMart is neat, clean, and easy to work with.
Design quality. Even if you’re only using one demo to design your site, you’ll find tons of inspiration amongst the beautiful library of demos and templates.
Mobile design. You won’t have to do much responsive editing as WoodMart’s templates look incredible on mobile out of the box.
Customer testimonial:“A theme could only be this quality, pleasant, practical, professional, wonderful, and tremendous. I don’t know how else to express it. This is truly a work of art designed and programmed with great effort. Some might think I’m exaggerating, but I can clearly say this. It’s the best WordPress theme on ThemeForest, even in the world.”
TL;DR: Impeka is the best WordPress theme for anyone wanting to spend more time designing and creating content instead of trying to master the theme itself.
Impeka has so many great things going for it. But one thing that can’t be denied is how easy Impeka is to use.
That’s not always something you find when using multipurpose WordPress themes. Yet, Impeka’s developer found a way to create a feature-packed and completely customizable theme without making it difficult for users to learn how to use it.
Special attention really does need to be paid to the theme developers. In addition to creating an easy-to-use theme, they provide great support for it, too.
For starters, the theme is updated often and new pre-built sites like the elegant Design Agency Demo are released every month. Secondly, the comprehensive support options and instantaneous customer support are rave-worthy.
Here are some other reasons why users love Impeka so much:
Design quality. Some users compare Impeka’s demos to works of art. They’re that good.
Flexibility. You’ll discover endless possibilities when it comes to how you use this theme and what you design with it.
Documentation. Although Impeka is incredibly easy to use, documentation is comprehensive and makes it easy to work out problems and get answers on your own.
Customer testimonial:“The theme is very flexible and there are endless possibilities to how it is used which the incredible support team are happy to help navigate. I can’t believe how quick and thoroughly responsive the team are. It’s refreshing to get such great support.”
TL;DR: XStore is the best WooCommerce theme for designers and agencies looking to build high-converting online stores.
XStore is a fantastic choice if you’re looking for a WooCommerce theme you can use for a multitude of online stores. With more than 130 pre-built websites and Coming Soon pages, you’ll be able to get your store up and running quickly.
A great ecommerce theme has to do more than just look good. It also needs to include the right features for your shoppers.
In addition to the common functionality needed to run an ecommerce site, XStore also comes with a collection of high-converting features. Product variation swatches, live viewing counters, shopping cart countdowns, and free shipping progress bars, for instance, will help you capture more sales.
Here are some other reasons you might want to use XStore for ecommerce design:
Design quality. XStore’s templates look modern, sleek, and are beautifully laid out, making for a great shopping experience.
Customization. From the header and footer to the languages and currencies, there’s no limit to what you can customize.
Speed. Users rave about how quick their XStore websites load. Even after theme updates, page performance remains high and stable.
Customer testimonial:“I can’t express how thrilled I am with the XStore WordPress theme! It’s truly a game-changer for my website. From the moment I installed it, I was blown away by its stunning design and powerful features.”
Which of these WordPress themes will you try in 2024?
With tens of thousands of great WordPress themes available, you might feel overwhelmed when it comes time to settle on one. Especially if you’re thinking about purchasing a theme.
However, the best WordPress themes are easy to find if you know what you’re looking for.
They’re user-friendly.
They’re either compatible with the most popular page builder plugins or offer an intuitive and flexible editing experience of their own.
There are no limits on what types of websites or shops you can build.
The pre-built websites and demos are top-of-the-line and make creating your own a much faster and enjoyable process.
They allow for responsive editing so your site looks good on all screens.
The themes are fast and stable. And so too are the sites you design with them.
Customer support is there for you when you need it.
If you want to narrow down your search, start with this compilation of 11 top WordPress themes for 2024. Each of them has something special to offer.
Total is the best WordPress theme for web designers and developers seeking the flexibility to design from-scratch as well as to use time-saving templates.
XStore is the best WooCommerce theme for designers and agencies looking to build high-converting online stores.
Conversion features
The reviews above are a good place to start. But don’t let your research stop there.
Spend some time previewing the themes and their page builders (if they have their own). Also, check out the available demos, starters sites, or pre-built websites.
You’ll be able to get a good sense for which theme will suit your needs best once you spend some time with it.
[- This is a sponsored post on behalf of BAW media -]
I sat down with Heydon Pickering in the most recent episode of the Smashing Hour. Full transparency: I was nervous as heck. I’ve admired Heydon’s work for years, and even though we run in similar circles, this was our first time meeting. You know how you build some things up in your mind and sorta psyche yourself out? Yeah, that.
Heydon is nothing short of a gentleman and, I’ll be darned, easy to talk to. As is the case with any Smashing Hour, there’s no script, no agenda, no nothing. We find ourselves getting into the weeds of accessibility testing and documentation — or the lack of it — before sliding into the stuff he’s really interested in and excited about today: styling sound. Dude pulled out a demo and walked me (and everyone else) through the basics of the Web Audio API and how he’s using it to visualize sounds in tons of groovy ways that I now want hooked up to my turntable somehow.
There is an amazing community effort happening in search of a new logo for CSS. I was a bit skeptical at first, as I never really considered CSS a “brand.” Why does it need a logo? For starters, the current logo seems… a bit dated.
Displayed quite prominently is the number 3. As in CSS version 3, or simply CSS3. Depending on your IDE’s selected icon pack of choice, CSS file icons are often only the number 3.
To give an incredibly glossed-over history of CSS3:
Seems like this stems mainly from the discontinuation of version numbering for CSS. These days, we mostly reference newer CSS features by their individual specification level, such as Selectors Level 4 being the current Selectors specification, for example.
A far more general observation on the “progress” of CSS could be taking a look at features being implemented — things like Caniuse and Baseline are great for seeing when certain browsers implemented certain features. Similarly, the Interop Project is a group consisting of browsers figuring out what to implement next.
There are ongoing discussions about the “eras” of CSS, though, and how those may be a way of framing the way we refer to CSS features.
Chris posted about CSS4 here on CSS-Tricks (five years ago!), discussing how successful CSS3 was from a marketing perspective. Jen Simmons also started a discussion back in 2020 on the CSS Working Group’s GitHub about defining CSS4. Knowing that, are you at least somewhat surprised that we have blown right by CSS4 and are technically using CSS5?
CSS3 (~2009-2012): Level 3 CSS specs as defined by the CSSWG
CSS4 (~2013-2018): Essential features that were not part of CSS3, but are already a fundamental part of CSS.
CSS5 (~2019-2024): Newer features whose adoption is steadily growing.
CSS6 (~2025+): Early-stage features that are planned for future CSS.
Check out this slide deck from November 2023 detailing the need for defining stronger versioning. Their goals are clear in my opinion:
Help developers learn CSS.
Help educators teach CSS.
Help employers define modern web skil…
Help the community understand the progression of CSS capabilities over time.
Circling back around to the logo, I have to agree: Yes, it’s time for a change.
Back in August, Adam Argyle opened an issue on the CSS-Next project on GitHub to drum up ideas. The thread is active and ongoing, though appears to be honing in on a release candidate. Let’s take a look at some proposals!
Nils Binder, from 9elements, proposed this lovely design, riffing on the “cascade.” Note the river-like “S” shape flowing through the design.
Regarding the reference to the ‘CSS IS AWESOME’ meme, I initially chuckled, of course. However, at the same time, the meme also represents CSS as something quirky, unpredictable, and full of bugs. I’m not sure if that’s the exact message that needs to be repeated in the logo. It feels like it reinforces the recurring ‘CSS is broken’ mantra. To exaggerate: CSS is subordinate to JS and somehow broken.
Wow, is this the end of an era for the familiar meme?
It’s looking that way, as the current candidate builds off of Javi Aguilar’s proposal. Javi’s design is being iterated upon by the group, it’s shaping up and looks great hanging with friends:
Javi describes the design considerations in the thread. Personally, I’m a fan of the color choice, and the softer shape differentiates it from the more rigid JavaScript and Typescript logos.
As mentioned, the discussion is ongoing and the design is actively being worked on. You can check out the latest versions in Adam’s CodePen demo:
I think the thing that impresses me most about community initiatives like this is the collaboration involved. If you have opinions on the design of the logo, feel free to chime in on the discussion thread!
Once the versions are defined and the logo finalized, the only thing left to decide on will be a mascot for CSS. A chameleon? A peacock? I’m sure the community will choose wisely.
