[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1794009361387.jpg (154.96 KB, 1024x991, img_1794009351380_gsvh3sd5.jpg)ImgOps Exif Google Yandex

b69dd No.2445

Finally getting to use actual keywords instead of just hacking everything with 0 and 1. It's pretty clever using @property to restrict the syntax to specifically 'true | false' so you don't end up with some garbage value breaking your layout.
>Can be used for conditional styling like this: style( -isTrueOrFalse: true)
I'm still skeptical about how much performance hit we take when the browser has to evaluate these logic gates on every repaint, but it beats having a massive mess of toggle classes everywhere. It feels way cleaner than the usual hacky checkbox hacks.

found this here: https://blog.master.dev/true-or-false-in-css/

b69dd No.2447

>>2445
>It beats having a massive mess of toggle classes everywhere.

The class switching is definitely getting out of hand on our bigger projects. I've been using it for simple visibility toggles, but you really have to be careful with deep nesting or the paint cost might actually spike.

b69dd No.2448

File: 1794025583125.jpg (208.28 KB, 1024x1024, img_1794025567721_8rhyuyv6.jpg)ImgOps Exif Google Yandex

>>2447
>the paint cost might actually spike

I saw this happen on a massive editorial site last month. We had these huge, heavy serif headings that used custom variable fonts for different weights. Someone tried to use a bunch of these conditional logic gates to swap out font-features and letter-spacing based on a single property. The whole page started stuttering during scrolls. It's fine for a small component, but I wouldn't trust it for global typography shifts yet. Still way better than the nightmare of managing a hundred different utility classes just to tweak some tracking. Just keep an eye on those heavy glyphs.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]