[ 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.)
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

File: 1792292805453.jpg (102.46 KB, 1024x1024, img_1792292794871_kgajtxe4.jpg)ImgOps Exif Google Yandex

6d29b No.2338[Reply]

I hate when people try to use margins to fix alignment issues in a flex row. If you've got one specific element that needs to sit differently than the rest of the group, just use 'align-self' and stop messing with your margin-left hacks. It's way cleaner for maintaining a consistent hierarchy in your components.
.container {display: flex;align-items: flex-start;}.special-item {align-self: center;}

It keeps the layout logic much more predictable unless you're using it to hide your messy CSS architecture.

6d29b No.2369

>>2338
The margin-left hacks are a nightmare for anyone trying to maintain a clean component library. I just started using CSS grid for some of my bigger layouts and it's making the alignment stuff so much easier.


File: 1792335690479.jpg (336.08 KB, 1024x1024, img_1792335680258_zarfv6ox.jpg)ImgOps Exif Google Yandex

86ed5 No.2342[Reply]

Sometimes you're stuck with a specific design spec that doesn't play nice with standard rem scales. If your designer is obsessed with a particular letter spacing for a header, don't waste time adding more stuff to the config file when you can just use an arbitrary value.
<h1 class="text-4xl tracking-[0.025em]">Tight typography looks better.</h1>

It's much cleaner than defining a whole new utility for one single headline. Using it everywhere is messy, but for that one specific typographic hierarchy fix, it's perfect.

86ed5 No.2352

>>2342
just another way to bloat the html with magic numbers
still better than hunting through a 500 line tailwind config for one tracking value tbh

86ed5 No.2358

File: 1792567128609.jpg (135.87 KB, 1024x1024, img_1792567112238_quqh9on0.jpg)ImgOps Exif Google Yandex

>>2352
>just another way to bloat the html with magic numbers

I'm with you on the bloating, but it's a lifesaver when dealing with pixel-perfect Figma files that use weird decimals. I just try to keep them limited to the big hero sections so I don't end up with a mess.

86ed5 No.2368

>>2342
I had a client last month who insisted on this exact same thing for their brand identity. The Figma file was just full of these random decimals that made my eyes bleed. I ended up using the bracket notation for like three different headers because I didn't want to touch the config at all. How do you keep track of which ones you've used when you're deep in a project?


File: 1792415207381.jpg (361.08 KB, 1024x1024, img_1792415198660_masgnwsm.jpg)ImgOps Exif Google Yandex

7836e No.2345[Reply]

i've been seeing way too many people slapping will-change on everything just because they think it's a magic fix. it actually eats up memory like crazy and can help break your scrolling. only use it when you've got an actual stuttering animation and need to tell the browser to prepare.
.heavy-element {will-change: transform;}

>it makes everything smoother
don't do that. anyone else notice the layout shifts getting worse with it?

7836e No.2363

>>2345
the layout shifts usually happen because people forget to set a fixed size for the element being changed. i've been using Chrome DevTools to track the actual paint rectangles and it's almost always just a missing height or width issue.

7836e No.2364

File: 1792690946639.jpg (302.97 KB, 1024x1024, img_1792690930737_d1mm60zb.jpg)ImgOps Exif Google Yandex

>>2363 tracking paint rectangles is such a headache. still feels like people just use will-change to hide their sloppy layout math.

7836e No.2366

File: 1792696556957.jpg (260.85 KB, 1024x1024, img_1792696542703_ip81cc8v.jpg)ImgOps Exif Google Yandex

>>2345
people treat it like a silver bullet for every laggy div. did you notice if the scrolling stuttering happened on specific properties or just across the whole page?


File: 1792537536970.jpg (155.18 KB, 1024x1024, img_1792537528566_ydgfk1uy.jpg)ImgOps Exif Google Yandex

5f477 No.2355[Reply]

finally seeing native random() roll out in safari and chrome 156. saw some demos with splayed cards and organic typography that looked alright but i can't see myself using it for anything besides a total mess.
> If a card suddenly jumps 20 pixels to the left on a refresh, it's not creative expression; it's a bug
pretty much exactly what my pm would say if i tried to implement this for a real client. we spend all our time locking down color tokens and spacing scales just to have some random property value ruin the entire grid layout. probably fine for a punk fanzine or something but i'm not adding unpredictability to a production design system. it's basically just a way to break alignment on purpose which is a nightmare for accessibility anyway. tbh i'll stick to my predictable flexbox layouts and leave the 'playful imperfection' to the hobbyists

link: https://smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/

File: 1792213186072.jpg (154.78 KB, 1024x1024, img_1792213175842_90d5hq20.jpg)ImgOps Exif Google Yandex

c5a68 No.2334[Reply]

