适用于前端开发人员的10个最佳CSS框架

本文概述

• Bootstrap
• Foundation
• Bulma
• UIkit
• Semantic UI
• Susy
• Materialize
• Pure
• Skeleton
• Milligram

我曾经听过一个前端开发人员的笑话, ” NASA已将机器人降落在火星上, 在这里我们仍在努力使div居中对齐！”这个笑话包含很多真相, 这让我感到很难过。在CSS中做一件听起来像是将盒子居中的盒子一样容易和常识驱动的事情非常困难。除非你之前没有遇到过。并将代码段保存在某个地方。而且即使你成功实现了它, 也总是有一种隐忧, 那就是它可能会在某个愚蠢的浏览器中突然崩溃！ CSS将”必要的网络犯罪”与JavaScript结合在一起。这是一个偶然发展的标准, 不同的浏览器制造商对它的解释也不同, 现在充满了矛盾, 以至于没人敢称自己为” CSS专家”。

因此, 难怪CSS框架会随着时间的推移而出现, 并消除了大部分痛苦。如今, 我们无法想象没有最喜欢的CSS框架进行编码, 因为针对多种屏幕尺寸已成为必需。

但是你如何知道你的框架最适合手头的工作呢？另外, 如果你不熟悉前端开发, 应该选择哪种框架？

这篇文章一览了前端开发的前景, 并比较了CSS框架中的领先者。因此, 如果你对手动编写CSS规则感到厌倦, 请速潜一下以减轻压力！

Bootstrap

Bootstrap是Twitter的一项举措, 因大规模引入响应式设计而倍受赞誉。它是第一个推广”移动优先”理念的框架。不再为较小的屏幕设计自己的单独项目；你需要做的就是包括相关的Bootstrap类, 并且该设计将自动针对不同的屏幕尺寸进行调整(嗯, 差不多)。

Bootstrap中的响应式设计(4.0与3.0)

Bootstrap通过引入网格的思想实现了响应式设计。网格是屏幕的不可见分区, 分为几列(以及宽度)。例如, 如果你要在大屏幕上并排放置三个”框”, 而在小屏幕上垂直放置, 则可以这样做：

<div class="container">
  <div class="row">
    <div class="col-md">
       One of three columns
    </div>
   
    <div class="col-md">
      One of three columns
    </div>

    <div class="col-md">
      One of three columns
    </div>
  </div>
</div>

当前流行的Bootstrap版本是4, 这是对3.3系列的重大改进。上面的语法是你在Bootstrap 4中进行编码的方式, 这要归功于Flexbox的强大功能以及浏览器直接支持的其他现代布局功能。在较低版本的Bootstrap中, 网格被定义为总共12列, 这导致诸如

<div class="col-md-6 col-lg-4"></div>

使div在大型设备上占据屏幕宽度的三分之一, 在中型设备上占据一半的屏幕宽度。尽管需要熟悉Flexbox, 但语法现在更加令人愉悦。

引导专家

Bootstrap有很多优点, 尤其是对于全栈开发人员而言：

• 快速原型制作：借助Bootstrap, 几乎不需要花时间思考棘手的CSS定位和浏览器不兼容的问题。你要做的全部工作就是写出HTML, 然后应用适当的CSS类使响应变得生动起来。
• 大型生态系统：到目前为止, Bootstrap拥有前端框架中最大的生态系统。使用Bootstrap构建的网站布局, 主题, 管理面板, UI组件等的数量令人难以置信, 并且一直在不断改善。对于顾问和产品公司而言, 这意味着预建物品和社区支持将永远是足够的。
• 受Twitter支持：开源的新兴趋势是由商业实体发起的项目的兴起。这些实体通常会围绕其产品来建立有利可图的业务。例如Kotlin(JetBrains), WordPress(Automattic, Inc。), Angular(Google), React(Facebook)等。当项目由已建立的实体支持并且不是一个人表演时, 它使社区(尤其是企业客户)相信该项目将有明确的路线图和长期的未来。
• 大量组件：Bootstrap提供了开箱即用的几乎所有你可能需要的UI组件。导航, 表格, 卡片, 模式, 按钮, 徽章, 进度条, 警报。 。 。你命名, Bootstrap拥有它。对于许多公司而言, 这实际上减少了拥有专门的前端团队的需要。
• LESS和SASS支持：在广泛流行的CSS框架中, Bootstrap是唯一同时支持LESS和SASS的框架。是的, 我知道, 你不使用LESS(因为没有任何自尊的开发人员应该这样做, 对吧？), 但是, 嘿, 那里有大量依赖LESS的项目。当然, 你可以不选择任何一个并写出纯CSS文件。

