CSS前端框架初学者指南

在这篇文章中，我们将介绍CSS框架的基础知识，根据您的前端开发需求，哪个框架最好。

本文研究：为什么要使用CSS框架以及哪个框架适合您

什么是CSS框架？

CSS框架提供了一个基本结构，用于设计一致的解决方案，以解决前端Web开发中的常见问题。它们提供了可以针对特定方案和应用程序重写的通用功能。这大大减少了开始创建应用程序和网站所需的时间。

这样，开发人员无需在每次构建应用程序时从头开始。他们可以重用早期应用程序的基础，直接处理网站或应用程序的关键，而不是为每个应用程序反复编写每个小细节。

总结一下：框架是处理常见类型问题的一套标准化概念，实践和标准，可用作参考，帮助我们处理和解决类似性质的新问题。

库和框架

库和框架之间的关键区别在于控制所在。在库中，控制权由呼叫者决定，即你。这意味着您可以控制库何时执行特定功能，除了该任务之外，其余代码独立于库。

在框架的情况下，该控件被反转。控制流程在框架中，您可以在适合您的用例的位置进行自定义。

关于框架是否更好的争论很多。但我对这个话题采取了更为中立的态度。答案就像许多其他辩论一样，取决于它。如果您与拥有各种不同技能的团队成员的团队合作，并且在截止日期前按下，那么框架就会提供结构和组织。图书不会在这里解决你的问题。

另一方面，框架可能会有很多不必要的代码，这会增加应用程序的开销。对于您可能根本不使用的函数，这是数百行代码。框架的范围也可能限制您的应用程序，因为应用程序存在于框架内。但无论是图书馆还是框架，这些利弊都不是普遍的。例如，在较小的项目中，为了完成特定任务，多个库可能就足够了。在处理框架可能有助于处理项目的大范围的企业项目时，这可能不起作用。

使用CSS框架有什么好处？

我们先来看看最明显的一些。节省时间和一致的结构。

由于开发人员不必每次都从头开始，因此他们能够节省时间并专注于特定于应用程序的问题，而不是环境的较小细节。能够重用代码的方面是一个重要的优点。

框架提供的预定义结构有助于保持应用程序及其各种组件之间的一致性。前端框架中提供的包通常由HTML，CSS和JavaScript文件组成，用于确保应用程序中的各个页面具有统一的设计，排版，表单等。例如，非常流行的Bootstrap框架，在Twitter上作为样式启动内部工具开发指南。

简而言之：

更轻松的代码维护。
项目的一致组织结构。
响应式媒体查询。
工具提示，按钮，表格等的统一样式
适合界面的一致字体和图标集。
另一个原因是框架可以在开发项目时为开发人员提供一定程度的独立性。开发人员不一定需要设计人员提供的每个设计元素的红线规范。它们具有由框架固有实现的一致设计方案，并且可以根据其要求在特定情况下定制元素。这并不是说设计师在使用框架时会变得多余。这只意味着开发人员不需要参考每个元素的红线或设计指南来获得像素完美均匀性。

设计师还可以使用框架来减少他们花在设计基本元素（如按钮和表单）上的时间。相反，他们可以专注于设计中的其他优先事项。因此，框架可以减少设计人员与开发人员协作的开销。

为了更好地理解通用框架对简单设计系统或样式指南的吸引力，请考虑这一点。

操纵杆是专为电子艺术家（EA）内部使用而设计的框架。它的概念最初是作为一个设计系统，但体验设计团队意识到开发人员更喜欢拥有实际的可实现元素而不是样式指南。样式指南和PDF指南并不能真正帮助开发人员，因为他们仍然可以将这些指南转化为有用的标记。

开发人员和工程师必须出售的想法是，操纵杆从第一天起就会从中受益。他们有能力在有或没有设计师的情况下每天制作和运送东西，这是利用Bootstrap或Foundation等流行框架的一个因素。

通过为开发人员，设计人员和编写人员提供框架，体验设计团队能够提供可扩展和实施的可靠交付物。这有助于在整个团队中实现一致性并减少他们的努力。他们能够通过一件事来解决规模和可重复使用问题。

有哪些不同的框架可供选择？

Boostrap

Boostrap我最受欢迎的前端框架之一，当然是Bootstrap。虽然作为内部团队的工具而开发，但一旦发布，其采用率就会大大增加。它为常见的UI组件提供设计模板，如按钮，排版，表单，下拉列表，警报，选项卡，轮播以及可选的JavaScript扩展。

