System.Xml.XmlElement
At that time I really had no idea how to structure my CSS code and given the choice between a pile of complete chaos and Tailwind, I was really happy to choose Tailwind.
当时我真的不知道如何构造我的 CSS 代码，在一堆完全混乱和 Tailwind 之间进行选择时，我真的很高兴选择了 Tailwind。
It helped me make a lot of tiny sites!
它帮助我制作了很多小网站！
I spent the last week or so migrating a couple of sites away from Tailwind and towards more semantic HTML + vanilla CSS, and it was SO fun and SO interesting, so here are some things I learned!
我花了大约一周的时间将几个网站从 Tailwind 迁移到更具语义的 HTML + vanilla CSS，这非常有趣，所以这里是我学到的一些东西！
As usual I’m not a full-time frontend developer and so all of my CSS learning has happened in fits and starts over many years.
和往常一样，我不是一名全职前端开发人员，所以我所有的 CSS 学习都是断断续续地进行了很多年。
When I started thinking about structuring CSS, I was intimidated at first: I’m not very good at structuring my CSS!
当我开始考虑构建 CSS 时，我一开始很害怕：我不太擅长构建 CSS！
But then I started reading blog posts talking about how to structure CSS (like A whole cascade of layers or How I write CSS in 2024 ) and I realized a couple of things:
但后来我开始阅读有关如何构建 CSS 的博客文章（例如“整个层叠层”或“2024 年我如何编写 CSS”），我意识到了一些事情：
For example, Tailwind has: a reset stylesheet a colour palette a font scale the systems I’m going to talk about I’m going to talk about a few aspects of my CSS codebase and my thoughts so far what kind of rules I want to impose on the codebase for each one.
例如，Tailwind 有： 重置样式表 调色板 字体缩放 我要谈论的系统 我要谈论我的 CSS 代码库的几个方面以及到目前为止我的想法 我想对每个代码库强加什么样的规则。
Some of them are copied from Tailwind and some aren’t.
其中一些是从 Tailwind 复制的，有些则不是。
I just copied Tailwind’s “ preflight styles ” by going into tailwind.css and copying the first 200 lines or so.
我刚刚通过进入 tailwind.css 并复制前 200 行左右来复制 Tailwind 的“预检样式”。
I noticed that I’ve developed a relationship with Tailwind’s CSS reset over time, for example Tailwind sets box-sizing: border-box on every element (which means that an element’s width includes its padding and border):
我注意到随着时间的推移，我已经与 Tailwind 的 CSS 重置建立了联系，例如 Tailwind 在每个元素上设置 box-sizing: border-box （这意味着元素的宽度包括其内边距和边框）：
* { box-sizing: border-box; } I think it would be a real adjustment for me to switch to writing CSS without these, and I’m sure there are lots of other things in the Tailwind reset (like html {line-height: 1.5;} ) that I’m subconsciously used to and don’t even realize are there.
* { 框大小：边框框；我认为，如果我转向编写没有这些的 CSS，这对我来说将是一个真正的调整，而且我确信 Tailwind 重置中还有很多其他东西（例如 html {line-height: 1.5;} ），我潜意识里已经习惯了，甚至没有意识到它们的存在。
This next part is the bulk of the CSS!
下一部分是 CSS 的大部分内容！
The idea here is to organize CSS by “components”, in a way that’s spiritually related to Vue or React components.
这里的想法是通过“组件”来组织 CSS，这种方式在精神上与 Vue 或 React 组件相关。
(though there might not actually be any Javascript at all in the site)
（尽管该网站实际上可能根本没有任何 Javascript）
Basically the idea is that: Each “component” has a unique class The CSS for one component never overrides the CSS for any other component Each component has its own CSS file So editing the CSS for one component won’t mysteriously break something in another component.
基本上这个想法是： 每个“组件”都有一个唯一的类 一个组件的 CSS 永远不会覆盖任何其他组件的 CSS 每个组件都有自己的 CSS 文件 因此，编辑一个组件的 CSS 不会神秘地破坏另一个组件中的某些内容。
And probably like 80% of the CSS that I would actually want to change is in various component files, so if I’m editing a 100-line component, I just have to think about those 100 lines.
可能我真正想要更改的 CSS 的 80% 都在各种组件文件中，所以如果我正在编辑 100 行组件，我只需要考虑这 100 行。
It’s way easier for me to think about.
这对我来说更容易思考。
.zine { ...
.zine { ...
&.horizontal { ...
&.水平{ ...
} &.vertical { ...
} &.垂直{ ...
} &:hover { ...
} &:悬停{ ...
} } I haven’t done anything programmatic (like web components or @scope ) that ensures that components won’t interfere with each other, but just having a convention and trying my best already feels like a big improvement.
我还没有做任何程序化的事情（比如 Web 组件或 @scope ）来确保组件不会相互干扰，但只是制定一个约定并尽力而为就已经感觉是一个很大的进步。
Next: conventions to maintain some consistency across the site and keep these components in line with each other!
下一步：保持整个站点的一致性并使这些组件保持一致的约定！
colours.css has a bunch of variables like this which I can use as necessary.
colors.css 有一堆这样的变量，我可以根据需要使用它们。
Colour is really hard and I didn’t want to revisit my use of colour in this refactor, so I left this alone.
颜色真的很难，我不想在这次重构中重新审视我对颜色的使用，所以我就不管它了。
The only guideline I’m trying to enforce here is that all colours used in the site are listed in this file.
我在这里试图强制执行的唯一准则是该文件中列出了网站中使用的所有颜色。
:root { --pink: #fea0c2; --pink-light: #F9B9B9; --red: #f91a55; --orange: rgb(222, 117, 31); ...
:root { --pink: #fea0c2; --粉红光：#F9B9B9； --红色：#f91a55； --橙色: rgb(222, 117, 31); ...
} 4.
} 4.
font sizes One thing I appreciated about Tailwind was that if I wanted to set a font size, I could just think “hm, I want the text to be big”, write text-lg , and be done with it!
字体大小 我对 Tailwind 很欣赏的一件事是，如果我想设置字体大小，我可以只是想“嗯，我希望文本变大”，写下 text-lg ，然后就完成了！
And maybe if it’s not big enough I’d use xl or 2xl instead.
如果不够大，我可能会使用 xl 或 2xl 代替。
No trying to remember whether I’m using em or px or rem .
不用试图记住我使用的是 em 还是 px 还是 rem 。
--size-xs: 0.75rem; --line-height-xs: 1rem; --size-sm: 0.875rem; --line-height-sm: 1.25rem; Then if I want to set a font size, I can do it like this.
--尺寸-xs：0.75rem； --行高-xs: 1rem; --尺寸-sm：0.875rem； --行高-sm: 1.25rem;然后如果我想设置字体大小，我可以这样做。
It’s a little more verbose than Tailwind but I’m happy with it for now.
它比 Tailwind 更冗长一些，但我现在对它很满意。
h3 { font-size: var(--size-lg); line-height: var(--line-height-lg); } 5.
h3 { 字体大小：var(--size-lg);行高：var(--行高-lg); } 5.
utilities There are some things like buttons that appear in many different components.
实用程序 有些东西（例如按钮）出现在许多不同的组件中。
I’m calling these “utilities”.
我称这些为“实用程序”。
I copied some utility classes from Tailwind (like .sr-only for things that should only appear for screenreader users).
我从 Tailwind 复制了一些实用程序类（例如 .sr-only ，用于仅应为屏幕阅读器用户显示的内容）。
“base” styles are styles that apply across the whole site that I chose myself.
“基本”样式是我自己选择的应用于整个网站的样式。
I have to keep this section really small because I’m not confident enough to enforce a lot of styles across the whole site.
我必须将这一部分保持得非常小，因为我没有足够的信心在整个网站上强制执行多种样式。
These are the only two I feel okay about right now, and I might change the one:
这是我现在唯一感觉还不错的两个，我可能会改变一个：
/* put a 950px column in the middle of each */ section { --inner-width: 950px; padding: 3rem max(1rem, (100% - var(--inner-width))/2); } a { color: var(--orange); } I think for the base styles it’s going to be easiest for me to work kind of bottom up – first start with almost nothing in the base styles, and then move some styles from the components into base styles as I identify common things I want.
/* 在每个部分的中间放置一个 950px 的列 */section { --inner-width: 950px;填充：最大 3rem(1rem, (100% - var(--inner-width))/2); } a { 颜色：var(--orange);我认为对于基本样式来说，自下而上的工作对我来说是最简单的 - 首先从基本样式中几乎没有任何内容开始，然后当我确定我想要的常见内容时将一些样式从组件移动到基本样式中。
I haven’t completely worked out an approach to managing padding and margins yet.
我还没有完全找到管理填充和边距的方法。
I’m definitely trying to be more principled than how I was doing it in Tailwind though, where I would just haphazardly put padding and margins everywhere until it looked the way I wanted.
我确实尝试比在 Tailwind 中的做法更有原则性，在 Tailwind 中我只是随意地在各处放置填充和边距，直到它看起来像我想要的那样。
Right now I’m working towards making the outer layout components in charge of spacing as much as possible.
现在我正在努力让外部布局组件尽可能地负责间距。
For example if I have a with a bunch of children that I want to have space between them, I might use this to space the children evenly:
例如，如果我有一群孩子，我希望他们之间有空间，我可以用它来均匀地间隔孩子们：
The way I was doing responsive design in Tailwind was to use a lot of media queries.
我在 Tailwind 中进行响应式设计的方式是使用大量媒体查询。
Tailwind has this md:text-xl syntax that means “apply the text-xl style at sizes md or larger”.
Tailwind 具有 md:text-xl 语法，意思是“以 md 或更大的尺寸应用 text-xl 样式”。
I’m trying something pretty different now, which is to make more flexible CSS grid layouts that don’t need as many breakpoints.
我现在正在尝试一些完全不同的东西，那就是制作更灵活的 CSS 网格布局，不需要那么多断点。
This is hard but it’s really interesting to learn about what’s possible with grid, and it’s a good example of something that I don’t think is possible with Tailwind.
这很难，但了解网格的可能性确实很有趣，而且这是一个很好的例子，说明了我认为 Tailwind 不可能实现的事情。
For example, I’ve been learning about how to use auto-fit to automatically use 2 columns on a big screen and 1 column on a small screen like this:
例如，我一直在学习如何使用自动调整功能在大屏幕上自动使用 2 列，在小屏幕上自动使用 1 列，如下所示：
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content)); justify-content: center; I also used grid-template-areas a lot which is an amazing feature that I don’t think you can use with Tailwind.
显示：网格；网格模板列：重复（自动调整，minmax（min（100％，400px），最大内容））；调整内容：居中；我还经常使用 grid-template-areas，这是一个令人惊奇的功能，我认为您无法将它与 Tailwind 一起使用。
Some inspiration: A responsive grid layout with no media queries from CSS Tricks 9.
一些灵感：来自 CSS Tricks 9 的响应式网格布局，没有媒体查询。
the build system: esbuild In development, I don’t need a build system: CSS now has both built in import statements, like this:
构建系统：esbuild 在开发中，我不需要构建系统：CSS 现在都内置了 import 语句，如下所示：
@import "reset.css"; @import "typography.css"; @import "colors.css"; and built in nested selectors, like this:
@导入“重置.css”； @导入“版式.css”； @导入“颜色.css”；并内置嵌套选择器，如下所示：
.page { h2 { ...} } If I want, I can use esbuild to bundle the CSS file for production.
.page { h2 { ...} } 如果我愿意，我可以使用 esbuild 捆绑 CSS 文件以进行生产。
That looks something like this.
看起来像这样。
esbuild style.css --bundle --loader:.svg=dataurl --loader:.woff2=file --outfile=/tmp/out.css Even though I usually avoid using CSS and JS build systems, I don’t mind using esbuild (which I wrote about in 2021 here ) because it’s based on web standards and because it’s a static Go binary.
esbuild style.css --bundle --loader:.svg=dataurl --loader:.woff2=file --outfile=/tmp/out.css 尽管我通常避免使用 CSS 和 JS 构建系统，但我不介意使用 esbuild（我在 2021 年在这里写过），因为它基于 Web 标准，而且是静态 Go 二进制文件。
A few people asked why I was migrating away from Tailwind.
有几个人问我为什么要从 Tailwind 迁移出去。
A few factors that contributed are:
做出贡献的几个因素是：
While doing this I learned about a lot of CSS features that I didn’t use but am curious about learning about one day:
在这样做的过程中，我了解了很多我没有使用过的 CSS 功能，但我很想有一天能了解一下：
I’ve been talking a lot in this post about what I learned from using Tailwind, and that’s all true.
我在这篇文章中谈论了很多关于我从使用 Tailwind 中学到的东西，这都是事实。
But I read this post 3 years ago called Tailwind and the Femininity of CSS that really stuck with me.
但我在 3 年前读过这篇名为 Tailwind 和 CSS 的女性气质的文章，它深深地打动了我。
I honestly probably started out with an attitude towards CSS a little like that post describes:
老实说，我一开始对 CSS 的态度可能有点像那篇文章所描述的：
Theyâve heard itâs simple, so they assume itâs easy.
他们听说这很简单，所以他们认为这很容易。
But then when they try to use it, it doesnât work.
但当他们尝试使用它时，却不起作用。
It must be the fault of the language, because they know that they are smart, and this is supposed to be easy.
这一定是语言的错，因为他们知道自己很聪明，这应该很容易。
But in the last 10 years I’ve learned to really love and respect CSS as a technology.
但在过去 10 年里，我学会了真正热爱并尊重 CSS 作为一项技术。
So I decided years ago that I wanted to react to “CSS is hard” by getting better at CSS and taking it seriously as a technology, instead of devaluing it.
因此，我几年前就决定，我想通过更好地掌握 CSS 并认真对待它作为一项技术来应对“CSS 很难”，而不是贬低它的价值。
Doing that changed everything for me: I learned that so many of my frustrations (“centering is impossible”) had been addressed in CSS a long time ago, and that also what “centering” means is not always straightforward and it makes sense that there are many ways to do it.
这样做改变了我的一切：我了解到，我的许多挫败感（“居中是不可能的”）很久以前就已经在 CSS 中得到了解决，而且“居中”的含义并不总是直截了当的，有很多方法可以做到这一点，这是有道理的。
CSS is hard because it’s solving a hard problem!
CSS 很难，因为它解决的是难题！
I’ve been so impressed by the new CSS features that have been built in the last 10-15 years (some of which I’ve talked about in this post!) and how they make it easier to use CSS, and spending the time to improve my CSS skills has been a really cool experience.
过去 10-15 年中构建的新 CSS 功能（其中一些我在这篇文章中讨论过！）以及它们如何使 CSS 的使用变得更容易，给我留下了深刻的印象，花时间提高我的 CSS 技能是一次非常酷的体验。
And that post made me feel like Tailwind contributes to the devaluing of CSS expertise, and like that’s not something I want to be a part of, even if Tailwind has been a useful tool for me personally.
这篇文章让我觉得 Tailwind 导致了 CSS 专业知识的贬值，而且我不想参与其中，即使 Tailwind 对我个人来说是一个有用的工具。
Especially in this time of LLMs where it feels more important than ever to value humans’ expertise.
尤其是在法学硕士时代，重视人类的专业知识比以往任何时候都更加重要。
Thanks to Melody Starling who originally designed and wrote the CSS for wizardzines.com , everything cool and fun about the site is thanks to Melody.
感谢 Melody Starling 最初为 Wizardzines.com 设计和编写了 CSS，该网站的一切酷炫和有趣都归功于 Melody。
Also I read so many incredible blog posts about CSS while working on this (from CSS Tricks , Smashing Magazine , and more), I’ve tried to link some of them throughout this post and I really appreciate how much folks in the CSS community share their practices.
另外，我在从事此工作时阅读了很多关于 CSS 的令人难以置信的博客文章（来自 CSS Tricks、Smashing Magazine 等），我尝试在这篇文章中链接其中的一些文章，我非常感谢 CSS 社区中的人们分享他们的实践。