引导缺点

没有什么是没有代价的, 是吗？好吧, Bootstrap也不例外。随着时间的流逝, Bootstrap受到设计师和UI专家的猛烈抨击。原因如下：

• UX单调：Bootstrap具有如此大量的内置插件的事实导致网站看起来过于陌生, 而且非常坦率。你只需要转到官方示例即可了解默认值有多大的麻烦。只需搜索”所有引导网站看起来都一样”, 你就会明白我的意思。 ????
• 样式问题：Bootstrap可能是一个自以为是的框架。换句话说, 它具有关于布局的想法, 如果你希望外观/行为有所不同, 它会使你格外努力。考虑屏幕宽度的默认CSS断点：Bootstrap的中型屏幕是从768px设备宽度开始的屏幕。还有, 如果你要定位600px的上限呢？好吧, 祝你好运！引导程序中几乎所有其他组件都是相同的：行和容器具有默认填充, 按钮具有颜色和边框, 如果不进行大量工作就很难覆盖, 等等。

想掌握Bootstrap吗？查看Brad Traversy的在线课程。

Foundation

如果技术是宗教, 那么基金会和Bootstrap的家伙将为彼此的鲜血而战。在不提及Foundation的情况下, 对现代CSS框架的讨论是不完整的, 因此我们开始吧。

前往Foundation网站, 你会不禁注意到以下格言：”世界上最先进的响应式前端框架。”乍一看, 进行营销活动似乎是一个很高的要求。

但是, 基金会框架的拥护者知道至少有一些道理。开发基金会的目的是为了与Rails框架自然地融为一体, 并且可以在工作中看到Rails的一些”禅样”指导原则。

例如, 如果你希望在小屏幕上包含两个元素的行, 在中屏幕上包含三个元素, 在大屏幕上包含四个元素, 那么Foundation中的等效代码将如下所示：

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>

与早期的Bootstrap版本相比, 我发现这非常直观且易于记忆。不再需要十二个列网格并弄清楚应该是什么4/12！

虽然Foundation不如Bootstrap受欢迎, 但对于许多专家前端开发人员来说, 这是一个商业秘密。

Foundation框架的优点

在我们将在本文中考虑的所有CSS框架中, Foundation具有一些不寻常的特征：

• 完整的工具：说Foundation是CSS框架在技术上是错误的。我是说, 是的, 但是它是作为大型模块化工具集合构建的, 旨在解决几乎所有类型的前端问题。有针对网站和电子邮件的单独框架产品, 针对各自的领域进行了优化。 Foundation还带有一个命令行界面(CLI), 这对习惯于使用Webpack或其他模块捆绑器的开发人员来说听起来像是音乐。
• 极高的灵活性：与Bootstrap不同, Foundation的创建是为了使前端开发人员可以完全控制其UI。结果, 基金会将对新来者感到平淡无奇且极为复杂。但是, 原因是Foundation不会强加任何样式语言给你, 而是旨在成为它的本质：一个出色的CSS框架。
• 不只是UI组件：尽管Foundation具有通常的UI元素集合, 但它远远超出了职责范围。开发人员包括一个高级的响应式图像系统, 一个定价表组件(是的, 用于显示各种定价计划的组件), 表单验证, 从右到左的支持, 响应式嵌入等等。我想再次强调一下, 这对于大多数简单的网站来说是一个过大的杀伤力, 但是对于大型网站, 这是经验丰富的开发人员会认识到的福音。
• 培训和咨询：现在, 虽然Bootstrap是由Twitter创建的, 但它是一个附带项目, 只占整体图的很小一部分。但是, Foundation(ZURB)背后的公司致力于使用, 开发和推广它。为大型客户提供培训课程和专业咨询, 这对于以大型项目为目标并愿意付费的公司来说非常有用。

Foundation框架的缺点

从相反的角度来看, 一个框架的优点就变成其缺点。这就是为什么Foundation可能不是你的项目的最佳选择的原因：

