Beer CSS：Material Design 3 UI 的秘密武器

想要用 Material Design 3 打造简洁现代的 UI，又不想像其他框架那样臃肿？那就来 Beer CSS 吧！

为什么 Beer CSS 成为您下一个项目的最佳选择？

让我们强调几点：

🧙‍♂️Material Design 精通： Beer CSS 专为 Material Design 3 打造，让您轻松实现 Google 最新的设计语言。简洁的布局、微妙的阴影，以及对用户体验的关注。

🏅轻量级冠军：与一些会拖累您网站的框架不同，Beer CSS 轻量级。它占用空间极小，确保您的网站快速加载——非常适合移动用户，并且能够保证您的 SEO 满意度。

💪像大师一样编码：告别复杂的设置和配置。Beer CSS 的精髓在于简洁。只需包含库，即可使用其预制的实用类来设计您的 UI。按钮、排版、间距——一切尽在其中。

🪄 精益求精： Beer CSS 虽然秉承了 Material Design 3 的理念，但它并不会束缚你。你仍然可以自定义，以满足项目的独特需求。

轻松入门

没时间钻研冗长的文档？Beer CSS 助您快速编码。您可以将其视为一个 UI 工具包，其中包含所有必需的现成类。只需将该库添加到您的 HTML 中，即可开始将类应用于您的元素。

需要一些现实世界的例子吗？

如果我告诉你，你只需要一半的代码就能完成这项工作，你相信吗？Beer CSS 拥有令人难以置信的 DX 效果。当你开始使用它时，你就会明白这一点。以下是一些真实的例子：

菜单下拉菜单

// Beer CSS
<button>
  <span>Button</span>
  <menu>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </menu>
</button>

// Vuetify
<v-menu>
  <template>
    <v-btn color="primary">Button</v-btn>
  </template>
  <v-list>
    <v-list-item>
      <v-list-item-title>Item 1</v-list-item-title>
      <v-list-item-title>Item 2</v-list-item-title>
      <v-list-item-title>Item 3</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

// Quasar
<q-btn color="primary" label="Button">
  <q-menu>
    <q-list>
      <q-item>
        <q-item-section>Item 1</q-item-section>
      </q-item>
      <q-item>
        <q-item-section>Item 2</q-item-section>
      </q-item>
      <q-item>
        <q-item-section>Item 3</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</q-btn>

// Beer CSS
// Multi level menu dropdown (do you believe? 🤯)
<button>
  <span>Button</span>
  <menu>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>
      More Items
      <menu>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </menu>
    </li>
  </menu>
</button>

带有按钮的卡片

// Beer CSS
<article>
  <h6>Title</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <nav>
    <button>Button 1</button>
    <button>Button 2</button>
  </nav>
</article>

// Vuetify
<v-card>
  <v-card-item>
    <h6>Title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </v-card-item>

  <v-card-actions>
    <v-btn>Button 1</v-btn>
    <v-btn>Button 2</v-btn>
  </v-card-actions>
</v-card>

// Quasar
<q-card>
  <q-card-section>
    <h6>Title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </q-card-section>

  <q-card-actions>
    <q-btn>Button 1</q-btn>
    <q-btn>Button 2</q-btn>
  </q-card-actions>
</q-card>

重复使用相同的 html 内容

// A card with title + button
<article>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</article>

// A dialog with title + button
<dialog>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</dialog>

// A menu dropdown with title + button
<menu>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</menu>

使用可读的全局助手进行定制

<article class="small|medium|large|round|no-round|border...">
  <h6 class="small|medium|large...">Title</h6>
  <nav class="right-align|center-align|left-align...">
    <button class="small|medium|large|round|no-round|border...">Button 1</button>
  </nav>
</article>

准备好酿造一些美味佳肴了吗？

请访问 Beer CSS 网站 ( https://www.beercss.com ) 浏览文档并查看实际效果。您也可以从 Github ( https://github.com/beercss/beercss ) 获取它，立即开始构建时尚的 Material Design 3 UI。

Beer CSS 是您的正确选择吗？

如果您优先考虑速度、易用性和简洁的 Material Design 3 美感，Beer CSS 是您的最佳选择。但是，如果您需要极致的设计定制，或者您不喜欢 Material Design 3，那么您可能需要考虑其他通用框架。

文章来源：https://dev.to/leonardorafael/beer-css-the-secret-weapon-for-material-design-3-uis-53i3