【.com快译】我们今天浏览的大部分网站，除了基本的信息展示，还有生动的动画、多样的布局、吸引人的交互元素，这多半是CSS创新实现的结果技术。截至去年年底，Flexbox已经应用于83%的GoogleChrome加载页面（参见：https://www.chromestatus.com/metrics/feature/timeline/popularity/1692），人们可以看到，包括CSS书写模式、移动动画、单页站点、可变字体和滚动捕捉方面的新趋势。什么是CSS框架，使用它有什么好处？通常，业界将CSS定义为一种提供有效外观的设计语言。它可用于格式化和描述书面文档标记的外观。由于CSS可以与XUL和SVG等任何类型的XML一起使用，因此CSS框架就像一个带有文件的现成包，可以用作构建网站的基础。让我们来看看使用CSS框架可以为网站带来的具体好处：显着节省时间：通过使用CSS框架，开发人员在构建应用程序或网站时无需从头开始。他们可以腾出时间专注于其他重要任务，例如：图形设计、移动媒体优化以及目标应用程序生产和测试。启用代码重用：如果您正在处理一个拥有无数页面的大型项目，并且每个页面都会不断活跃和更新，那么代码重用将非常有用。可以说，一个复用性强的框架可以缩短你项目的准备周期。排除跨浏览器问题：在网站和应用的建设过程中，我们最怕在某些浏览器上运行或显示不正常。然而，由于CSS框架可以在任何浏览器上无缝运行，您不必担心此类问题的发生。确保标准结构的一致性：前端框架通常由CSS、HTML和JavaScript文件组成。这些文件有助于确保所有元素（例如设计、表单等）在整个页面上保持一致。优秀的CSS框架1.Bootstrap最初被称为BootstrapforTwitterBlueprint，是作为内部团队使用的工具而创建的。它是最著名的前端框架之一。自公开发布以来，Bootstrap的使用率逐年攀升。Bootstrap为警报、按钮、旋转木马、下拉菜单和表单提供设计模板。借助Bootstrap的移动优先功能，您可以轻松创建响应式布局，确保跨多种设备的设计一致。2.SkeletonSkeleton被称为“简单的响应式模板”。由于该框架只有400行左右的代码，更适合开发者需要创建轻量级内容的小型项目和应用场景。由于其简单的布局，Skeleton是那些刚开始使用前端框架的人的不错选择。当然，也正是因为缺乏CSS设计模板、预处理器和整体功能，有限的Skeleton并不适合大型项目。3.ZURBFoundation如果你正在寻找一个响应式的前端框架，那么ZURBFoundation比较合适。该框架将允许您为所有设备创建各种生产代码和原型。通过使用“准系统结构”支持流行的框架，ZURBFoundation使用户能够使用简单的方法及其入门模板快速生成产品原型。凭借不少于14,000次提交和940多个贡献者，ZURB在GitHub上也得到了很多支持。目前，《华盛顿邮报》、《国家地理》等知名网站均采用该框架。4.UIKitUIKit以具有高度可定制的轻量级元素而闻名。它的各种模板使您可以轻松构建各种Web界面。UIKit安装包包括CSS、HTML和JavaScript文件，以及SublimeText和Atom编辑器的安装包。此外，它还提供了30多个模块化组件，用户可以随意组合搭配，实现多种功能。也就是说，您不必一遍又一遍地搜索那些标签和类名。与Bootstrap和Foundation等其他框架不同，UIKit没有使用12列网格设置，而是将其布局分为三个部分：弹性、网格和宽度。当然，由于资源的匮乏，这个框架更适合那些经验丰富的开发者。5.Bulma作为最常用的框架之一，Bulma得到了超过150,000名开发者的支持。它是基于Flexbox的免费开源框架之一。由于Bulma框架完全能够满足开发响应式网站的最低要求，因此对于初学者来说非常容易上手。此外，得益于GitHub上庞大的用户社区，Bulma拥有良好的技术支持。6.Materialise这个前端CSS框架是根据谷歌的设计指南创建的。Materialise带有一个易于使用的IZ列网格，可以很好地用于布局设计。它的包包括按钮、卡片、表单、图标和许多其他可按需提供的组件。此外，您可能会使用的功能包括：拖出式移动菜单、波纹效果动画和SASSmixins等。而且，Materialize可以在任何类型的设备上使用。7.SemanticUI是一个比较新的框架，所以SemanticUI在代码中使用自然语言，很受初学者欢迎。它的继承系统（inheritancesystem）带有先进的主题变量，给你完全的设计自由。由于自带了大量的第三方软件库，在使用SemanticUI时，无需调用其他库，可以让web开发的过程更加方便。这就是为什么许多初学者和经验丰富的开发人员都喜欢它的原因。8.TailwindCSSTailwindCSS与其他框架的不同之处在于它的包没有预构建的UI组件。这个框架更注重实用性。它包含各种专注于颜色、大小和位置的CSS类。Tailwind适合那些不满足于预设组件，但希望能够完全自由地定制他们的网页设计的开发者。9.PicnicCSS该框架非常轻量级，压缩后的代码不到10KB。同时，PicnicCSS还带有基于Flexbox的网格布局和许多UI元素。您可以使用它们来启动您自己的Web开发项目。此外，Picnic的模式窗口和导航栏对初学者也非常友好。10.Ionic，一个开源的移动用户界面框架，允许用户在不改变代码库的情况下开发原生于Android和iOS且具有高网络性能的应用程序。Ionic带有直观的UI组件，可帮助用户加快网站或应用程序的开发过程。通过提供卓越的本机功能和速度，Ionic可以与社区、主流分析平台、身份验证服务、插件和其他集成平台很好地配合使用。11.Pure.css这个框架侧重于移动优先的概念。由于Pure.css是模块化的，您可以轻松地按需导入元素包。同时，你还可以获得它的各种版面进行下载安装。以便携着称的Pure.css框架压缩后只有3.8KB。12.mini.cssmini.css还提供全面的功能和轻量级的框架。虽然gzip后只有10KB，但它仍然可以提供丰富的布局和UI元素。如果您想了解有关其工作原理的更多信息，请查看其在线文档。13.基础如果你的主要任务是为你所有的应用程序和网络开发项目打下坚实的基础，那么你应该试试这个模块化框架。作为所谓的“坚如磐石”的响应框架，Base提供了基于Normalize.css的基本可定制样式。您可以根据需要将其用于简单的应用程序。14.ConciseCSSConciseCSS也是一个简单实用的框架。该框架紧凑、干净，不需要额外添加。当然，如果您需要UI元素，您也可以通过单独的工具包轻松附加它们。15.Mobi.css压缩后只有2.6KB，Mobi.css是你现在能找到的最小的框架之一。Mobi的优势在于速度，尤其是针对移动设备的应用场景。由于Mobi.css有内置的主题和插件系统，并且可以按需扩展，用户可以采用模块化的方式并在其之上构建。总结各种CSS框架为用户提供了项目正常运行所需的基础。开发人员可以更好地专注于应用程序内容和策略，并设计响应式网站。俗话说：工欲善其事，必先利其器。我希望你能从上面的列表中选择一个适合你实际需要的框架。原标题：HowtoSpeedUpYourDesignProcessUsingModernCSSFrameworks，作者：SouvikBanerjee
