不久前,我的同事迭戈写了几篇文章(例如 这是)关于创建网页内容的框架,更具体地说是那些负责提供设计的框架。最终,网络浏览器只能理解 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 个项目,因此将显示一行包含所有六个项目。
结论
框架和这些类型的工具 他们被创造是为了变得更好,而且最重要的是,当我们需要高效生产时,它们是有意义的。当您必须使用少量 CSS 时,最好不要太沉迷其中并手动插入。当我们想要快速而又不太关心定制的东西时,像 Bootstrap 这样的东西可以成为解决方案。而如果我们想要完全控制,即使我们要努力一点,中间点,Tailwind。