使用 matcha.css 让裸体网站看起来很棒！

在开始一个新的 Web 项目时，您是否曾考虑过从“空白页”开始的艰辛？

索引.html

请注意缺少任何样式或自定义属性。



<html>
  <body>
    <h1>Hello world!</h1>
    <p>
      This is my new project, and it's still under construction.
      Please be indulgent 😊
    </p>
    <p>
      Also, check out my work on <a href="https://github.com/octocat">GitHub</a>!
    </p>
    <blockquote>
      <p>
        Imagination is more important than knowledge
      </p>
      <cite>Albert Einstein</cite>
    </blockquote>
    <menu>
      <li>Home</li>
      <li>
        About me
        <menu>
          <li>My works</li>
          <li>My passions</li>
        </menu>
      </li>
      <li>Contact</li>
    </menu>
    <form>
      <h2>Contact me</h2>
      <label>
        Your email:
        <input type="email" name="email" placeholder="Your email" required>
      </label>
      <label>
        Your message:
        <small>255 characters max</small>
        <textarea name="message" placeholder="Your message" required></textarea>
      </label>
      <button type="submit">Send</button>
    </form>
  </body>
</html>

哎哟！如果你一边声称自己是 Web 开发人员，一边向朋友展示这个，他们肯定会开始质疑你到底在做什么……

默认浏览器样式表通常非常简单，当您设计应用程序原型、生成静态 HTML 页面、Markdown 生成的文档等时，如果没有“视觉上好看”的东西，并且不想过早地深入研究 CSS 的复杂性，那么这可能会令人沮丧。

好消息！我有个完美的东西给你：matcha.css！

只需将以下内容添加到您的文档中，即可看到奇迹发生：



<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">

无需做任何事情，我们就得到了一个尊重用户对明暗模式的偏好的页面，漂亮的字体和适当的间距，我们的页面<menu>实际上看起来像一个菜单，我们的页面<form>也相当不错，甚至还有用于必填输入的“必填字段”指示器。

所有这些都不需要任何构建步骤、JavaScript、配置或重构。

这是因为matcha.css使用了语义样式。例如，它假设<menu>嵌套在另一个元素中<menu>应该会生成一个子菜单，而嵌套在某个元素中<label><input required></label>应该向用户明确说明该输入是必填的。

还有一些“插入式” CSS 库，但我相信这是最完整的一个，因为它提供了开箱即用的附加现代样式，如语法突出显示、简单布局、实用程序类等。

matcha.css也易于定制（它没有任何!important规则，甚至提供帮助器来创建自定义构建）并且也是可逆的（如果您决定迁移出去，只需删除样式表）。

最后但同样重要的一点是，它是完全免费和开源的！

低光笔/抹茶色

🍵 纯 CSS 编写的嵌入式语义样式库。高度可定制，非常适合创建简单网站和原型 Web 应用！

查看matcha.mizu.sh了解完整概述！

文章来源：https://dev.to/lowlighter/make-naked-websites-look-great-with-matchacss-4ng7