您可以轻松地使用Bootstrap创建响应式布局，Bootstrap 3通过其移动优先功能强调了这一点。使用Bootstrap在12列网格系统中组织元素的能力可跨设备提供干净，一致的设计。Bootstrap 使用Less样式表，但也已移植到Sass（作为单独的存储库维护），因此两者的用户都可以是内容。

由于其强大的支持，许多团队也更喜欢Bootstrap。Bootstrap目前在其GitHub存储库中有来自约900个贡献者的16,000多次提交。

今天在3.4％的网络上使用，在百万页的20％中使用。
优先考虑速度优先的项目。
预处理器：Less，Sass。
响应和移动优先。
Foundation

Foundation是一个响应式前端框架，用于为跨多个设备的站点创建快速原型和生产代码。就像Twitter是Bootstrap背后的支持者一样，Zurb是基金会背后的组织。您可以在华盛顿邮报的网站以及国家地理教育网站上看到基金会。Foundation基于940px网格系统，而Bootstrap基于1,170px网格布局。

使用Foundation的一个优点是能够快速启动原型，因为框架的裸骨结构和提供的启动器模板。就华盛顿邮报而言，设计团队能够在15分钟内创建故事原型来测试设计。基金会对GitHub上超过940名贡献者的超过14,000次提交提供了很好的支持。

有助于快速原型设计。
适用于Sass样式表。
提供更大的灵活性
预处理器：Sass。
该框架还提供业务支持，培训和咨询。
Skeleton

Skeleton是一个“简单，响应迅速的样板。”Skeleton非常适合小型项目，或者如果轻量级是优先级（它只有大约400行未压缩的代码）。样式设计更多的是一个起点，而不是UI框架。Skeleton因其轻巧的特性而非常适合以移动设备为主题的设计。

Skeleton也是初学者到前端框架的一个很好的起点。它有简洁的代码和简单的布局。由于缺乏CSS丰富性和模板，这也意味着在涉及更大的项目时会略有不匹配。原型设计也不是Skeleton中最快的。

轻量级框架，只有大约400行代码。
不适合大型项目; 缺乏广泛的模板。
非常适合以移动为中心的设计。
没有预处理器。
初学者的良好起点。
UI Kit

UI Kit元素易于定制和轻量级。它提供了用于快速构建Web界面的模板。除了包含所有HTML，CSS和JavaScript文件的安装包外，它还包含Sublime Text和Atom编辑器的自动完成包，以便用户不必一次又一次地查找UI Kit类名和标记。

Foundation，Boostrap和UI Kit之间的关键区别是网格系统。UI Kit不使用12列网格设置，而是将布局分解为三个组件，即网格，弹性和宽度。使用网格组件，可以根据需要创建任意数量的列。

响应轻便。
预处理器：Less，Sass。
不限于12列网格。
能够扩展和自定义图标。
除此之外，您可以为您的项目尝试的其他框架是

TukTuk - 响应迅速，轻巧; 面向对象的CSS; 用CoffeeScript编写。
语义UI - 使用自然语言原则使代码更具可读性; 较少的预处理器; 响应简化的调试。
YAML - 非常纤薄的框架核心（5.9 kB）; Sass预处理器; 防弹模块; 适用于IE 6+。
960网格系统 - 流体和响应; 提供12列或16列网格选项; 适用于快速原型制作以及生产环境。
要查看更广泛的CSS前端框架列表，请参阅此完整列表。

最后的想法

虽然前端框架现在广泛使用，无论是在个人项目还是专业项目中，一些反对使用框架的论据都会持续存在。这些围绕编写您自己的设计网格，而不是使用响应框架之一，增加加载时间，所有网站看起来相同的趋势，以及框架带来的不必要的膨胀。

如前所述，它因案例和项目而异。如果它适合您的项目，则无需三思而后行。框架具有足够的好处以保证其使用。在为项目选择正确的框架时，请考虑其中的一些要点。它是否有足够的支持和更新来跟上？它是否适合您的项目规模和未来可能的扩展？是否有良好的文档备份？

大家有任何要咨询的，都可以私信小编“学习”哦！小编都会一一解答的，小白零基础的还可以获得系统的学习资料，也可以通过秋秋裙 前面七五1 中间①九六 后面九1三 跟小编一起交流学习！