A pre-deploy check refused a deploy over a font size. The credit line in the footer, a small studio mark followed by the words it credits, measured 16px sitting in a row set at 12px. The check compares the name against its parent and fails outside a narrow ratio band, and 16 over 12 is 1.33.
That element ships into product sites whose stylesheets carry thousands of lines I did not write by hand, and it has to hold its shape in all of them. In this repo it appears on twelve paragraphs across ten section components. Fixing it took three passes, and only one of them was ordinary specificity.
1. !important does not beat a more specific !important
The anchor has to sit in flow, inside a sentence. The original rule was footer a[href^="https://kynth.studio"], which is one attribute and two element names: (0,1,2). A rule further down the sheet set position: absolute on the same element with two classes, (0,2,0), and it also carried !important.
Importance only picks which pile of declarations wins. Inside that pile, specificity still decides. So the glyph went absolute and painted over the first letters of the name, and stacking more !important on my side changed nothing. The fix was to re-anchor the selector so it outranks the other one on its own terms:
html body a.kynth-credit[href],
footer a[href^="https://kynth.studio"] {
display: inline-flex !important;
position: static !important;
line-height: 1 !important; /* centre the mark on the letterforms, not on the leading */
font-size: inherit !important;
}html body a.kynth-credit[href] is (0,2,3).
App interface (left) generating a product certification document (right) for a wooden toy — The tool transforms compliance requirements into structured, machine-readable certificates with specific product details.
2. min-width is not in the fight at all
The mark is a ::before with a background image, and its box was pinned with width: 14px !important. It still painted far larger in places. A min-width declared elsewhere on interactive descendants clamps the used value after the cascade has already resolved width. Those are two different properties, so there is no contest to win, and !important on one of them says nothing about the other.
The box now declares all three, and sizes to its own sentence rather than to a constant:
width: max(1em, 14px) !important;
min-width: max(1em, 14px) !important;
max-width: max(1em, 14px) !important;A fixed 14px glyph reads correctly beside 12px prose and reads as a stray dot beside a credit line set near 28px, which is what one sibling site sets it at. 1em tracks the text, and the floor keeps it legible in small print.
3. The class landed, and lost anyway
For the font size I added a dedicated class rather than reusing the existing label class, which styles twenty other labels. The CSS shipped. The class was on the element in the rendered DOM. The name still measured 16px.
Reading the browser's list of matching rules showed the reason: the credit sits inside a .link-7 ancestor I had assumed it was not inside, so .link-7 .service-label:not(.rich-text-wrapper) at (0,3,0) was beating my .kynth-credit-name:not(.rich-text-wrapper) at (0,2,0). The :not() contributes its argument's specificity on both sides, so it cancels out.
| Declared | What actually decided it | Fix |
|---|---|---|
position: static !important at (0,1,2) | a later !important at (0,2,0); importance ties break on specificity | re-anchor as html body a.kynth-credit[href], (0,2,3) |
width: 14px !important on the ::before | a min-width elsewhere clamps the used width; different property, no cascade contest | declare width, min-width and max-width together |
.kynth-credit-name:not(...) at (0,2,0) | .link-7 .service-label:not(...) at (0,3,0), from an ancestor I assumed was absent | repeat the class to reach (0,3,0) |
Repeating the class is what shipped:
.kynth-credit-name.kynth-credit-name:not(.rich-text-wrapper),
.kynth-credit-name.kynth-credit-name.rich-text-wrapper p {
--rt-font-size: 14px;
}That reaches a tie at (0,3,0), and a tie goes to whichever rule comes later in the sheet. Mine sits at line 11699, the other at line 6443. No !important, and no dependency on .link-7 being there, which would break the day a footer variant renders the credit outside one.
Only the desktop rule was ever out of band. The same losing selector is re-declared at 14px and 15px inside two width breakpoints, so every phone-width screenshot of that footer looked completely fine.
That's how we built CertScope.
One shipped product, taken apart, once a month. What it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did — read off the repository and the live site, not written from memory. Join the list.
← All writing