用 CSS 嵌套做上下文样式适配
CSS 嵌套中 & 选择器不必放在前面，放在父选择器后面可以按容器上下文给元素设样式。比如.dark & 让卡片在深色容器里自动切换配色，.toolbar & 让按钮在工具栏里自动缩小。浏览器底层用:is 包裹父选择器，遇到 ID 选择器时与 Sass 行为不同，可能引发特异性陷阱。
评论
点赞
收藏我把 ColorCopy 从 Mac App Store 撤下了
我启动了彩色复制 5月18日。这是我第二个macOS应用，但第一个启动时我是在Mac 应用商店.今天，我决定把它拔掉。 这款应用并非新颖之作，但它将四个色彩工具整合到一个菜单栏中：吸管器、色彩选择器、调色板管理器和对比度检查器，每个工具都只需快捷键即可。 我让它免费开放，只需一次性内购即可解锁无限次使用。无需订阅，无需持续付费。它是一款简单、稳定且门槛最低的软件......这正是App Store...
软件行业已变：从开发者视角看 AI 时代的工程转型
开发者反思 AI 时代软件工程的转变：虽然构建速度加快，但代码质量未必提升，且失去了深度专注的“心流”状态。不过，这也让资深工程师有更多精力进行代码审查、重构和技术债清理，从而在更高维度解决问题。文章最后提出一个开放性问题：只要最终结果是可靠且经过深思熟虑的代码，其生成过程是否真的重要？
Introducing ColorCopy
My second macOS app, ColorCopy, was approved by the Mac App Store today! It started as a menu bar color picker: press a key, click any pixel on your screen, and the color lands on your clipboard in wh...
Introducing TongueType
I just launched my first macOS app called TongueType. It's voice dictation that runs entirely on your Mac. Hold a key, speak, release, and your words appear wherever your cursor happens to be. I build...
My Stance on AI in Software Development
I believe artificial intelligence is a powerful and valuable tool that can significantly improve how we create, solve problems, and bring ideas to life. I didn't always feel this way.. But these days,...
How I Use GitHub Issues
I like using GitHub issues for actionable things such as bugs and backlog items I've committed to doing. Non-maintainers are encouraged to open issues only for bugs, whereas everything else is a discu...
Revisiting FOUCE
It's been awhile since I wrote about FOUCE and I've since come up with an improved solution that I think is worth a post. This approach is similar to hiding the page content and then fading it in, but...
Web Components Are Not the Future – They're the Present
It’s disappointing that some of the most outspoken individuals against Web Components are framework maintainers. These individuals are, after all, in some of the best positions to provide valuable fee...
Component Machines
Components are like little machines. You build them once. Use them whenever you need them. Every now and then you open them up to oil them or replace a part, then you send them back to work. And work,...
Styling Custom Elements Without Reflecting Attributes
I've been struggling with the idea of reflecting attributes in custom elements and when it's appropriate. I think I've identified a gap in the platform, but I'm not sure exactly how we should fill it....
Reflection and Custom States in Web Components
In the Web Component world, attribute reflection is commonly used to style custom elements both internally and as public APIs for consumers. If you're not familiar, attribute reflection occurs when an...
Anchoring Software to Major Versions
In a SemVer world, major releases are those which contain incompatible API changes. We often see software projects anchor themselves to major versions for long periods of time, usually with the promis...
Dynamic Slots in Web Components
Web Component authors already know how powerful slots are, but what if you could do even more with them? Here's an interesting technique to use (or abuse) slots in your custom elements. I've been call...
Building Custom Elements with a Library
I often get asked why I use Lit to build web components. Hands down, it's become my preference after years of working with various libraries and tools. Here's why I use it. Libraries offer a better DX...
Design Systems Are An Investment
It's hard to put a value on a design system. It's a lot easier to add up the costs of said design system, especially in terms of salaries and development time. It's even easier to target a design syst...
How to File a Bug Report
They say there's no such thing as bug-free code. When problems arise, creating a minimal reproduction will give you the best chance of a speedy resolution. When a potential bug is discovered, many dev...
Thoughts on Framework Churn
I often worry about framework churn. A lot. But using a framework isn't a bad thing. After all, they save time. They help you build things faster. Yes, there are costs associated with frameworks later...
Better Buttons with color-mix() and Custom Properties
Let's build a button that accepts one color and calculates its hover and focus states automatically. For this experiment, we'll use CSS Custom Properties, color-mix, and OKLCH to ensure that tints and...