Kevin Powell - Community•3mo ago

Can you think of a good use case for an css-only if/else like this?

So, Lea Verou put out a tweet looking at a pretty cool way to make an if/else with CSS-only, for styling things, and I was going to do a video on it... but I want to find a good use case, and I'm having trouble, so I'm open to any and all suggestions! This is the basics of it:

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;

  :not(&) {
    font-weight: 300;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;

  :not(&) {
    font-weight: 300;
  }
}

This sets the font-size for my headings to 700, and everything else to 300. But there's no point in doing this, because I could do this instead and it's a lot simpler.

body { font-weight: 300; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

body { font-weight: 300; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

And it's basically the same (the nested version would also get inputs and buttons, but whatever, that's easy enough to also do). I was thinking that this would be more useful to target things within a specific component, like this:

.card {
   > :is(.card-header, .card-footer) {
     background-color: purple;

     :not(&) {
       background: green;
     }
   }
}

.card {
   > :is(.card-header, .card-footer) {
     background-color: purple;

     :not(&) {
       background: green;
     }
   }
}

The thing is, this won't select all the other children inside of the card, it will select everything that isn't .card .card-header or .card .card-footer, so even the html, body, etc... We can solve that by changing the not selector to this: .card > :not(&)... but at that point, it feels a little combersome... so, any ideas? Here is a codepen with the example from above in action if you want to play with it: https://codepen.io/kevinpowell/pen/abxdExV

Kevin

CodePen

abxdExV

...

5 Replies

MarkBoots•3mo ago

in js you can do this would be the "if statement css

let baz;
if(foo == bar) {
 baz = "World";
} else {
  baz = "Hello";
}

let baz;
if(foo == bar) {
 baz = "World";
} else {
  baz = "Hello";
}

that is the same as like we are used to in css, first set it, override when nessessary

let baz = "Hello";
if(boo == bar){
  baz = "World"
}

let baz = "Hello";
if(boo == bar){
  baz = "World"
}

Tbh, I can't see another reason than personal preference. Maybe I'm missing something

Jochem•3mo ago

I'd be interested in the performance concerns. :not(&) feels like *:not(h1...)

Kevin Powell•3mo ago

This is one of the reasons I think it's more worth it if it's > * and scoped to a component, much easier for the browser as well, and I think a lot more practical... But like @MarkBoots said, maybe it's something that's more "oh look, that's neat... but I don't really need it because this way is easier"

clevermissfox•3mo ago

Not fancy but maybe it’ll spark an idea

.btn {
  padding : 0.5em 1.25em; 
  border-radius: 0.5em; 
  outline: 1px solid transparent; 

    &:not(.feat-btn){
       background-color: var(—surface-primary);
      color: var(—clr-primary) ;

      &:is(:hover, :focus-visible) {
          background-color:transparent; 
           outline-color: var(—clr-primary);
      }
   }

  &:is(.feat-btn){
     background-color: var(—surface-feat);
     color: var(—clr-secondary);

        &:is(:hover, :focus-visible){
            background-color: transparent; 
            outline-color: var(—clr-accent);
            color: var(—clr-accent);
     }
  }

}

.btn {
  padding : 0.5em 1.25em; 
  border-radius: 0.5em; 
  outline: 1px solid transparent; 

    &:not(.feat-btn){
       background-color: var(—surface-primary);
      color: var(—clr-primary) ;

      &:is(:hover, :focus-visible) {
          background-color:transparent; 
           outline-color: var(—clr-primary);
      }
   }

  &:is(.feat-btn){
     background-color: var(—surface-feat);
     color: var(—clr-secondary);

        &:is(:hover, :focus-visible){
            background-color: transparent; 
            outline-color: var(—clr-accent);
            color: var(—clr-accent);
     }
  }

}

Joao•3mo ago

Remind me again what the C in CSS stands for? 🤔 I just don't see the point... it's cool that it's possible I guess but not very useful

Gaming

Programming

Can you think of a good use case for an css-only if/else like this?