My Favorite CSS Features of Last Year and Why You Should Use Them
Categories

CSS continues to evolve, offering developers new tools to solve age-old problems and improve workflows.
Recent CSS advancements have brought a host of powerful new features that streamline styling, enhance readability, and make layouts more responsive. Here’s a look at my favorite CSS features from the past year, the problems they solve, and why you should start using them today.
1. inset
The inset
shorthand combines top
, right
, bottom
, and left
properties into a single declaration. It simplifies positioning for absolutely positioned elements and improves code readability.
Problem Solved:
Instead of writing four separate properties, you can now use one line, reducing repetition and potential errors.
Example:
.element {
position: absolute;
inset: 10px 20px 15px 25px; /* top, right, bottom, left */
}
Why Use It:
inset
not only saves time but also makes your stylesheets cleaner. If you work with layouts or modals, you’ll appreciate how much easier positioning becomes.
2. 1cap
(Font Relative Units)
The 1cap
unit is a font-relative measurement based on the height of the capital letters in a typeface. It allows for precise vertical alignment and spacing.
Problem Solved:
Traditional units like em
and px
often fail to align text perfectly because they don’t account for capital letter height. 1cap
fixes this by aligning content more naturally with the typeface.
Example:
.heading {
line-height: 1.1cap; /* Very tight line-height */
}
Why Use It:
For projects where typography plays a key role, 1cap
offers superior control over spacing and alignment, ensuring consistency across designs.
3. margin-block
and margin-inline
These logical properties allow you to define margins based on the writing mode of the document, making your styles adaptable to different languages and layouts.
Problem Solved:
Traditional margin-top
, margin-bottom
, margin-left
, and margin-right
aren’t intuitive in right-to-left (RTL) or vertical writing modes. margin-block
(vertical) and margin-inline
(horizontal) adapt automatically.
Example:
.element {
margin-block: 10px 20px; /* top and bottom */
margin-inline: 15px; /* left and right */
}
Why Use It:
If you work on multilingual or global websites, these properties make your code future-proof, reducing the need for layout rewrites when adding RTL support. This also works with the padding
property as well.
4. :has()
The :has()
pseudo-class brings parent selectors to CSS. It allows you to style an element based on its children or descendants.
Problem Solved:
Previously, there was no way to select a parent element dynamically based on its children’s state.
Example:
.card:has(.highlight) {
border: 2px solid gold;
}
Why Use It:
:has()
unlocks powerful new possibilities, such as styling parent elements dynamically, improving interactivity and reducing the need for JavaScript in many cases.
5. :not()
Enhancements
The :not()
pseudo-class now supports multiple arguments, making it more versatile.
Problem Solved:
Previously, you could only exclude one selector at a time, leading to verbose and repetitive CSS.
Example:
.element:not(.disabled, .hidden) {
opacity: 1;
}
Why Use It:
It’s cleaner, more readable, and saves time when styling elements that should avoid multiple states or classes. I often use it to remove certain elements when using GSAP animations.
6. More Pseudo-Classes for Interactivity
New pseudo-classes like :is()
, :where()
, and :focus-visible
enhance interactivity and simplify targeting specific states.
:is()
simplifies complex selectors.:where()
has zero specificity, making it perfect for overriding styles.:focus-visible
distinguishes between keyboard and mouse focus for accessibility.
Problem Solved:
These pseudo-classes reduce CSS complexity and make your styles more maintainable.
Example:
button:is(:hover, :focus-visible) {
background-color: blue;
}
Why Use Them:
They make interactive styling easier, more accessible, and less error-prone.
7. CSS Nesting
CSS nesting allows you to write cleaner, more organized styles by nesting child selectors within parent rules.
Problem Solved:
Deeply nested styles often lead to repetitive code and difficulty tracking relationships between elements.
Example:
.card {
background: white;
.card__header {
font-weight: bold;
}
.card__content {
padding: 10px;
}
}
Why Use It:
Nesting mirrors the structure of HTML, making it easier to read and maintain your styles. It’s especially useful for component-based design.
8. text-wrap: balance
The text-wrap: balance
property ensures text wraps evenly across multiple lines, improving readability.
Problem Solved:
Traditional line breaking can leave one line significantly longer or shorter than others, which looks unbalanced and awkward.
Example:
h1 {
text-wrap: balance;
}
Why Use It:
It enhances the visual appeal of headings and improves legibility, especially for designs with larger text.
9. unset
The unset
property allows you to reset default styles on an element.
Problem Solved:
Sometimes, default browser styles or inherited properties can interfere with your design. Manually overriding each property is tedious. all: unset
simplifies this by resetting everything to its initial or inherited state.
Example:
.reset-element {
all: unset;
}
Why Use It:
When you want a completely clean slate to style an element from scratch—such as custom components or third-party integrations—all: unset
is your go-to tool.
10. subgrid
The subgrid
property extends the power of CSS Grid by allowing child elements of a grid container to align with the parent grid’s rows and columns.
Problem Solved:
Previously, child grids couldn’t share alignment with the parent grid, leading to inconsistent layouts and workarounds. With subgrid
, you can now align nested elements directly with the parent grid.
Example:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
.sub-container {
display: grid;
grid-template-columns: subgrid; /* Align with parent grid */
}
Why It’s a Game Changer:
subgrid
eliminates the need for hacks or redundant markup to maintain alignment. It’s perfect for complex layouts, like card designs or multi-level grids, where child elements need to align seamlessly with the parent. This feature enhances design consistency and reduces the complexity of responsive layouts.
Final Thoughts
These CSS features aren’t just “nice-to-haves” — they solve real-world problems, reduce the need for JavaScript, and make your stylesheets cleaner and more maintainable. Whether you’re improving text readability with text-wrap: balance
, simplifying selectors with :has()
and :not()
, or creating layouts with logical properties like margin-block
, these tools should be in your arsenal.
CSS is more powerful and intuitive than ever—start using these features to write better, smarter styles today!