DEV Community

Cover image for Writing Logic in CSS

Writing Logic in CSS

Daniel Schulz on February 21, 2022

CSS is a highly specialized programming language focusing on style systems. Because of this unique use case and its declarative nature, it's someti...
Collapse
 
seanolad profile image
Sean

Negl ten minutes ago I definitely would deny that CSS was a language. It's always had a lesser place in my mind considering I could just use javascript but I think this has changed my mind. I'm going to try to deepen my knowledge of css thanks to this post, I think there is a lot to be gained from enlarging what I know. I know damn well that it'll probably save me many hours of scrolling google. Great post!!🔥🔥👌

Collapse
 
virtualis9 profile image
Christopher Peacock

I was thinking just the same thing. Worrying part i reckon this could be harder than Js 👀😆

Collapse
 
laras126_99 profile image
Lara Schenck

Folks here might like my talk about algorithms in CSS!
notlaura.com/algorithms-of-css-sou...

Collapse
 
iamschulz profile image
Daniel Schulz

Yes! Your talk has been a huge inspiration. Can't recommend it enough

Collapse
 
well1791 profile image
Well

A lot of thanks for sharing!

Collapse
 
vyckes profile image
Kevin Pennekamp

@iamschulz Thanks for the mention!

Collapse
 
roblevintennis profile image
Rob Levin

I thought of [aria-hidden] { ... } when I saw your [data-attr='true'] based logic examples. Suppose it's an option for any attribute really. Only issue with this is its very generalized on its own.

Collapse
 
iamschulz profile image
Daniel Schulz

How's providing generalized examples a drawback?

Collapse
 
roblevintennis profile image
Rob Levin

I meant that using [aria-hidden] alone or any data attribute is overly generalized. I was not intending to communicate that you providing generalized examples is a drawback; just that usage of it alone is generalized. Hope that clarifies misunderstanding. Thanks for the article.

Collapse
 
robole profile image
Rob OLeary

Thanks for putting this together. I have wanted to look further into this. Do you have an opinion on when you should use JS instead of these techniques?

Collapse
 
iamschulz profile image
Daniel Schulz

When you absolutely hit the limits of CSS. Container queries would be an example, until its native CSS counterpart is widely adopted in browsers.

I also think you should use JS alongside CSS to help accessibilty.

Collapse
 
rkallan profile image
Info Comment hidden by post author - thread only accessible via permalink
RRKallan

I don’t see where JS will help accessibility. I think it’s a plus for ui / look and feel

 
iamschulz profile image
Daniel Schulz

For example setting showing/hiding elements for screenreaders. Dis/enabling inputs. Switching out aria attributes. Stuff like that. CSS isn't the right tool for that.

Thread Thread
 
rkallan profile image
Info Comment hidden by post author - thread only accessible via permalink

Show / hide element could be done by html & css

<input type=“checkbox” /> 
<div>hi content</div>
Enter fullscreen mode Exit fullscreen mode
.input[type=checkbox] ~ div {
    display: none;
}

.checkbox:checked ~ div {
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

Switching area attributes or changing is not necessary when using correct semantic element when excising.

Let me say, I haven’t yet needed JS to have correct response on screen reader.

 
iamschulz profile image
Daniel Schulz

That works on user input, but how would you hide an element on a responsive layout change? How would you set aria-expanded on a drawer? How would you try and build a mega menu in CSS only while keeping it accessible to SRs? How would you tab-lock a modal in CSS? Just because you didn't come across a use case yet doesn't mean they aren't plentiful.

Thread Thread
 
rkallan profile image
RRKallan

Responsive layout changes when browser size changed. I will use media queries.

No need for aria-expanded with HTML5 elements details & summary
Also aria-live

<details>
    <summary>Title</summary>
    <div>
        Place your content which will show / hide on press 
    </div>
</details>
Enter fullscreen mode Exit fullscreen mode

To prevent the ability to tab / focus outside your element you can use

element:focus-within {}
Enter fullscreen mode Exit fullscreen mode

A massive menu. Assumption more then multiple levels. Here I would go to talk first with business. Why so many. Levels. Looking for better better cleaner structure.
Also for menu there is no need to use aria-expanded. Show hide text based on checked
And yes for multi level menu and keyboard support there will be need JS for esc, arrows pageup and pagedown.

Thread Thread
 
iamschulz profile image
Daniel Schulz

Aria-live and focus-within don't work like you describe. Please read up on those topics. And please manually test in screen readers, keyboard only navigation and/or other assistive tech.

Thread Thread
 
rkallan profile image
RRKallan

It's magic. your response said enough. Yes the focus-within is correct not totally described. It's right when you can speek. ?? i wooul=ld me more and moer lrss

Collapse
 
rkallan profile image
RRKallan

My opinion when not to use JS, if it can be done without JS

Collapse
 
ninofiliu profile image
Nino Filiu

I knew about the awesome CSS-only SPA-like navs thanks to :target, but I didn't know about CSS counters, thanks for sharing!

Collapse
 
yw662 profile image
yw662

I wonder...would these styles perform better than plain javascript ?

Collapse
 
iamschulz profile image
Daniel Schulz

No, you'd only add another step to the render pipeline. No Javascript is always faster than Javascript.

Collapse
 
styletheandriod profile image
Stylestheandriod

Ohh wow I love this

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Real Brilliant!

Collapse
 
dougsource profile image
doug-source

I translated this article here to Brazilian Portuguese.

Thanks, 😉

Collapse
 
iamschulz profile image
Daniel Schulz

Please ask in advance before you republish other people's content.

Collapse
 
dougsource profile image
doug-source • Edited

Ok. Thanks for your response.
From now, I go to follow your advice 😉, and if you want, I go to remove the translation from your post. Do you want?

Thread Thread
 
iamschulz profile image
Daniel Schulz

It's fine. Just keep it in mind :)

Collapse
 
ageekdev profile image
ΛGΣΣK

Even if it's possible, just dont use it!

Collapse
 
iamschulz profile image
Daniel Schulz

Don't use CSS? Why wouldn't you?

Collapse
 
lucasayabe profile image
lucas-ayabe

its not like you'll be using this to do a game with limited possibilities, or some weird workaround, is just the most eficient and elegant solution for common styling problems, it is much better use CSS to solve these problems than JS for example

Collapse
 
gregjacobs profile image
Greg

Great Article! Thank you!
I love CSS 💪🏼

Collapse
 
nft_artsy profile image
The Volks NFT

Nice one!

Collapse
 
bhansa profile image
Bharat Saraswat

crazy, crazy...

Collapse
 
asifurrahamanofficial profile image
Asifur Rahaman

GOAT

Collapse
 
cycool29 profile image
cycool29

Thanks for sharing. Really useful post.

Collapse
 
subhanprime profile image
Subhan Ali

this post changes my mind completely about css . i love your explination.

Collapse
 
zacharyprice profile image
Zachary Price

This is probably the best explanation on this topic that I persoannly have ever read. There's so much to unpack here and I am thankful that you presented this.

Collapse
 
ronaldgrowe profile image
Ronald Rowe

A great article, keep up the good work! 💯

Collapse
 
oliveiracaue profile image
Cauê Oliveira

Great content and totally useful. Thanks for sharing.

Collapse
 
jaycelin profile image
Jaycelin

Thanks for such a post. CSS is a declarative programming language, rather than an imperative language.

Collapse
 
virtualis9 profile image
Christopher Peacock

THIS! has blown my mind and sparked so much creativity in my head! Im defo going to have fun with this when i get home.

Some comments have been hidden by the post's author - find out more