DEV Community

Cover image for if/else in CSS

if/else in CSS

Damian Brdej on December 25, 2021

As we know, there are no conditional statements in CSS, but this may soon change with new @when and @else operator Currently, the only way to perf...
Read full post
Collapse
 
iamschulz profile image
Daniel Schulz •

But there are already conditional statements in CSS, they're just not named if/else.

:checked { /* if */ }
:not(:checked) { /* else */ }

[data-attr="true"] { /* if */ }
[data-attr="false"] { /* elseif */ }
:not([data-attr]) { /* else */}
Enter fullscreen mode Exit fullscreen mode

As to the new synatx: I'm curious if it's going to solve componentization issues or rather introduce new side effects and specificity problems. I'll be happy to stay with the old and trusty

width: var(--s-width);
@media (min-width > 600px) {
    width: var(--l-width);
}
Enter fullscreen mode Exit fullscreen mode

for as long as new best practices haven't surfaced. I guess i'm just used to structure my styles by viewport and not by instructions.

Collapse
 
mrbns profile image
Mr. Binary Sniper •

These are different things..

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ •

It works perfectly

Not quite: What happens for 599.5px? Neither of the two rules applies. If you want it to work perfectly, you'll have to use not instead.

Collapse
 
devdufutur profile image
Rudy Nappée •

How can your device have halves pixels ? 🤔

Collapse
 
sergeysova profile image
Sergey Sova •

Yep. On the phones. Pixels in html/css is not real pixels

Collapse
 
quentindamianino profile image
Damian Brdej •

Good point, I didn't think about it

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • • Edited

A good long while ago I was working on a new idea before svelte called Jess
github.com/adam-cyclones/Jess/blob...

And

github.com/adam-cyclones/Jess/blob...

Jess is abandonware but the idea was JavaScript for presentational logic and therefore if else
I have no time for this project which is a shame but you lot might like to get inspired 🤷‍♂️

Collapse
 
r4nd3l profile image
Matt Miller • • Edited

Also you can play with the :has() and the :empty() selectors as well!
They are pretty useful for this if/else topic! Cheers!

developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...

Collapse
 
jmzeph profile image
jmzeph •

why not go further and use switch cases.

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer •

This is helpful, Thank you.

Collapse
 
peterbowater profile image
Peter Bowater •

This seems shorter, and isn't this SASS style also proposed for plain CSS?

.div {
.......
@media (min-width: 600px {
.......
}
}

Sure you have to write the occasional override, but that is a rarity.

Collapse
 
vish_21 profile image
Vijay •

Will help in code unification

Collapse
 
r4nd3l profile image
Matt Miller •

I like your concept! And I'm also a fan of these kind of solutions to follow. Year by year there are many good ideas about the CSS to expand it to the next level to make it like an "~analog programming language" which is not dynamic like JS, but more like a static code which is capable to "~reply" or "~react" for "environment changes" such as media queries, scrolls ..etc. So, would be great to have these CSS (new) features at least as a default ones to get a chance/possibility to play with. Therefore would be amazing thing to use (pure) CSS as a tool to make the web both responsive and adaptive as well at the same time. I hope you get the idea what I mean. Cheers!

Collapse
 
r4nd3l profile image
Matt Miller •

By the way Damian, if you are up to this topic to develop something based on that particular concept then please let me know about it!

Collapse
 
jrohatiner profile image
Judith •

This is good to know. Thx for the info. Usually I put these future specs aside until they get adopted and there is multiple browser support. Too bz keeping track of whats current. 🤷🏻‍♀️

Collapse
 
joesalaz profile image
Jose Salazar •

I think it will be awesome since it will make it more intuitive.

Collapse
 
globalkonvict profile image
Sarthak Dwivedi •

Few important addition would be great. Although I've done some cool stuff with JS in styled components. Again, Vanilla css is a choice for most projects.

Collapse
 
r4nd3l profile image
Matt Miller •

You may find this useful as a playground
the-guild.dev/blog/customizable-cs...

Collapse
 
msamgan profile image
Mohammed Samgan Khan •

i didn't know this, u are awesome bro.