CSS Tips & Tricks

CSS has many techniques that developers do not always know about. The tips and tricks below cover solutions for common problems such as centering, sticky footer, fluid typography, dark mode, and performance optimization.

Some tips use the latest CSS features that you may not know yet, such as clamp(), aspect-ratio, content-visibility, and media queries for accessibility preferences. Other tips are patterns that have been around for a long time but are powerful.

Understanding these tips will speed up your workflow and result in cleaner, more maintainable code.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  /* === 1. Center Anything === */
  .center-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    background: #667eea;
    border-radius: 8px;
    color: white;
    margin-bottom: 10px;
  }

  .center-grid {
    display: grid;
    place-items: center;
    height: 120px;
    background: #764ba2;
    border-radius: 8px;
    color: white;
    margin-bottom: 10px;
  }

  .center-absolute {
    position: relative;
    height: 120px;
    background: #4ecdc4;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .center-absolute span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
  }

  .center-text {
    text-align: center;
    line-height: 120px;
    height: 120px;
    background: #f093fb;
    border-radius: 8px;
    color: white;
    margin-bottom: 20px;
  }

  /* === 2. Sticky Footer === */
  .page-layout {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .page-header {
    padding: 12px 20px;
    background: #1a1a2e;
    color: white;
    font-weight: bold;
  }

  .page-content {
    flex: 1;
    padding: 20px;
    color: #555;
  }

  .page-footer {
    padding: 12px 20px;
    background: #333;
    color: #aaa;
    text-align: center;
    font-size: 0.85em;
  }

  /* === 3. Aspect Ratio === */
  .aspect-box {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    max-width: 350px;
    margin-bottom: 20px;
  }

  /* === 4. Fluid Typography with clamp() === */
  .fluid-title {
    font-size: clamp(1.2rem, 4vw, 2.5rem);
    color: #333;
    margin-bottom: 10px;
  }

  .fluid-text {
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
  }

  /* === 5. Dark Mode === */
  .dark-mode-box {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: background 0.3s, color 0.3s;
    background: #f5f5f5;
    color: #333;
  }

  @media (prefers-color-scheme: dark) {
    .dark-mode-box {
      background: #2d2d44;
      color: #e0e0e0;
    }
  }

  /* === 6. Reduced Motion === */
  .animated-box {
    width: 60px;
    height: 60px;
    background: #667eea;
    border-radius: 10px;
    animation: float 2s ease-in-out infinite;
    margin: 10px auto 20px;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .animated-box {
      animation: none;
    }
  }

  /* === 7. Content Visibility === */
  .long-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
    padding: 20px;
    margin-bottom: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  /* === 8. Will-change === */
  .smooth-element {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 10px;
  }

  .smooth-element:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }

  /* === 9. Contain === */
  .contained {
    contain: layout style paint;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 10px;
  }

  /* === 10. BEM Naming (brief) === */
  .card {
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 10px;
  }

  .card__title {
    margin: 0 0 8px;
    color: #333;
  }

  .card__text {
    color: #666;
    font-size: 0.9em;
    margin: 0;
  }

  .card--featured {
    border: 2px solid #667eea;
  }

  .card--dark {
    background: #1a1a2e;
    color: white;
  }

  .card--dark .card__title {
    color: white;
  }

  .card--dark .card__text {
    color: #aaa;
  }

  /* Section */
  .section {
    max-width: 700px;
    margin: 0 auto 30px;
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .section h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
  }

  .tip-label {
    display: inline-block;
    background: #667eea;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .code-inline {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
    color: #e74c3c;
  }
