DEV Community

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...

Read full post

Sean • Feb 23 '22

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!!🔥🔥👌

Christopher Peacock • May 9

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

Lara Schenck • Feb 24 '22

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

Daniel Schulz • Feb 24 '22

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

Well • Feb 28 '22

A lot of thanks for sharing!

Kevin Pennekamp • Mar 1 '22

@iamschulz Thanks for the mention!

Rob Levin • Feb 27 '22

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.

Daniel Schulz • Feb 27 '22

How's providing generalized examples a drawback?

Rob Levin • Mar 1 '22

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.

Rob OLeary • Feb 25 '22

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?

Daniel Schulz • Feb 25 '22

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.

Comment hidden by post author - thread only accessible via permalink

RRKallan • Mar 7 '22

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

Daniel Schulz • Mar 7 '22

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.

Comment hidden by post author - thread only accessible via permalink

RRKallan • Mar 7 '22 • Edited

Show / hide element could be done by html & css

<input type=“checkbox” /> 
<div>hi content</div>

.input[type=“checkbox”] ~ div {
    display: none;
}

.checkbox:checked ~ div {
    display: block;
}

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.

Daniel Schulz • Mar 7 '22

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.

RRKallan • Mar 8 '22

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>

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

element:focus-within {}

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.

Daniel Schulz • Mar 8 '22

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.

RRKallan • Mar 9 '22

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

RRKallan • Mar 7 '22

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

Nino Filiu • Feb 22 '22

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

yw662 • Feb 21 '22

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

Daniel Schulz • Feb 21 '22

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

Stylestheandriod • Feb 26 '22

Ohh wow I love this

Paul C. Ishaili • Feb 21 '22

Real Brilliant!

doug-source • Aug 5

I translated this article here to Brazilian Portuguese.

Thanks, 😉

Daniel Schulz • Aug 5

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

doug-source • Aug 5 • 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?

Daniel Schulz • Aug 6

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

ΛGΣΣK • Feb 22 '22

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

Daniel Schulz • Feb 22 '22

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

lucas-ayabe • May 8

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

Greg • Mar 28 '22

Great Article! Thank you!
I love CSS 💪🏼

The Volks NFT • Mar 15 '22

Nice one!

Bharat Saraswat • Mar 9 '22

crazy, crazy...

Asifur Rahaman • Feb 28 '22

GOAT

cycool29 • Feb 28 '22

Thanks for sharing. Really useful post.

Subhan Ali • Feb 27 '22

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

Zachary Price • Feb 25 '22

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.