8 Essential CSS Techniques for Clean, Maintainable, and Conflict‑Free Styles

Writing concise and elegant CSS not only improves maintainability but also reduces style conflicts. This article presents eight practical techniques to enhance CSS code quality.

1. Make the most of CSS variables to improve code reusability

Benefits of using CSS variables:

Centralized theme color values

Change in one place, effective everywhere

Supports runtime dynamic modifications

Improves code maintainability

2. Use :is() and :where() to simplify selectors

/* previous syntax */
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
  margin-bottom: 16px;
}

/* simplified with :is() */
.card :is(h2, h3, h4, h5, h6) {
  margin-bottom: 16px;
}

/* lower specificity with :where() */
:where(.card, .panel, .box) p {
  line-height: 1.5;
}

This technique can:

Reduce code duplication

Improve readability

Flexibly control selector specificity

3. Leverage aspect-ratio to control width‑height ratios

/* common 16:9 video container */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* square avatar container */
.avatar {
  width: 100px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

This property is especially suitable for:

Responsive image layouts

Video containers

Card grid layouts

Maintaining fixed element proportions

4. Use clamp() for responsive values

.title {
  /* min 16px, max 32px, dynamic based on viewport width */
  font-size: clamp(16px, 4vw, 32px);
}

.container {
  /* responsive padding */
  padding: clamp(1rem, 3vw, 3rem);
  /* responsive width */
  width: clamp(320px, 80vw, 1200px);
}

Advantages of clamp():

No media queries needed

Smooth transitions

More concise code

Prevents content overflow

5. Use gap property to simplify layout spacing

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /* can set row and column gaps separately */
  /* gap: 16px 24px; */
}

Benefits of gap:

Replaces traditional margins

Easier spacing maintenance

Supported in flex and grid layouts

Avoids margin collapse issues

6. Use logical properties to adapt to different writing directions

.container {
  /* replace margin-left/right */
  margin-inline: auto;
  /* replace padding-top/bottom */
  padding-block: 2rem;
  /* replace width */
  inline-size: 100%;
  /* replace height */
  block-size: auto;
}

Advantages of logical properties:

Better internationalization support

Adapts to various writing modes

More semantic code

Simplifies RTL adaptation

7. Use :has() to select parent elements

/* style when card contains an image */
.card:has(img) {
  padding: 0;
}

/* style when form has invalid input */
.form:has(:invalid) {
  border-color: red;
}

/* hide empty lists */
ul:not(:has(li)) {
  display: none;
}

Application scenarios for :has():

Modify parent based on child state

Implement complex conditional styling

Reduce JavaScript usage

Increase style dynamism

8. Use @layer to manage style priority

@layer base, components, utilities;

@layer base {
  h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
}

Advantages of @layer:

Clear style priority

Better code organization

Avoids priority chaos

Facilitates maintenance of large projects

Feel free to leave comments and add more tips.