Honey Butter

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!