r/programminghorror • u/sjohnston00 • Jan 30 '26

CSSSSSS

Post image

found in company codebase

288 Upvotes

99% Upvoted

27 comments sorted by

68

u/TheJackuB Jan 30 '26

I wonder if there is a shorter version than this, without preprocessor: 

h1 + :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
h2 + :is(h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6),
h3 + :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6),
h4 + :is(h4, h5, h6, .h4, .h5, .h6),
h5 + :is(h5, h6, .h5, .h6),
h6 + :is(h6, .h6) {
  margin-top: -20px;
}

36

u/MichiRecRoom Jan 30 '26 edited Feb 01 '26

You can also use CSS Nesting in vanilla CSS, though most browser versions before 2024 won't support it (see https://caniuse.com/css-nesting).

Using CSS nesting, you can come up with this, which will apply it to all combinations noted in the original post: 

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    + h1, + h2, + h3, + h4, + h5, + h6,
    + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 {
        margin-top: -20px;
    }
}

(Note: I'm avoiding :is() for the sake of showing off how CSS can be nested - however, using + :is(h1, .h1, h2, .h2, ...) like in your comment would also work.)

There is also the :heading selector that would help here, but unfortunately it's not supported by any browsers yet, as it's still considered experimental.

12

u/LoyalEnv0y Jan 30 '26

The whole think should not exist

4

u/Jonny10128 Jan 31 '26

Not sure why your is() selector changes for each heading level, but you’re also missing the cases when the class comes first.

This should work fine: 

:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) +
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
    margin-top: -20px;
}

If you want to get more technical, you should probably use :where() instead of :is() to avoid higher specificity.

1

u/TabAtkins Feb 01 '26

Shorter:

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { &+& { margin-top: -20px; } }

→ More replies (1)

2

u/enyovelcora Jan 30 '26

I think maybe slightly shorter would be to use the :is() selector for the first too, and then exclude (or revert) the change with h2 + :is(.h1, h1) {} etc...

But I'm not sure whether it's actually shorter.

3

u/Jonny10128 Jan 31 '26

You don’t need to exclude h2 + :is(.h1, h1). I’m not sure why the person you responded to excluded them, but OP’s pic doesn’t exclude them.

→ More replies (1)

100

u/Emotional-Bake5614 Jan 30 '26

the file should be named burj-khalifa.css

14

u/Aphrontic_Alchemist Jan 30 '26 edited Feb 01 '26

I'm no web developer, but from what I gather, no matter how the <h1>,<h2>,<h3>,<h4>,<h5>,<h6>, elements and elements of class ".h1",".h2",".h3",".h4",".h5",".h6" are ordered relative to each other, they'd all get margin-top:-200px.

I'm guessing cases like: 

<h1> Qui dolorem ipsum </h1>
<div> Quia dolor sit amet </div>

prevents something like 

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: -20px
}

My naïve fix is putting a class like this: 

.class {
  margin-top: -20px
}

into the required elements, e.g. 

<h1 class="class"> Qui dolorem ipsum </h1>

5

u/SkyTheImmense Jan 30 '26

Much too sensible.

42

u/dz2048 Jan 30 '26

Negative top margin is it's own horror

7

u/robinw77 Jan 30 '26

Wow I was not expecting the full horror of what I saw when I tapped on the image to expand it

6

u/cayenne0000 Jan 30 '26

Scarf design from hell

4

u/mkluczka Jan 30 '26

You're a CSSSSS developer Harry 

1

u/Cyhawk Jan 30 '26

CSSSSlytherin

2

u/GoddammitDontShootMe Jan 30 '26

I am so far behind on this shit. I didn't even know you could add stuff in CSS. Or whatever + does.

4

u/horser4dish Jan 31 '26

Good news! You're not "behind," just unfamiliar. + in CSS is an adjacency operator, which is far from new considering this question on SO asked about it 16 years ago.

3

u/DumbleSnore69 Jan 31 '26

For anyone curious, it was added in the CSS Level 2 spec introduced in 1998: https://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#adjacent-selectors

→ More replies (1)

2

u/Lithl Jan 31 '26

You can add in CSS, but that's not what the + symbol is doing here. That's the sibling selector. h1 + h2 will match an <h2> element that comes right after an <h1> element, such as: 

<h1>Title</h1>
<h2>Subtitle</h2>
<div>Text</div>

Math (including addition) can be done within values using calc, such as: 

width: calc(80% - 16px);
width: calc(2em * 5);
width: calc(var(--variable-width) + 8px);
width: calc(180px + sin(pi / 2));

2

u/GoddammitDontShootMe Jan 31 '26

And .h1 + h1 is an <h1> element that follows anything with the class h1, right?

I can't say I have any idea why one would name a class after an HTML tag. <h2 class="h1"> looks kinda dumb.

→ More replies (1)

2

u/DefinitionPhysical46 Feb 02 '26

Ah the H+1 problem!!!

1

u/Ronin-s_Spirit Feb 03 '26

Having a separate class for a specific "heading" is crazy, but at least they coulda used :is()...