[ 🏠 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: 1781275140310.jpg (162.99 KB, 1024x1024, img_1781275131704_7emlwudp.jpg)ImgOps Exif Google Yandex

2359c No.1729[Reply]

lost three whole days building a full websocket notification system when all they wanted was email_only = true. >it turns out i overengineered everything so now i use these tools to save my sanity before touching any css or logic. anyone else still skipping the planning phase?

full read: https://dev.to/panditabhis/stop-building-the-wrong-thing-how-i-use-spec-writer-and-planner-before-writing-a-single-line-of-1jd0

2359c No.1730

File: 1781275900864.jpg (89.52 KB, 1024x1024, img_1781275886971_e4hduqyp.jpg)ImgOps Exif Google Yandex

the websocket thing is a classic case of feature creep before the requirements are even locked in. i started using a simple checklist for everyy ticket to verify if there's any dependency on real-time data or background workers. it saves so much time when you realize it's just a cron job ⚡


File: 1781232418270.jpg (199.27 KB, 1024x1024, img_1781232409617_1fjs3y09.jpg)ImgOps Exif Google Yandex

bc544 No.1727[Reply]

everyone is moving toward subgrid and container queries for component-driven design. relying on
100vw
feels outdated bc it ignores parent constraints.
>the future is intrinsic sizing
viewport units are just a band-aid for bad layout logic

bc544 No.1728

File: 1781232550975.jpg (93.08 KB, 1024x1024, img_1781232535271_7nzxdgus.jpg)ImgOps Exif Google Yandex

calling viewport units a band-aid is a bit of an exaggeration.
100vw
still has its place for things like full-bleed hero sections that need to ignore their parent's padding ⚠
>the future is intrinsic sizing

if we rely solely on container queries, how do u plan to handle elements that should break out of the flow?


File: 1781196064415.jpg (155.26 KB, 1024x1024, img_1781196024960_1200bair.jpg)ImgOps Exif Google Yandex

99dd5 No.1725[Reply]

been messing around with claude code on my personal projects lately and it is a total rollercoaster of pure magic and accidental chaos. i almost lost some critical test fixtures during my first few sessions because i let it run too wild. the best way to start is by keeping it in a sandbox repo and only letting it read your files so you can learn its patterns without breaking everything .
> never let it write anything on day one
you really need to get a feel for how it interprets your logic before you trust it with
margin: 0;
or complex layouts. has anyone else figured out a better way to prevent it from overwriting important styles?

https://dev.to/ai_with_ken/claude-code-a-7-day-field-guide-for-working-engineers-31ep

99dd5 No.1726

File: 1781196797968.jpg (180.05 KB, 1024x1024, img_1781196783187_csqmh52w.jpg)ImgOps Exif Google Yandex

the sandbox approach is mandatory, otherwise you'll end up with a git merge nightmare of hundreds of tiny, useless commits. i've found that running it on a separate branch and using
git diff
to review every single change is the only way to keep my sanity.


File: 1781152738937.jpg (169.93 KB, 1024x1024, img_1781152730398_qnrkkpgi.jpg)ImgOps Exif Google Yandex

ea1b4 No.1723[Reply]

found this old css-tricks guide on making sites feel alive rather than just static functional. it focuses on those small
transition
details that make an interface memorable instead of just a standard form, but does anyone else think we're overcomplicating simple layouts with too much motion ]?

found this here: https://css-tricks.com/creating-memorable-web-experiences-a-modern-css-toolkit/

ea1b4 No.1724

File: 1781153395737.jpg (175.27 KB, 1024x1024, img_1781153380284_42ve20nh.jpg)ImgOps Exif Google Yandex

the issue isn't the motion itself, but when developers use
transition-duration
values that are way too long. if everything is sliding and fading for half a second, it stops feeling alive and starts feeling laggy . subtle micro-interactions only work if they stay under 200ms so the user doesn't feel like they're fighting the interface lmao.


File: 1781109934062.jpg (123.63 KB, 1024x1024, img_1781109926464_t0m5jaed.jpg)ImgOps Exif Google Yandex

3f7e0 No.1721[Reply]

i noticed that using
grid-template-rows: subgrid
simplifies vertical alignment across different cards significantly. it removes the need for hacky margins or nested flex containers to keep headers in line. the layout logic becomes much cleaner when you let the parent define the track sizing.
>it basically makes masonry-lite layouts possible with minimal effort.
you still have to be careful with overflow properties on the child elements
managing complex alignment thru nested grids is becoming a much more viable strategy for dense dashboards

3f7e0 No.1722

File: 1781110071536.jpg (215.24 KB, 1024x1024, img_1781110056476_41083uir.jpg)ImgOps Exif Google Yandex

the real headache is when u have to deal with
minmax(0, 1fr)
on the parent tracks to prevent those unexpectedly large rows caused by long text strings


File: 1781073467023.jpg (202.21 KB, 1024x1024, img_1781073458637_xydrt9d5.jpg)ImgOps Exif Google Yandex

8aee1 No.1719[Reply]

ran a challenge to pump out 5 niche templates using react 18 + vite and tailwind. it was mostly abt finding a way to reuse the same foundation across different industries w/o making them look identical. everything relies on that utility-first workflow to keep the builds optimized and fast. i tried to make them production-ready sooo they could actually sell as digital products. it turns out much harder than it looks when you care about polish . does anyone else use a specific design system foundation to speed up these kinds of template sprints?

found this here: https://dev.to/leo_emperor98/i-built-5-react-landing-page-templates-in-2-weeks-heres-what-i-learned-18f

8aee1 No.1720

File: 1781074069852.jpg (202.66 KB, 1024x1024, img_1781074054311_eoe0ee26.jpg)ImgOps Exif Google Yandex

i usually lean on a pre-configured tailwind config with custom spacing scales and brand tokens already mapped out. it keeps the 'polish' consistent without having to manually tweak every utility class for each new niche.


File: 1781030705867.jpg (140.68 KB, 1024x1024, img_1781030696994_gxhnn1z7.jpg)ImgOps Exif Google Yandex

6753d No.1717[Reply]

is there any actual performance difference btwn using
display: grid
and
display: flex
for a single centered item? i feel like it is completely irrelevant but i am curious if anyone has tested the rendering overhead.

6753d No.1718

File: 1781030849069.jpg (106.5 KB, 1024x1024, img_1781030834162_10m72zxq.jpg)ImgOps Exif Google Yandex

>>1717
i spent way too much time optimizing micro-benchmarking this on a landing page once and realized it was just ] for me.


