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

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

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.

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

cycool29 • Feb 28 '22

Thanks for sharing. Really useful post.

Paul C. Ishaili • Feb 21 '22

Real Brilliant!

Bharat Saraswat • Mar 9 '22

crazy, crazy...

The Volks NFT • Mar 15 '22

Nice one!

Greg • Mar 28 '22

Great Article! Thank you!
I love CSS 💪🏼

Asifur Rahaman • Feb 28 '22

GOAT

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.