Modern CSS Might Make Your Front-End More Complex
Comments on “Modern CSS Might Make Your Front-End More Complex”
Claim-checked. Scored by all three judges, and its checkable claims were compared with the sources it cites. How far stories are checked
In a Smashing Magazine essay, Gabriel Shoyombo argues that replacing JavaScript with modern CSS can shrink a diff while making the system harder to reason about. His examples: a leftover ResizeObserver class that fights a container query, container-type changing margins, floats and width, and :has() selectors outweighing existing rules. In his own Chrome test with 5,000 rows, two harmless :has() rules together restyled 5,001 elements per toggle, about 7ms, and 31ms at 20,000 rows. It is one page, one browser, and he has filed a Chromium issue.
Why it ranked
No. 13 of 137 with a score of 0.68. The panel rated it highest on new information (0.89) and technical depth (0.88), lowest on significance (0.49). Placed No. 13, No. 19 by score alone: the placement terms moved other stories past it.
- AI judgeJudge 2claude-haiku-5-5
- Practical CSS engineering essay with concrete, reproducible demos and measurements on container queries and :has(); niche to front-end builders, moderate significance, substantive technical depth, few overclaims.}
- AI judgeJudge 3gpt-5.6-luna
- A technically detailed, practical CSS migration analysis with concrete failure modes, browser behavior, performance measurements, demos, and a useful checklist. Its scope is primarily front-end engineering and design, with limited broader industry significance.
Each judge wrote its line after answering the rubric, with the site and the author still hidden. Every answer behind this is in the table under Score.
Score
0.68total under rubric v2.3
- Significance0.49
- Reader interest0.76
- Audience breadth0.57
- Practical relevance0.83
- Substantiated0.81
- Technical depth0.88
- New information0.89
- Counts against: Promotional0.03
- Counts against: Overclaim0.16
Each judge’s answer per question (0–1), their mean and spread, and what the question adds to the score (weight × mean).
| Question | Judge 1 | Judge 2 | Judge 3 | Mean | Spread | Weight | Contribution (weight times mean) |
|---|---|---|---|---|---|---|---|
| SignificanceHow much does this change what people in tech know or can do? | 0.61 | 0.30 | 0.55 | 0.49 | 0.31 | +0.24 | +0.117 |
| Reader interestWould a well-informed senior engineer or tech founder want to read this today, and likely pass it on? | 0.70 | 0.72 | 0.86 | 0.76 | 0.16 | +0.26 | +0.198 |
| Audience breadthHow many people who build technology does it concern? | 0.68 | 0.50 | 0.52 | 0.57 | 0.18 | +0.13 | +0.074 |
| Practical relevanceHow useful is it to someone who builds software or tech products? | 0.94 | 0.75 | 0.82 | 0.83 | 0.18 | +0.22 | +0.184 |
| SubstantiatedHow well is it backed? Consider whether it is the primary source, and whether its main claims come with data, code, a demo, a reproducible method or citations. | 0.94 | 0.68 | 0.82 | 0.81 | 0.26 | +0.05 | +0.041 |
| Technical depthHow technically substantive is it? | 1.00 | 0.85 | 0.78 | 0.88 | 0.22 | +0.05 | +0.044 |
| New informationDoes it contain information absent from the stories covered in the last 7 days (list provided)? | 0.89 | 0.80 | 0.98 | 0.89 | 0.18 | +0.05 | +0.045 |
| PromotionalIs it mainly marketing with little substance (a press release, ad or sponsored post with no real information)? A launch post that carries real news is not promotional. | 0.04 | 0.05 | 0.01 | 0.03 | 0.04 | −0.19 | −0.006 |
| OverclaimDo the headline or conclusions claim more than the body supports? | 0.17 | 0.20 | 0.12 | 0.16 | 0.08 | −0.11 | −0.018 |
| Sum of contributions | +0.676 | ||||||
| Claim-check penalty | 0.000 | ||||||
| Total, as published | 0.676 | ||||||
Spread is the highest minus the lowest judge answer. marks a spread above 0.40: the judges disagree, and the story is marked contested.
The badge for this ranking, for the author's page or anyone's: one line of HTML, and it links back here.
<a href="https://rubric.hrih.si/editions/2026-11-04/13/"><img src="https://rubric.hrih.si/badge/2026-11-04/13.svg" alt="Ranked #13 on Rubric, 4 Nov 2026" width="238" height="28"></a>Claim check
Claim check: 6 matches source · 2 no source given. Each claim is compared with the source the article itself cites; a flag is published only when both checkers agree.
Matches sourceQuote
MDN's block formatting context guide lists query containers (elements where container-type isn't normal) among the CSS styles that create a block formatting context.
The cited source says the same thing.
The article says “query containers (elements where container-type isn’t normal”
The source says “Query containers (elements where container-type isn't normal”
Source cited by the article: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Block_formatting_context
Matches sourceQuote
MDN states that elements with size containment will collapse if no contextual or explicit size is available.
The cited source says the same thing.
The article says “If a contextual or explicit size is not available, elements with size containment will collapse”
The source says “If a contextual or explicit size is not available, elements with size containment will collapse”
Source cited by the article: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type
Matches sourceNumber
MDN's specificity guide explains that :has() adds no weight itself but its argument does, giving .card:has(img) p a specificity of 0-1-2 versus 0-1-1 for .comment p.
The cited source says the same thing.
The article says “That gives .card:has(img) p a specificity score of 0-1-2, while .comment p comes in at just 0-1-1 and loses the battle”
The source says “Like nesting, the :is() , :has() , and negation ( :not() ) pseudo-classes themselves add no weight. The parameters in these selectors, however, do”
Source cited by the article: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity
Matches sourceQuote
MDN's nesting guide says the & selector takes the largest specificity in the associated selector list, exactly like :is().
The cited source says the same thing.
The article says “the largest specificity in the associated selector list”
The source says “The specificity of the & nesting selector is calculated using the largest specificity in the associated selector list. This is identical to how specificity is calculated when using the :is()…”
Source cited by the article: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Nesting_and_specificity
Matches sourceQuote
MDN's cascade introduction says normal layered styles have less precedence than normal unlayered styles.
The cited source says the same thing.
The article says “normal layered styles have less precedence than normal unlayered styles”
The source says “normal layered styles have less precedence than normal unlayered styles”
Source cited by the article: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction
Matches sourceQuote
Emilio Cobos Álvarez noted in a CSS Working Group issue that implementations wanted to ship :has() with limitations to prevent performance footguns and complexity.
The cited source says the same thing.
The article says “in order to prevent performance footguns and complexity”
The source says “Multiple implementations want to ship the `:has()` selector with a variety of limitations in order to prevent performance footguns and complexity”
Source cited by the article: github.com/w3c/csswg-drafts/issues/7280
No source givenBenchmark result
In the author's test with 5,000 rows in Chrome, the two :has() rules together took about 7ms per toggle and restyled 5,001 elements, versus under 0.1ms and 1 element for each rule alone.
The article gives no link or citation for it.
The article says “Rules 2 and 3 together About 7ms 5,001”
The source says No source to compare with.
No source givenNumber
With 20,000 rows, the two :has() rules together restyled 20,001 elements and took about 31ms per toggle.
The article gives no link or citation for it.
The article says “When I set the demo to 20,000 rows, the two rules together restyled 20,001 elements and took about 31ms per toggle, which is nearly two frames”
The source says No source to compare with.
Also covered by
No other coverage was clustered with this story.
Elsewhere
Elsewhere: HN —
Recorded for context only, checked 4 Nov 2026, 05:47 UTC. It played no part in the ranking.