1、
BootStrap
（响应式）
时髦、直观并且强大的前端框架，让Web开发变得更加容易。
2.
Foundation
（MIT；响应式）
最先进的响应式前端框架。
3.
960gs（GPL&MIT；响应式）
960gs提供了一个简单的网格系统，适合快速开发。
4.
Skeleton（MIT；响应式）
非常漂亮的Web模板，适合响应式、移动友好的开发。
5.
99lime
HTML
KickStart（Free）
适合网站快速开发的极简HTML构建模块。
6.
Kube（Free；响应式）
面向专业人员的CSS框架。
7.
Less
Framework（MIT；响应式）
自适应的CSS网格系统。
8.
Flameinwork（Free）
适合懒人开发者的前端微框架。
9.
G5
Framework（Free）
(x)HTML5、CSS、PHP前端开发框架。
10.
Easy
Framework（Free）
Easy
Framework是一个一体化前端解决方案，分structural、
presentational、interactive三层。
11.
Blueprint（Free）
一个旨在减少开发时间的前端框架。
12.
YAML（Creative
Commons）
(x)HTML+CSS框架，适合开发现代化浮动布局。
13.
BlueTrip（Free）
一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。
14.
YUI3:Grids
CSS（BSD）
YUI
Grids
CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。
YUI
Grids
CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。
15.
52framework（Creative
Commons）
对HTML5支持非常好，简单易用。
16.
elastiCSS（MIT）
一个基于Web接口和印刷布局的简单CSS框架。
17.
Emastic（Free）
一个与众不同的CSS框架。
18.
Fluid
960
Gride
System（GPL/MIT）
Fluid
960
Grid
System的模版是根据Nathan
Smith之前的作品而创建的。即960
Grid
System：传承了MooTools和jQuery
JavaScript
libraries的效果。
19.
xCSS（MIT）
一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。
20.
EM
CSS
Framework（MIT/GPL）
EM
CSS
Framework提供了一个960px宽
+
12
列网格系统
+
CSS的通用样式。
随着Internet编程技术的不断发展，越来越多的大学毕业生加入了Web开发行业中，我们都知道Web开发需要使用css进行定位和布局。
下面，沈阳北大青鸟带大家来看看如何编写css代码。
前端系统的变化可以描述为每天都在变化。
在短短的一年时间里，理论，框架，构建工具甚至开发语言都发生了巨大的变化。
随着新项目即将开始，我花时间审查了上一个项目的前端架构。
我已经产生了很多想法，我将尽可能地记录它们以准备新的框架。
一、OOCSS(面向对象的CSS)OOCSS的使用主要有两个原则，一种是分离结构和外观，其中主要包括分离容器和内容。
OOCSS主要基于对象的编程方法，OOCSS的目的主要是支持代码的复用，最终保证样式能很好的进行添加和维护。
OOCSS也存在一些缺点，它主要适合大型网站的开发项目，因为大型网站的可重用性组件非常多，在运行小项目的时候没有非常好的才、效果，所有在选择的时候应该根据项目的情况进行选择。
二、BEM(块元素修饰符)BEM是一个名为命名约定的CSS。
它不涉及如何编写CSS的结构。
在进行电脑培训的过程中，电脑培训建议仅为每个元素添加具有以下内容的CSS类名称。
在BEM模式下，它看起来很麻烦且冗余，但每个CSS类名称都能够很好地描述出它的作用。
与LESS或SASS结合使用时，会降低其写入复杂度。
三、规则文档很多人更加倾向于关注大方面并忘记了细节，一份定义明确的规则文档能够提醒我们根据需要进行编写代码。
一份好的规则文件应遵循以下规范：其中需要包含不可变规则，而不是一般描述需要始终将规则细化为最简单的表达式，首先解释规则是什么，然后说“如果没有，那会发生什么？并且沈阳沈阳北大青鸟认为每条规则必须包含以下单词之一-始终，从不，仅，每个，不需要。
四、综合方案就如开头的介绍，BEM的简单使用并没有解决我们在项目中遇到的问题，反而还会产生其他的新的问题，但这不是BEM的责任。
IT培训认为作为前端架构的重要组成部分，CSS主要是需要为项目选择出合适的解决方案，而不是因为它在业界很受欢迎而使用它。
一、Css书写顺序：
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、Css语法：
命名一般为小写英文字母。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
每条声明语句的 : 后应该插入一个空格。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
避免为 0 值指定单位，例如，用 margin: 0 代替 margin: 0px。
Css常用的一些命名：
可参考：CSS 常用命名 - 彼岸时光 - 博客园。
三、Css的引入：
Css的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。
四、Css的命名规范(BEM,OOCSS)：
什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。
命名约定如下：
.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。
.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。
优点：
BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。
缺点：
这样类名过于长，且复杂。
什么是OOCSS（面向对象CSS）：
OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。
OOCSS的优点：
减少CSS代码。
具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。
语义标记，有助于SEO。
更好的页面优化，更快的加载时间（因为有很多组件重用）。
可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。
能轻松构造新的页面布局，或制作新的页面风格。
OOCSS的缺点：
OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
欢迎到优就业来了解