• 小型社区：Foundation社区比Bootstrap小得多, 并且, 如果你尝试一些异国情调并陷入困境, 则找到相关帮助的机会会降低。但是, 我将其添加为所有实际目的。那里有足够的社区。只是比Bootstrap小几个数量级, 所以你可能不会立即找到解决方案。
• 复杂性：如果你习惯于使用Bootstrap或简单或更糟糕的香草CSS体验, Foundation感觉就像是无限发展的复杂性。层中的层, 带有组件的组件, 无尽的自定义选项。 。 。很快你就会开始质疑生活本身的用处！但是话又说回来, 基金会的目标是非常不同的, 不能为此而责怪。
• 选择太多了：有时候, 你只是想把事情做好, 以后再担心完美。在这种情况下, 出现太多变化不大的选项令人沮丧。例如, 考虑到当你如此饥饿时, 你必须订购Subway三明治, 否则你可能会吃泥。自然, Foundation不在那样的时代。
• 人才可用性：由于Foundation的受欢迎程度不及Bootstrap, 因此可用的人才更少。通常, 任何新员工几乎都可能了解Bootstrap, 但不会对Foundation有任何了解。学习需要时间, 这并不是所有团队都可以拥有的。

Bulma

Bulma是CSS框架战场的一个相对较新的参与者, 并且在很短的时间内就为其扬名。它的吸引力在于一种严格的, 仅CSS的方法(没有JavaScript组件)和优雅的默认值, 这是许多对设计很了解的开发人员在使用Bootstrap时遇到的问题。

Bulma的大部分动力来自Laravel(PHP Web框架, 如果你不知道)社区的高采用率, 我敢肯定, 这很大程度上是帮助Vue.js上升到了流行的顶峰在JavaScript框架中。

为什么选择Bulma CSS框架

有很多理由喜欢Bulma并将其用于你的下一个项目：

• 非常受欢迎：好的, 它不比Bootstrap受欢迎, 但比Foundation更受欢迎。在撰写本文时, 布尔玛在Github上拥有3万多颗星星, 比基金会多3k颗左右。当然, 许多Github明星不是功绩指标, 但确实表明社区认可布尔玛。
• 可读性极强的类：对我而言, 布尔玛拥有我尝试过的所有框架中可读性最强的CSS类。还有一个可笑的强大而简单的系统, 用于创建Metro风格的网格, 称为图块(只需查看屏幕截图的下半部分中的代码, 告诉我你没有留下深刻的印象！)。

• 平稳的学习曲线：Bulma是高度模块化的, 旨在解决较小的团队和单个开发人员遇到的日常实际问题。你会发现Bulma非常容易学习, 尽管我认为CSS方面的背景知识总是很好的, 这样可以让你对幕后的情况有所了解。当你要覆盖默认行为时, 这将为你提供帮助。
• 高雅：嗯, 请看下面关于布尔玛的默认英雄部分。说够了！

Bulma的社区很小, 但是却充满热情, 因此, 如果你想消除所有的毛病, 又想在创纪录的时间内提出美观的UI, Bulma是你的不二之选。对于Bootstrap开发人员, 布尔玛有一个单独的部分来说服并帮助他们迁移。

UIkit

考虑UIkit时想到的是极简主义。简约不是功能(实际上, 它提供了所有框架的大多数功能), 而是设计。如果你需要超级干净, 优雅, 非空白的设计, 那么UIkit可以满足你的要求。

例如, 看一下进度条组件：

或图像标记器组件(由JS驱动的图像交互式标记器)：

甚至是不起眼的HTML形式：

如果这并没有激怒其肺部的优雅, 那我不知道该怎么办。只需访问UIkit网站, 并查看其提供的所有令人难以置信的组件。除非你的项目经理或客户强迫你使用一种特定的样式语言, 否则我认为Uikit赢得了UI设计的桂冠, 比Google的Material Design领先了几英里。

但是, 你想知道是否有一个陷阱。就在这里。像Bootstrap一样, UIkit可以使用其JavaScript进行工作, 虽然你可以使用jQuery进行DOM操作, 但是不可能使用像React这样的虚拟DOM框架。

而且, Uikit是一个独立的系统, 如果不付出很大的努力, 你将无法修改或扩展它。

Semantic UI

竞赛中的另一个竞争者是Semantic UI, 它试图通过许多主题和自定义来与众不同。有超过3000个主题变量, 这导致了巨大的广度。如此文档说。