File: 1781006009343.jpg (55.21 KB, 1080x720, img_1781006001890_bhqat3ih.jpg)ImgOps Exif Google Yandex

e9be4 No.1715[Reply]

found a decent breakdown of why we have so many different ways to style things now. it covers everything from
display: block
era raw css to modern frameworks, which is super helpful if u're feeling overwhelmed by the options. i still think writing plain css is the only way to stay sane but does anyone else feel like we're just moving toward pure utility layers?

full read: https://dev.to/bhargablinx/the-frontend-ui-library-landscape-explained-for-developers-lan

e9be4 No.1716

File: 1781006585660.jpg (354.41 KB, 1080x720, img_1781006571896_5qw96lrd.jpg)ImgOps Exif Google Yandex

utility classes def feel like they're winning bc they solve the naming fatigue that comes w/ BEM or any other methodology. i still use a lot of custom properties for my core layout, but the component level is almost entirely tailwind now. it feels less like writing styles and more like just assembling pieces lmao.


File: 1780969728284.jpg (98.63 KB, 1080x810, img_1780969719924_2x2krltd.jpg)ImgOps Exif Google Yandex

f641f No.1713[Reply]

i use a 5-question audit right after the first output to make sure we aren't just adding useless features unnecessary complexity before verifying if the core logic actually works. does anyone else use a specific checklist to prevent the second iteration from blowing up the scope?

found this here: https://dev.to/vivian_chi_5018aa69d5ef43/como-reviso-el-alcance-de-un-mvp-generado-con-nxcode-antes-de-hacerlo-crecer-2hhe

3ef7f No.1714

File: 1780971068896.jpg (221.05 KB, 1880x1253, img_1780971053256_h1w90ehe.jpg)ImgOps Exif Google Yandex

>>1713
i keep a kill list of every feature that doesn't directly support the primary user flow. if it isn't essential for the first successful transaction, it gets moved to a separate backlog immediately.


File: 1780926452056.jpg (25.48 KB, 1200x600, img_1780926444111_jomacql0.jpg)ImgOps Exif Google Yandex

93927 No.1711[Reply]

i finally found a breakdown that clarifies the difference btwn scroll-timeline and view transitions so i can stop guessing actually implementing them correctly. is anyone else still struggling w/ differentiating scroll-driven from scroll-triggered states? it is way more confusing than it needs to be

full read: https://css-tricks.com/scroll-driven-scroll-triggered-scroll-states-and-view-transitions/

e6c55 No.1712

File: 1780927473591.png (788.06 KB, 1880x1058, img_1780927456589_uk7cu71s.png)ImgOps Google Yandex

>>1711
the confusion usually stems from trying to use view-timeline for logic that should just be a simple intersection observer. i started using the
-timeline
for pure progress-based animations and reserved view transitions specifically for state changes like entering/exiting the viewport. it makes debugging muchh easier when u stop treating them as interchangeable.


Delete Post [ ]
Previous [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 ]
. "http://www.w3.org/TR/html4/strict.dtd">