HTML & CSS - lesson 7 | HackIndia Skills

Key point

One rule

Readable CSS is not about clever selectors. It is about predictable order.

Put broad styles first, components next, and small utilities last. When two rules conflict, you should know which one wins before opening DevTools.

Why CSS gets messy

A college project often starts with one page and one style.css. Then you add a navbar, cards, a form, a footer, and a last-minute sponsor section before submission.

Mess starts when every new fix becomes a stronger selector. You see .page .card form input.primary and stop knowing what is safe to change.

Example

Use layers

Cascade layers give your CSS named priority levels. A selector in a later layer can beat a more specific selector in an earlier layer.

Put the layer order at the top of your CSS so the file explains itself.

@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: #172033;
    background: #f7f8fb;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 3px solid #2457d6;
    outline-offset: 3px;
  }
}

@layer layout {
  .page {
    width: min(100% - 2rem, 960px);
    margin-inline: auto;
  }

  .card-grid {
    display: grid;
    gap: 1rem;
  }
}

@layer components {
  .project-card {
    padding: 1rem;
    border: 1px solid #d9deea;
    border-radius: 0.75rem;
    background: white;
  }
}

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

Your to-do

Structure your file

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Start with the @layer order declaration.
Put reset rules before page defaults.
Keep layout classes for spacing, grid, and flex rules.
Keep component classes for real UI pieces like cards, nav, and forms.
Keep utilities tiny, single-purpose, and near the end.

0 of 5 done

Tip

Name by job

Use class names that say what the element is or does. Good names survive design changes.

Prefer .project-card, .site-header, .signup-form, and .error-message. Avoid names like .blue-box, .left-thing, or .big-text unless the class is truly a small utility.

Common mistake

Avoid selector wars

Do not fix every bug by adding a longer selector or !important. That makes the next bug harder.

If a rule is not applying, first check the layer order, then selector specificity, then source order. Use DevTools instead of guessing.