CSS、Tailwind 或 Bootstrap：我应该选择什么来设计我的 Web 项目

不久前，我的同事迭戈写了几篇文章（例如 这是）关于创建网页内容的框架，更具体地说是那些负责提供设计的框架。最终，网络浏览器只能理解 HTML 的结构， 的CSS 正如我的老师所说，设计和 JavaScript 可以为内容添加动画，尽管 Laravel 或 Django 等框架的说法似乎相反。他们看着像是。今天我们要做的就是解释何时应该选择一个选项来塑造 HTML 内容。

尽管标题中提到了 Tailwind 和 Bootstrap，但我所说的这些名称的意思是一些人认为的纯 CSS 和适当框架以及完整框架之间的中间点。它们都是框架，但 Bootstrap 几乎已经完成了所有工作，而 Tailwind 允许更多定制。我已经预料到原因之一 选择一个或另一个选项，但让我们从何时使用 CSS 开始。

何时为我的网站选择纯 CSS

纯 CSS 是当你写的时候 所有规则都手动使用选择器。例如，当我希望导航栏具有红色背景并且链接具有不同颜色并居中时，我会编写如下内容，假设目标浏览器支持嵌套规则。

导航 { 背景颜色：红色；颜色：蓝色；保证金：0；文本对齐：居中； a { 填充：10px;白颜色 } }

对于上面的内容，如果我们想要非常简单的——而且必须说设计得很糟糕——导航栏粘在边缘上，我们仍然需要添加一些东西，它是 使文档正文没有边距。否则，浏览器会在所有内容周围显示边框。

一切都是如此。

• 好处：
  • 使用纯 CSS 我们完全控制我们所创造的东西.
  • 我们不必添加多个文件才能使所有内容正常工作，更不用说在我们的项目中安装框架了。
• 坏事：
  • 手动编写所有 CSS 对于一个简单的项目来说可能很有用，但如果项目很复杂或者我们必须创建许多网页，则效果就不那么好了。总是从头开始是昂贵的、无偿的，这就是框架存在的原因。

何时选择 Bootstrap（或其他“完整”框架）

Bootstrap 和大多数 CSS（以及非 CSS）框架均已创建 思考生产力。他们心中常常有一种哲学，称为“少写，多做”。一般来说，它们是 CSS 文件，也许还有 JavaScript，一切准备就绪，可以开始使用。

与纯 CSS 不同，纯 CSS 与选择器、Bootstrap 和其他类似选项一起使用 他们使用标签中包含的类 一个元素的。例如，如果我们想要创建一个带有蓝色文本、红色背景和内部分隔的类型 1 (h1) 标题，我们应该编写如下内容：

这是正文

不知道大家有没有注意到，我用了“primary”和“danger”作为颜色，而Bootstrap有几个用于菜单、按钮和消息。如果我们想使用其他的，我们必须使用我们自己的CSS并覆盖Bootstrap规则。或者编辑框架的 .css 文件。

• 好处：
  • 有文档和示例可以快速创建元素。
  • 它反应灵敏并且 移动第一.
  • 如果您从 Bootstrap 文档中获取示例，即使不太了解 Bootstrap，也可以快速创建网页。
• 坏事：
  • 使用 Bootstrap 创建页面并快速完成，可以清楚地了解其设计所使用的内容。
  • 如果您不应用自己的规则和调整，则可定制性非常低。

何时选择顺风

Tailwind 也是一个框架，但是 许多人将其置于纯 CSS 和其他框架之间 因为没有自己的特色风格。一旦我们安装了它，我们就会看到所有的标题都有相同的大小，这是因为它有一个很好的 重置 以便用户控制一切。为了从 Bootstrap 示例中获取标头类型 1，Tailwinds 要求我们提供如下内容：

这是正文

与 Bootstrap 组合类有相似之处和不同之处。例如，内边距或 填充 它是相同的，每个都有其大小，但语法相同，并且用于使文本居中的类也相同。已经 颜色差异越大。虽然 Bootstrap 默认情况下只包含一些主要颜色、次要颜色、危险颜色、警告颜色等，但 Tailwind 提供了更多样的范围，您可以设置最多 9 种不同色调的颜色。要了解所有这些，值得阅读 官方文件.

• 好处：
  • 据说它比其他框架更轻。
  • 我们完全掌控我们的设计；我们不依赖于一个确定的基础。
  • 类名更像是纯CSS。
• 坏事：
  • 它的安装并不是最简单的。虽然它可以与添加到标签的 CDN 一起使用 头，对于严肃的项目不建议这样做。
  • Tailwind CSS 部分是像 Sass 一样的文本预处理器，我们需要一个输入文件来将所有内容编译并转换为纯 CSS。
  • HTML 不是很干净；具有多种样式的元素可以有一个巨大的类，但这有一个解决方案，尽管您必须 学习它.

格 y 柔性 使用 CSS 框架

这既是框架的优点，也是纯 CSS 的缺点。有比其他版本更简单的版本，并且 控制 格 y 柔性 CSS 可能很复杂。框架已经考虑到了这一点，例如 Bootstrap 有一个基于 12 列的简单解决方案。

假设我们有一个菜单或类似的有 6 个元素的东西，我们希望它们根据屏幕的宽度进行排列，也称为 视口。要使用纯 CSS 来完成此操作，您必须使用媒体查询，这就像浏览器对我们访问内容的屏幕类型进行的查询。 CSS 将为每个屏幕宽度包含一个@media，并且在每个屏幕宽度中我们都必须重新调整“网格”。 Bootstrap 是这样解决这个问题的：

文本文本文本文本文本文本

前面的课程将表明：

• 12号口：在Bootstrap采用移动屏幕的“正常”尺寸中，每个元素将占据总数（12/12），这将使得有六行一层一层地占据屏幕的整个宽度。它可以被省略，因为它是默认行为。
• col-md-6- 在中等屏幕上，每个元素将占据一半（6/12），因此顶部有两个，中间有两个，底部有两个。
• col-lg-4- 在大屏幕上，每个元素将占据三分之一（4/12），因此顶部有三个，底部有三个。
• 列-XL-2- 在较大的屏幕上，每个项目将占据六分之一 (2/12)，因此由于有 6 个项目，因此将显示一行包含所有六个项目。

有关 Bootstrap 中网格的更多信息.

结论

框架和这些类型的工具 他们被创造是为了变得更好，而且最重要的是，当我们需要高效生产时，它们是有意义的。当您必须使用少量 CSS 时，最好不要太沉迷其中并手动插入。当我们想要快速而又不太关心定制的东西时，像 Bootstrap 这样的东西可以成为解决方案。而如果我们想要完全控制，即使我们要努力一点，中间点，Tailwind。