Bootstrap 4涵盖了所有这些内容, 并且也可以完全自定义, 但是Semantic UI的一个优点是, 默认情况下它会产生美观的布局。不过, 它并不是开箱即用的, 这就是为什么我后来将其放在列表中的原因。

它还具有最陡峭的学习曲线之一, 并且编码约定更加严格。尝试一下;我想说一遍, 看看它是否看起来像你喜欢的东西。

Susy

目前, Susy是一个鲜为人知的框架, 但它是一个令人着迷且令人耳目一新的想法。 Susy是另一个纯布局框架, 它取消了所有预定义的float, grid, Flexbox, 表或其他任何构想, 并允许你组合所需的布局。 “组合”是此处的关键字, 因为Susy旨在创建具有超复杂, 异常和精确需求的高度模块化, 交错的布局。

在专业开发人员的手中, Susy就像是一台喷火器, 而不是吹走其他所有东西。当然, 较小的凡人将设法烧掉他们的手。

要了解Susy的功能, 请使用以下默认设置(SASS)：

// 4 symmetrical, fluid columns
// gutters are 1/4 the size of a column
// elements span 1 less gutter than columns
// containers span 1 less gutter as well
$susy: (
  'columns': susy-repeat(4), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', );

我认为该代码是不言自明的, 尽管并非针对那些急于赶时间的人。 sy如果你对现代框架强加给你的所有东西感到厌倦, 并且对布局的需求不了解任何普通框架都无法满足, 那么Susy非常有道理。

Materialize

如果你喜欢Google的Material设计, 那么Materialize是一个不错的框架。最好的事情是, 它仅需学习少量的组件和类, 并且专注于使你尽可能快地工作。自定义选项很少, Materialize遵循由Bootstrap建立的流行的12列网格格式。

但是, 如果你问我, 材料设计正变得如此普遍。 。 。默认情况下为扁平状态, 很快我们就会像对待Bootstrap的所有网站外观相同问题一样抱怨它。不过, 这是一个很好的框架。

Pure

雅虎死了吗？

不, 这个问题不是转移注意力, 而是强调一个重要的观察结果：雅虎构建了Pure框架, 并在BSD许可下发布。

快速浏览使我印象深刻, 我想知道为什么更多人不了解此产品。无论如何, 使Pure成为纯粹的CSS框架的是什么。 fact实际上, 开发人员付出了更多努力, 将其分解为不同的CSS模块, 你可以根据需要将其导入。因此, 如果你仅需要网格系统, 则无需导入整个CSS并增加网站的加载时间。

Pure网格有多种样式：5点, 2点, 24点等, 因此在创建列时, 你将拥有更多的灵活性。在默认情况下, Pure不是最好看的CSS框架, 但是我可以看到它如何为那些希望在其UI中解决一个微小CSS问题并渴望其他框架附带的”有用”默认值的人增加价值。

Skeleton

从屏幕快照中可以看到, Skeleton非常小, 以至于它甚至没有自称CSS框架, 库甚至模块。它是样板, 仅包含400行源代码！难以置信？我认为是这样, 但从透视的角度来看, Skeleton是为小型或小型项目而设计的, 这些项目只需要布局和定位即可。

值得一看；毕竟, 谁知道, 骨骼可能一直是你一直在寻找的东西！

Milligram

列表中的最后一个是Milligram, 这是一个旨在提高速度和生产力的CSS框架。开发人员将其大小保持在2 KB以下, 按照今天的标准, 这意义重大。

Milligram是CSS框架上有趣的一点, 你会喜欢使用它。扩展它很容易, 并且通过几行自定义CSS, 你可以将其外观更改为所需的方式。

那么, 哪个CSS框架是最好的？

承认, 你之前曾问过类似的问题, 但收到了以下令人失望的答案：没有。 ????选择框架(或工具, 甚至你生活中的一个人)取决于很多因素。如果你需要我的建议, 这里是：消除噪音。仅仅因为人们对新事物和新事物发疯, 并不意味着你必须学习它, 否则就会被抛在后面。尝试新事物固然很棒, 但兜兜转转寻找理想的工具实在是浪费。

那么, 你尝试了以下哪个框架？还是我刚才错过的东西令人惊讶？请在评论中让我知道。爱, 恨, 随意打招呼, 欢迎一切！