#dev 2026-01-26
2026-01-26 UTC
ax562, ax5623, CrimeWave, hm, gRegor, thegreekgeek, ag, cotsuka, [schmarty], grufwub, rebel17251, rossabaker, barnaby, vidak, DanQ and [Murray] joined the channel
# 
[Murray] [Al_Abut] yeah, component-based architectures like design systems _really_ benefit from cascade layers, when done thoughtfully, though I personally still lean towards `data-` attributes for specific component encapsulation. Where cascade layers really shine is in allowing broad-strokes global styles that aren't going to cause issues.
# [Murray] I quite like a system where the reset gets shoved in at the bottom layer, then global theming/branding/styles, then utility classes, and finally a layer that allows you to override third-party styles (very useful at work), and then your components live in the top, default layer. Throw in some use of `:where` and scope, and it really unlocks systems like CUBE CSS/CSS variables without specificity conflicts
# 
[Trevor_Morris] This is what I've failed to understand about CSS layers… how it affects the cascade, which is the C in CSS! Though, I haven't looked in depth as I don't do much CSS nowadays. But cascading rules was a big part of building styles.
strugee joined the channel
# [Murray] It basically segregates the cascade. Each "layer" works like you'd expect internally; specificity follows the normal calculations, and all the regular cascade rules (order, specificity, overrides etc.) all work. *But* then layers form boundaries, and you define which take priority over the others.
# [Murray] So you could have three layers: @reset, @global, and @components. These might then get configured so that @reset has the lowest specificity; @components has the highest specificity; and @global sits in the middle. You can then have exactly the same selector in each layer (e.g. `h2
{ ... }`) and the one in `@components` would be the one that actually applies, as that layer has the highest specificity.# [Murray] this is why layers really helps solve the problem of third-party CSS, because you can import that CSS at a lower layer to your own site's selectors, and they should largely override the third-party ones, no matter how complex they are. E.g. a third-party tool that uses `.some-long-class > .element + .bem__style--nonsense` can be overwritten using layers by possibly just targeting the HTML element itself e.g. `h2`, rather than having to match
# [Murray] In some ways, its quite similar to `@scope`, but where that allows you to _ring fence_ a set of CSS rules and only apply them within specific context, `@layer` lets you take a whole stack of rules and say "make these apply in the cascade _before_ that other set of rules, regardless of the specificity calculations"
# [Murray] (there are still ways to break out of layers. inline styles are placed at the "highest" layer, and `!important` has a set of rules for defining how it interacts as well. I'd personally argue that any selector nested within an `@layer` rule that has `!important` set is a code smell and should be removed though)
# [Trevor_Morris] That's for the explanation, makes sense to me. The CSS on my website is a complete mess now!
# [Trevor_Morris] Especially when you've been *adding* to it for *years*… 😬
cotsuka joined the channel
# 
[jeremycherfas] I just read this and found it really enlightening https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/?utm_source=the-index&utm_medium=newsletter
GuestZero, cotsuka, ttybitnik, thegreekgeek, [manton] and ax562 joined the channel
# [social] Ever 5 to 10 years I go into my CSS and try to clean it up a little bit. Then I add to it, often layers in component areas. Twice I’ve tried to do and complete a structure and basic design CSS file clean-up to make it easier to see the base. I get about 2/3rds of the way through and figure I finish it on another day, then just add to it again.
# [Al_Abut] Thanks for the links and reading but oof, that made my head spin on first reading.
# [Al_Abut] There's a clear line between those that create design systems for a living and those that need to grab something off the shelf
# [Al_Abut] I'm not even pro-Tailwind but can see how people go for it instead of dealing with all of the ifs buts and maybes of trying to do true encapsulation of component styles at scale within something that has so many exceptions by design
# [Al_Abut] That's the part of the React/Next/modern js tooling that many people don't appreciate - how robust true encapsulation is and why it takes so much of what we see as html cruft to make it happen
# [Trevor_Morris] I've gone down the BEM route for my website, with Tailwind and `@apply` behind the scenes. So the HTML looks like BEM, but if you inspect the CSS, you'll see Tailwind functionality.
# [Al_Abut] Interesting!
# [Al_Abut] I was just wondering if modern CSS has come along far enough to reconcile the clean HTML crowd and robust easy component people
# [Al_Abut] I only recently realized that it's the reason my SSG (Astro) doesn't have template inheritance
# [Al_Abut] kind of doorstopped me this winter when looking into switching to Eleventy because it does have it, but no way to flip on the component encapsulation that I've become accidentally accustomed to
# [social] Al, to a large part it has. The 2023 CSS Day in Amsterdam and the 2024 one were mind expanding for what can now be done with CSS and really cleanly.
# [Al_Abut] [social] that's super interesting. So do you think it's a matter of time until someone makes a “syntactically clean” Tailwind replacement? Like if we’re at the stage just before Bootstrap came on the scene, then there's people swirling around the idea from different angles and already implementing them internally until a good enough common implementation gets popular…
[Mike_Mai] joined the channel
# [Mike_Mai] my hot take, with more people coding with AI, tailwind is just not that necessary. if you don't know CSS, AI can write very decent BEM or use CSS modules, as long as you feed your AI agent some decent coding standards and conventions. there's a lot of people using tailwind so i don't think it's going away anytime soon or we _need_ something to replace it. utility first thinking is just one of the ways, it'll live on like BEM.
# [social] I think there are some solutions like that are out there and been out there for a bit. If I remember correctly CSS Day had demos of some examples.
# [social] My site, which is fix width (I had a mobile version I built in 2001 that has versions of most pages and the last 10 blog posts, but not sure where it went, I have it in some archive predating a host / server move) and I more or less have been keeping it that way as a relic, much like the URL structure.
# 
[KevinMarks] Have you seen AI write usable CSS? I haven't looked much but what I did see was a weird mishmash of different ways of doing things
# [Mike_Mai] you have to feed it some rules
# [Mike_Mai] lots of bad info out there so generic agents are gonna return bad code.
# [Mike_Mai] speaking of, i started releasing agent skills. https://skills.sh/mikemai2awesome/agent-skills/tiny-css
# [social] Part of my backend update of the CMS this year I also cleaned up some of the CSS I’d used for layout and structure. I’ve not used JS for any of that since it was created. I just use HTML with limited and scoped classes and IDs.
# [KevinMarks] ah, so you have to explictly say which CSS cult you're in to get stuff that is consistent
# [Mike_Mai] css cult. lol
# [Mike_Mai] yeah my cult is minimalism
# [social] I love working in CSS and find it enjoyable and 90% of the time quite easy. I wouldn’t want to hand it over.
# [Trevor_Morris] With the BEM use (on my project) means repetition of similar layouts. That's the bit that annoys me. But it's fine.
# [Trevor_Morris] I wish I could add some “design tokens” to enable more theming. I've got a tailwind “accent” rule, which reads a CSS variable and I can use bg-accent and text-accent in my Tailwind.
# [Mike_Mai] with TW4, any css variable you render can be used as design token, bg-(--var-name), text-(--var-name), border-(--var-name), etc. no config needed. i don't like using TW but we do this at work, and that's how we match design 1:1.
# [Al_Abut] The skills site is gorgeous [Mike_Mai]
# [Mike_Mai] that's a vercel site, not mine. haha. i just created github repos and that site catches them as long as there are installs.
# [Al_Abut] Well the credit goes to somebody ;)
# [Al_Abut] Haha
# [Al_Abut] But yeah, I like these rules. I came up with something similar when I realized my clean CSS-only photo galleries were about to get ruined when trying to add just a little JS for keyboard shortcuts
# [Mike_Mai] later, i'll turn this into an agent skill too https://github.com/mikemai2awesome/a11y-rules
# [Al_Abut] Ooo, I like the idea of this.
# [Al_Abut] It's probably too much nuance for Slack and total flame bait, but we talked at the photo popup about how there's a developing middle ground between the no-ai ever and vibe-coding camps. The world isn't just a hard choice between vinyl and streaming - I love both.
# [Al_Abut] One key thing I've tried to keep in mind is the upskilling of learning vs downskilling of chores
# [Mike_Mai] i agree. i code with cursor nowadays. i handcraft a lot of CSS still, but i am bad at JS, that's when i code with claude, it has enabled me to release a lot of random ideas i have that i couldn't do myself.
# [Al_Abut] Exactly the same for me
# [Al_Abut] I get a lot of joy from writing CSS, absolutely none from JS
# [Al_Abut] I call it craft mode vs putting the PM hat on
# [Mike_Mai] yeah i love CSS, i still use CodePen a lot to quickly make something. i only move into cursor when i absolutely need to.
# 
[schmarty] personally i am avoiding using (or learning to use) any of the services from the hyper-scalers. i don't want to give them money or feed their surveillance machines, but also their "business models" have a huge impact on their service design.
# [Al_Abut] @ulhar4409 sorry for the jargon - PM is product manager. So it means I go into boss mode and just defining the output, QAing, refining it, etc.
# [Al_Abut] [schmarty] I respect that. I'm so glad to see open source keeping pace here and think it can do a lot. I hear about people running models on a Mac mini or whatever
# [Al_Abut] I've only recently been tempted to run my own model for audio transcription.
# [schmarty] haha, yeah i'm curious about local models but i am not about to build or buy a new machine for it right now. 🫠
# [Mike_Mai] i experimented building my own https://ama.mikemai.net/. using something very low cost right now, but definitely wanna dig into local models as well.
marc_in_space and eb joined the channel
# GuestZero braincoding :-)
aks, hedy, lanodan, nnrx, rob32, srushe, suki, burgeonlab, roxwize, nsh, mahboubine, rjomara5853, partyhusky[d], pcarrier[d], IWDiscord, topo_97[d], dougbeal[d], blacklight, fluffy and [Sophia_wood] joined the channel
# [Sophia_wood] good morning - had a rough night with an allergic reaction.
# [Sophia_wood] Coffee is warm and so good.
jak2k, DanQ and thegr8whoopdini[ joined the channel
# [jeremycherfas] I use Whisper to get a very rough and ready transcript of audio that makes the subsequent edit a lot more efficient.
cotsuka joined the channel
# ax562 Hi all. I'm using python/flask and was curious what would be the best direction, module wise, to handle geographic searches. For instance if a user is searcing for a car on sale in city A, I want to be able to return all cars in city A plus give them the option to return all cars withing 5, 10, 15, 20 miles etc from city A. Thanks in advance.
[manton]1, [KevinMarks], [Murray], [tantek]1, chenghiz_, bitauger, hughrawlinson, simpleauthority_ and mossymaker joined the channel
# [Mike_Mai] ↩️ this has been converted to agent skill: https://github.com/mikemai2awesome/agent-skills/blob/main/skills/tiny-a11y/SKILL.md.
[snarfed] joined the channel
# ax562 this is a personal independent website. thanks for that info.
# ax562 so I'm trying to add this functionality to my website.
# ax562 right not I'm looking at geopy + haversine but not sure if that is the best/least complicated.
# ax562 [snarfed] cool thanks! Been learning web dev on the fly the last few months. Soooo much to learn but I'm moving along nicely :) . Just trying to save a bit of time trying to go in working/implemented directions rather than trying to reinvent the wheel.
# [KevinMarks] How big an area are you looking at?
# ax562 for now, not too big 75-150 mile radius.
# [KevinMarks] Lat long bounding box is a decent answer, you cam alwya do exact calculation later
# [KevinMarks] There's a python lib called pyproj that calls a C library called Proj that is pretty useful for this
# [KevinMarks] In the uk you can use UK Grid coordinates and just do pythagoras on them
# ax562 right now I'm looking at https://pypi.org/project/geo-city-locator/
# ax562 with updated db from https://simplemaps.com/data/world-cities
# ax562 to update 'DATA_URL = "https://simplemaps.com/static/data/world-cities/basic/simplemaps_worldcities_basicv1.75.zip"'
# ax562 all info is useful is appreciated and ty :)
# ax562 *and
barnaby, cotsuka, skinsurf, bterry, [aciccarello], blacklight and CrimeWave joined the channel
# [KevinMarks] Oh, you need a gazetteer too
# [KevinMarks] I think GWG was working on this. OpenStreetMap is a good source of city data. The tricky part is what people think is a city
# [KevinMarks] At one point flickr published geo areas based on what people tagged photos in that area
cotsuka and DanQ joined the channel
# ax562 ty [KevinMarks]
blacklight joined the channel