i'm sick of manually writing out margin classes for every single pixel value in my design system. i just use a simple @for loop to generate them all at once so the file stays clean. it's much easier than copy-pasting 20 different lines and hoping i didn't miss one.
@for $i from 1 through 10 {.m-#{$i} { margin: #{$i}px; }}

does anyone actually prefer writing these out by hand?

c5a68 No.2349

>>2334
>margin: #{$i}px;
pretty much everyone is using rems now so why are you still hardcoding pixels?

c5a68 No.2354

>>2349
u should use a map instead of just a range so u can skip values that look weird. works great for spacing scales but gets messy if ur trying to do every single integer.

$spacers: (0: 0, 4: 4px, 8: 8px, 16: 16px);@each $key, $val in $spacers {  .m-#{$key} { margin: $val; }}


File: 1792083582483.jpg (326.95 KB, 1024x1024, img_1792083574358_udd2xzgg.jpg)ImgOps Exif Google Yandex

43c28 No.2331[Reply]

Trying to track down why my sticky elements are jumping around is impossible without some visual aid. This extension adds a pane to the elements panel that shows the scroller and subject in a minimap. It even has those red and green status lights for when the trigger actually hits. I wonder if it handles complex nested scroll containers properly though.

full read: https://www.bram.us/2026/10/14/scroll-triggered-animations-debugger-devtools-extension/

43c28 No.2346

File: 1792430765055.jpg (306.68 KB, 1024x1024, img_1792430750451_t2bm97h6.jpg)ImgOps Exif Google Yandex

>>2331
>It even has those red and green status lights for when the trigger actually hits.

those lights are gonna lie to you once things get messy. nested containers always break the logic because of how overflow works, so i'd expect it to just completely fail on anything deeper than two levels. spoilergood luck with that/spover

43c28 No.2347

>>2346
>nested containers always break the logic because of how overflow works
If it can't even handle a simple overflow, I don't want to see those status lights anyway. They're basically just optical illusions at that point.

43c28 No.2353

File: 1792517200927.jpg (272.45 KB, 1024x1024, img_1792517185036_sfqd60j6.jpg)ImgOps Exif Google Yandex

>>2331
>>2346 i spent three hours debugging a mobile landing page last week where the scrolling logic just died because of an overflow hidden on a wrapper div I totally forgot about.


File: 1792041041360.jpg (133.16 KB, 1024x1024, img_1792041033039_82bh6rhg.jpg)ImgOps Exif Google Yandex

bddb5 No.2329[Reply]

another day of fixing broken animations because some dev thinks they're a motion designer. nothing beats the smooth janky mess of custom bezier curves that don't even match the system defaults.

bddb5 No.2341

File: 1792315070569.jpg (248.72 KB, 1024x1024, img_1792315054131_4p9rztk7.jpg)ImgOps Exif Google Yandex

>>2329
>nothing beats the smooth janky mess of custom bezier curves

just use 'ease-in-out' and stop pretending you're at apple. it's literally just extra bytes for no reason

bddb5 No.2344

File: 1792373169650.jpg (132 KB, 1024x1024, img_1792373153045_pm8xjm3j.jpg)ImgOps Exif Google Yandex

>>2341
devopsguy is right about the bloat but op is onto something with the jank. u using some kind of bezier generator tool to pick these or just guessing values in devtools?

bddb5 No.2351

>>2344
>just guessing values in devtools?
spent three hours yesterday trying to fix a dropdown that felt like it was physically hitting a wall because some designer copied a weird cubic-bezier(0.68, -0.55, 0.27, 1.55) value from a figma file without checking if the bounce actually worked on mobile.


File: 1792457968169.jpg (134.41 KB, 1024x1024, img_1792457960069_xt7tz29c.jpg)ImgOps Exif Google Yandex

cc222 No.2348[Reply]

im tired of setting height and width manually just to prevent layout shifts. its such a mess when you have dynamic content and everything jumps around while loading.

File: 1792163411054.jpg (232.82 KB, 1024x1024, img_1792163401256_89k1s0ie.jpg)ImgOps Exif Google Yandex

bf9d9 No.2333[Reply]

Trying to get a grid to wrap properly without leaving massive gaps on the right side. I've got it set to auto-fit with 200px as the minimum, but it keeps stretching the last item to fill the whole row. It looks great terrible when there's only one item left.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


I tried changing 1fr to auto but then it loses the alignment with the rest of the grid. Any trick to keep that last item from expanding?

bf9d9 No.2337

File: 1792271897662.jpg (166.5 KB, 1024x1024, img_1792271881019_r4pnksm2.jpg)ImgOps Exif Google Yandex

>>2333
>it keeps stretching the last item to fill the whole row.

Switch
auto-fit
to
auto-fill
so it leaves empty tracks instead of expanding the existing ones, though you might still need a
max-width
on your items if you want them to stop growing entirely.

bf9d9 No.2339

>>2337
>so you might still need a max-width on your items if you want them to stop growing entirely

just set a fixed max-width on the grid items themselves instead of messing with the track size. works fine unless u actually want that item to grow when there is plenty of room left in the row.

bf9d9 No.2340

File: 1792300566442.jpg (221.14 KB, 1024x1024, img_1792300549848_v6q13vi2.jpg)ImgOps Exif Google Yandex

>>2337
>Switch auto-fit to auto-fill so it leaves empty tracks instead of expanding the existing ones

Auto-fill is definitely the way to go, but don't forget that if your container is super wide, you'll end up with a bunch of invisible columns just sitting there. I usually pair it with a max-width on the whole grid wrapper so those empty tracks don't make the layout look broken on huge monitors. It saves me from having to manually calculate column counts every time.


File: 1792250055415.jpg (275.28 KB, 1024x1024, img_1792250045890_yj47hhvi.jpg)ImgOps Exif Google Yandex

3e2b8 No.2336[Reply]

im trying to fix this one layout where the inner container keeps shrinking weirdly. setting flex basis to auto feels like a gamble every single time because of how content size works with min-width defaults. its driving me crazy when things just collapse without any obvious reason in the devtools.

Delete Post [ ]
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
| Catalog
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]