LSCSS

Apply

Containing hacks

Urgent fixes are sometimes unavoidable — legacy coupling, browser quirks, or a release that cannot wait for a full refactor. The hacks layer keeps those changes in one place: layered last, clearly named, and separate from components and theme so they stay easy to find, review, and remove before they become permanent architecture.

Quick decision rules

  1. Is this temporary and urgent?

    YesHacks

    NoNext question

  2. Is this a real structural fix?

    YesComponent or layout

    NoNext question

  3. Is this only visual presentation?

    YesTheme, not hacks

    No

    A hack should be obvious, justified, and easier to remove than it was to add.

For the shorter hack vs real fix flow, seedecision trees.

Why the hacks layer exists

Production sometimes needs a fast correction before the real refactor is possible. The hacks layer gives those urgent fixes a visible quarantine zone instead of hiding them inside normal component files.

This protects the rest of the system from temporary decisions pretending to be design choices.

Visible hacks

CSS code example
@layer hacks {
    .legacy-slider {
        inset-block-start: -1px;
    }
}

A good hack is isolated in the hacks layer, clearly named, and documented enough that nobody has to perform archaeology to remove it later.

Hidden hacks and permanent emergencies

CSS code example
.product-card {
    margin-block-end: 12px !important;
}

.site-header {
    z-index: 999999;
}

These are not sustainable fixes. Hidden important declarations and panic z-index values create ongoing debugging overhead, not maintainable systems.

  • Do not hide hacks inside normal component files.
  • Do not use theme as a hiding place for temporary fixes.
  • Do not leave undocumented important declarations behind.
  • Do not let emergency values become permanent architecture.

Working rules

  • If it survives long enough to feel normal, review it.
  • If it needs explaining twice, it probably needs a real fix.
  • If it exists because of legacy CSS, keep it near that legacy context.
  • If it is no longer temporary, move it or remove it.
  • Hacks should be visible enough to make people slightly uncomfortable.

Next useful pages