CSS框架

能提高生产力，避免重复造轮子的工作，这可能就是CSS框架的意义。

简单地说，就是一些事先写好的css，你只需要给你的html元素加上一些特定的类，就可以快速的得到一些想要的效果。就是它开发了一套现成的CSS样式，包括排版布局、按钮、表单、等，你只需要按照它的规则用好类名，这样可以方便团队快速开发Web站点，减轻前端设计师的工作。有名的框架有Twitter的Bootstrap、Foundation、960gs、以及Semantic UI等。

Bootstrap 和 960gs 两个框架。Bootstrap属于前端框架，而960gs可被称为 CSS 框架，两者包含的范畴相差甚远。960gs 只是定义了网站设计常用的栅格系统(Grid System)，使用者只要在 HTML 中添加框架中定义好的布局 class，就可以方便地进行栅格布局。而 Bootstrap 本身除了定义栅格系统，还定义了完整的视觉规范和交互行为。960gs的覆盖面不可与其同日而语。因此，不会用到Bootstrap的 100% 很正常。

若反感Bootstrap 被过度定义的样式，并对 Sass 感兴趣的话，亦可尝试 inuit.css 框架。

使用CSS框架的优点

1、加速你的开发

CSS框架帮你做好了基础工作因此你可以更快地开始开发。它能过向你提供重复的和常用的任务代码——如reset——因此你不需要每次都从头开始写。如果你与团队或与其它开发者一起工作，你们都会有一样的共享CSS代码，所以团队效率也因此提高。

2、可以使用跨浏览器功能

记得为了让你的网站或web应用在所有浏览器下看起来一样而不断调整你的CSS代码的痛苦么?好吧，通过使用CSS框架你可以与这个烦恼告别了，它们帮你搞定这个问题。框架已经编写成跨浏览器兼容的了，所以你可以专注于自定义和创建内容而不是调整基础的样式。更好的是CSS框架还会消除浏览器特定的bug。

3、给你干净和对称的布局

基于网格的CSS框架建立了一个预定义宽度的多列布局所以你可以专注于创建内容而不是排列文本块。你不需要做更多的像素调整来确保排列整齐，或者担心边栏宽度对于widget或图片是不是标准规格的，也不需要为计算列的宽度而烦恼。

4、强制使用好的网页设计习惯

CSS框架强制使用好的习惯，如引入打印样式表。它还提供了一系列的选择器，你可以在所有使用框架开始的网站或web应用中使用，这使得你的网页设计具有一致性。你不需要猜测或记住你在这个网站是怎么写的而那个网站又是怎么写的——它们都是一致的。

使用CSS框架的缺点

1、限制你的自由

既然CSS框架有标准的网格，选择器和其它代码，它就限制了你可以设计的东西：布局大小，网格宽度，按键类型，样式，以及其它任何东西。如果你真的希望利用CSS框架来节约时间的话你基本上就要接受同样的框架。否则，当你想要做一些不同的东西时，你还要花时间来更改代码或学习一个新的框架——这就好比你有一个项目使用了独特的或非常规的参数或者设计。

2、添加额外代码

CSS框架不可避免地有一些你不需要的代码。你不太可能使用一个框架中的每一个功能。因此你需要被迫接受一些额外的代码，这有可能有问题也有可能没问题，取决于你的网站和web应用所能承受的负担。如果每个字节都非常重要，你可能需要深入进去并去除CSS中不需要的代码。

3、强迫你使用框架语法

通过使用CSS框架，你被迫接受语法的变化，特别是框架使用非标准命名模式的情况。如果你对于CSS元素，选择器，元ID和类倾向于使用自己独特的系统，这可能会带来麻烦，因为CSS框架会强迫你使用它的系统。需要承认的是这对于大多数情况来说并不是什么大问题——它就像学习开一辆新车，即你快速适应——但是它是使用CSS框架的一个现实问题。这可能带来更大问题的另一个方面在于，如果你和其他开发和设计人员合作，它们可能以后会涉及你的代码，他们可能会不知道一些名字是什么意思，所以他们可能需要先熟悉框架的语法。

4、你可能潜在的损失了时间

如果你已经熟悉了某个特定的设计和开发方式而又被迫去使用你不熟悉的CSS框架，你可能会损失时间。这有可能是一个客户希望使用你不熟悉的框架，或者是合作者坚持使用某个框架，或者是其它什么情况。关键在于CSS框架是实实在在的，它就存在于那里，人们了解它们，并且有些人可能会希望使用你没关心过的框架或者你可以使用自己的方式更快地完成任务。它可能是一个小小的缺点，但是相比前面的缺点，它是只是有的时候是一个缺点。

CSS框架优点和缺点

最后，CSS框架好不好呢?当然，理由就好像自动变速的车好不好一样。意思是，大部分人都会使用自动变速的，因为它使得驾驶更简单和快捷。当你有一辆新车时，你很快就能熟悉它。但是还是有一小部分人希望或者需要使用手动变速——出于燃料效率，享受，比赛或者其它什么原因。

大部分开发者都会得到CSS框架给Web开发和设计简化带来的好处。但是还有一小部分人坚持以他们自己的方式来完成任务，以获得更精准的控制和结果——就像手动驾驶适合漂移。

那么你应不应该使用CSS框架呢?对于绝大多数设计者，应该，你应该考虑使用CSS框架(不确定的话也一样)。然而，它最终取决于你是“自动变速”还是“手动变速”的网页设计者。

3. Bulam

Bulam开放源码、免费并且节约开发人员的时间。由于学习起来和使用非常简单，因此最近变得非常流行。

首先，Bulma包含很棒的UI组件，如选标签、导航栏、框和面板等等，因为此框架旨在为用户提供清晰而有吸引力的UI。其次，Bulma非常的模块化，用户可以只导入所需的功能。 最后，这个框架的类可读性很高，这点对于一些开发者来说可能是非常具有吸引力的。

Bulma易于理解和使用简单，同时它具有所有必要的功能，帮助您高效的创建出优质产品。

4. Ulkit

可能没有多少人知道(使用)这个框架，但它与其他类似框架具有相同的功能。

Ulkit是轻量级和模块化的，用于创建快速但功能强大的Web界面。 Ulkit基本上是一组易于定制的组件集合，具有HTML Editor、Flex、其他附加组件和独特的组件。它的核心原则是RWD和mobile first，Ulkit广泛应用于WordPress主题中。使您能够灵活的进行手动定制机制。

5. Semantic UI

从名称就能猜出，Semantic UI旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。

核心原则是标签矛盾、语义和响应能力。这个框架是将语句和类作为可交换的组件来处理，并使用直观的JS和简单的调试。

Semantic UI的好处在于，它提供了组织良好的文档和网站，并提供了使用指南。简而言之，它有3000多个主题变量，50多个UI组件，以及5000多个提交。绝对值得一试。是创建页面漂亮、反应灵敏的网站的不错之选择。