</style>
</head>
<body>
  <div class="section">
    <span class="tip-label">TIP 1</span>
    <h3>Center Anything</h3>
    <div class="center-flex">Flexbox: align-items + justify-content</div>
    <div class="center-grid">Grid: place-items: center (simplest)</div>
    <div class="center-absolute"><span>Absolute + translate(-50%, -50%)</span></div>
    <div class="center-text">Text-align + line-height = height</div>
  </div>

  <div class="section">
    <span class="tip-label">TIP 2</span>
    <h3>Sticky Footer (Flexbox)</h3>
    <div class="page-layout">
      <div class="page-header">Header</div>
      <div class="page-content">
        Content goes here. The footer stays at the bottom even with little content.
        <br><code class="code-inline">min-height: 100vh; display: flex; flex-direction: column; main { flex: 1; }</code>
      </div>
      <div class="page-footer">Footer — always at the bottom</div>
    </div>
  </div>

  <div class="section">
    <span class="tip-label">TIP 3</span>
    <h3>Aspect Ratio</h3>
    <div class="aspect-box">16:9</div>
    <p style="font-size:0.9em;color:#888;margin:0;">
      <code class="code-inline">aspect-ratio: 16/9</code> — no more padding-bottom trick!
    </p>
  </div>

  <div class="section">
    <span class="tip-label">TIP 4</span>
    <h3>Fluid Typography with clamp()</h3>
    <h2 class="fluid-title">A Fluid Title</h2>
    <p class="fluid-text">This text automatically adjusts its size based on the viewport width. Use <code class="code-inline">clamp(min, preferred, max)</code> for fluid typography without media queries.</p>
    <p style="font-size:0.85em;color:#888;margin:0;">
      <code class="code-inline">font-size: clamp(1.2rem, 4vw, 2.5rem)</code>
    </p>
  </div>

  <div class="section">
    <span class="tip-label">TIP 5</span>
    <h3>Dark Mode (System Preference)</h3>
    <div class="dark-mode-box">
      This box automatically changes color following the system preference. Use <code class="code-inline">@media (prefers-color-scheme: dark)</code>.
    </div>
  </div>

  <div class="section">
    <span class="tip-label">TIP 6</span>
    <h3>Respect Reduced Motion</h3>
    <div class="animated-box"></div>
    <p style="font-size:0.85em;color:#888;margin:0;">
      <code class="code-inline">@media (prefers-reduced-motion: reduce)</code> — turn off animations for users who are sensitive terhadap gerakan.
    </p>
  </div>

  <div class="section">
    <span class="tip-label">TIP 7</span>
    <h3>Content Visibility (Performa)</h3>
    <div class="long-section">
      <code class="code-inline">content-visibility: auto</code> — The browser skips rendering sections that are not yet visible. A performance boost for long pages.
    </div>
    <div class="long-section">
      <code class="code-inline">contain-intrinsic-size: 0 500px</code> — give the browser a hint about the section's size.
    </div>
  </div>

  <div class="section">
    <span class="tip-label">TIP 8</span>
    <h3>Will-change & Contain</h3>
    <div class="smooth-element">
      <code class="code-inline">will-change: transform</code> — a hint to the browser for GPU acceleration.
    </div>
    <div class="contained">
      <code class="code-inline">contain: layout style paint</code> — limits the scope of CSS changes to be more efficient.
    </div>
  </div>

  <div class="section">
    <span class="tip-label">TIP 9</span>
    <h3>BEM Naming (Brief)</h3>
    <div class="card">
      <h4 class="card__title">Card Default</h4>
      <p class="card__text">.block__element--modifier</p>
    </div>
    <div class="card card--featured">
      <h4 class="card__title">Card Featured</h4>
      <p class="card__text">.card--featured</p>
    </div>
    <div class="card card--dark">
      <h4 class="card__title">Card Dark</h4>
      <p class="card__text">.card--dark</p>
    </div>
  </div>

  <div class="section">
    <span class="tip-label">REFERENSI</span>
    <h3>Tools & Resources</h3>
    <ul style="font-size:0.9em;color:#555;line-height:2;">
      <li><strong>CSS-Tricks</strong> — complete articles about any CSS topic</li>
      <li><strong>Can I Use</strong> — check browser compatibility</li>
      <li><strong>DevTools > Computed</strong> — debugging specificity</li>
      <li><strong>DevTools > Rendering</strong> — simulate prefers-reduced-motion</li>
      <li><strong>DevTools > Layers</strong> — inspect CSS layers</li>
      <li><strong>Open Props</strong> — CSS custom properties library</li>
      <li><strong>Every Layout</strong> — layout patterns using CSS</li>
    </ul>
  </div>
</body>
</html>

Code Explanation

Center Anything: Four ways to center:
1. Flexbox: display: flex; align-items: center; justify-content: center
2. Grid: display: grid; place-items: center (shortest)
3. Absolute: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
4. Text: text-align: center; line-height: [same as height]

Sticky Footer: min-height: 100vh; display: flex; flex-direction: column on the container, flex: 1 on the main content area. The footer always stays at the bottom even with little content.

Aspect Ratio: The aspect-ratio: 16/9 property replaces the old padding-bottom trick. The browser calculates the height based on the width.

clamp(): A CSS function for fluid values. clamp(min, preferred, max) — the preferred value uses vw for fluidity, with min/max as the bounds. Example: clamp(1.2rem, 4vw, 2.5rem).

prefers-color-scheme: dark: A media query that detects the system's dark mode preference. Styles inside this block are applied when the user is using dark mode.

prefers-reduced-motion: reduce: A media query for users who have enabled "reduce motion" in their system settings. Disable or reduce animations.

content-visibility: auto: The browser skips rendering sections that are not yet in the viewport. A dramatic performance boost for long pages. contain-intrinsic-size gives a size hint.

will-change: A hint to the browser that a specific property will be animated. The browser can prepare GPU layers. Do not overuse it.

contain: Limits the scope of CSS changes. contain: layout style paint prevents changes inside a container from affecting elements outside of it.

BEM: The block__element--modifier naming convention. Block = component, Element = part, Modifier = variation.

Everyday Use Cases

Responsive design: Use clamp() for fluid typography and spacing without many media queries.

Performance: content-visibility: auto on sections below the fold to speed up the initial render.

Accessibility: prefers-reduced-motion to respect user preferences. prefers-color-scheme for automatic dark mode.

Maintainability: BEM naming for large projects with many components.

Conclusion

These CSS tips and tricks cover centering (4 ways), sticky footer, aspect-ratio, fluid typography with clamp(), dark mode, reduced motion, content-visibility for performance, will-change and contain for optimization, and BEM naming for maintainability. Tools such as Can I Use and browser DevTools are very helpful for debugging. Keep learning — CSS keeps evolving with new powerful features.