可以从CSS框架中借鉴到什么

标签: 前端技术 CSS | 发表时间:2013-10-17 05:55 | 作者:杯面小王子
分享到:
出处:http://isux.tencent.com

现在很多人会使用 CSS 框架进行快速建站,
那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。
当然对于一些大型的项目,可能会很难照搬某些框架直接使用的,因为直接使用会带来一些限制或者冗余的问题。
但在 CSS 框架已经日趋成熟的今天,在我们设计项目架构、规范的时候,现时市面上一些优秀的框架也可以给我们提供很多可借鉴的地方。

本文主要从几个方面讨论 CSS 框架可以对我们项目的借鉴点:
1. 目录组织
2. CSS 规范
3. 图形
4. 应用方式
5. 小建议

1. 目录组织

在目录组织的分析上我们参考了 Bootstrap , Blueprint , Yui , Yaml 四个框架的组织方式

可以从CSS框架中借鉴到什么

当使用一个框架时,我们一般会把所需框架本身的样式链到页面中,然后在它的基础上进行修改。所以框架本身所带的样式可以理解为基础样式。即我们平时所说的全局样式+组件样式。

可以从CSS框架中借鉴到什么

可以看到,在目录架构上4个框架基本都是遵循基本样式+用户定义扩展样式的常规方式进行组织,

然而,如果按 Bootstrap 做法的话,可能会出现把不常用组件样式也包含在全局样式中一并引入,如果把组件也写在全局 CSS 中,最好确保该组件出现频率较高才引入,避免不必要的带宽浪费。

关于 hack:
对于针对低版本浏览器所写的 hack,对它的处理方式,Blueprint 和 Yaml 都是使用单独引入 hack 文件的形式进行处理,笔者也尝试过这样的做法。
个人觉得这种方式的好处是可以避免给高级浏览器带来冗余代码,而且通过条件判断引入 CSS 也不会给高级浏览器带来额外的请求。

这种方式比较适用于,高低级浏览器本来就刻意设计成有较大差别的情况下,即 hack 比较多的时候才使用。不然就为了十来行 hack 而多引入一个文件的话似乎也不太可取。

2. CSS 规范

a. 前缀

框架中公用模块都有前缀,分别有以下3个思想:
1. Yaml , Yui :无论如何都是统一的标识开头,再加上改模块名称
2. Bootstrap:直接模块名称,这方式需要定义关键字。公用模块是 button 都以 btn – 开头, image 则以 img- 开头。
3. Nec :单字母开头来标识组件。

可以从CSS框架中借鉴到什么

一般来说应用一个框架,我们先引入框架的样式,再在之上覆盖上自己的样式,所以可以把框架看作是我们的基础CSS,

我们可以借鉴框架的前缀规范来规划我们的基础 CSS 前缀,根据自己的项目实际情况采取不同的方案。

b. 类的划分

类的划分方式在框架中主要有2种标准,分别为:以【组件为粒度】,和以【属性为粒度】

1. 组件为粒度:把组件的所有样式封装在一个类名中,调用类名即可使用该组件
2. 属性为粒度:需要属性的时候,调用对应类名拼装

可以从CSS框架中借鉴到什么

在我们日常项目中,以属性对类名进行划分比较少见,因为一直遵循的都是“结构、样式、行为”分离的原则,力求降低三者的耦合度,

然而以这种方式划分在一些特定情况下也不是完全不可取,

例如对于一些元素的隐藏,如果没提供相关的类名的话,在js开发阶段开发就会直接内联 style 在对应的元素上(这将会触发 repaint/reflow),所以更好的方式是和js开发约定一个类名触发显示/隐藏的动作,在这种情况下,给 display: none 划分一个特定的类名,供给开发调用就会显得很实用了。

所以,更重要的是我们对所在的实际情况进行分析,并给出最佳的解决方案。

c. 组件类名组合方式

组件的样式,基本都是 基础类名+扩展类名 的套路来进行组合的变化。

但在选择符方面可以有3种方式, 目前最多框架使用的是:多类选择,通过修改 html 的类名组合,实现还原

以按钮样式的实现为例:
可以从CSS框架中借鉴到什么

这里采用常规的组合方式,不再赘述

d. 高级 CSS 选择器

在对 Bootstrap 进行分析的过程中,发现 Bootstrap 定义了一系列的icon,这些 icon 的类名全部都是以 icon- 为前缀,

而在 CSS 中,Bootstrap 用到了子串匹配属性选择器,

[class^="icon-"]

使用这个的好处是,对于 icon 类的标签,我们再也不需要对其加一个对于 icon 的公用类名,只需要类名是以 icon- 开头就可以匹配所有 icon ,省了一个类名。

使用这种方式可以降低一定的成本,但是只在 IE7+ 浏览器才适用,如果要使用该类选择器的话请考虑是否需要兼容 IE6。
虽然 IE6 不支持,但是高级 CSS 选择器的确十分吸引,并且可用于移动端,所以特此提一下。

3. 图形

在参考的 CSS 框架中,它们会提供一些简单的图形元素, 但是实现的方式也有彼此不同之处。

但是共同点是,现今较新的框架,对于一些简单的效果,都会使用 CSS3 实现一些简单的渐变,对低版本 IE 进行优雅降级。

可以从CSS框架中借鉴到什么

4. 应用方式

在参考实例是怎样使用这些框架的方式上,基本和我们平时项目使用方式一致,

在应用方式上,一般有两种方式:

1. 对于以组件为粒度的样式:
按照 组件的 html 结构 来拼合自己的页面模块,再辅助添加 自定义的类名 来控制其个性化定义。

2. 对于以属性为粒度的样式:
按所需要的样式对应类名进行拼接

下面可以看几个简单的例子,

1. 以组件为粒度:
对于组件的覆盖,采取常规的自定义类名覆盖样式,此处不再赘述

2. 以属性为粒度:
可以从CSS框架中借鉴到什么

可以看到,若需要样式是属性以粒度,即把对应类名调入即可,但是在实际项目中,这种方式由于灵活度不够,并且没有做到结构与样式分离,实际项目中比较少见这种用法。

而对于功能性的动作,例如显示/隐藏元素,可以灵活使用这种方式,把所需样式写到一个特定类名中供给js调用,避免直接写入 style 导致 reflow/repaint

5. 小建议

对于目录组织:

目录组织——

可以考虑结合 Bootstrap 与 Yaml/Blueprint 的思想,

a .把常用的基础样式压缩合成一个文件
b. 把不必现组件样式抽离成单独 CSS,按需加载

【优化点】
减少了单个 global_min 文件的大小

权衡点:
需要考虑由此可能导致的请求数过多问题

hack——

根据实际情况,可考虑把针对 IE6 的 hack 文件单独分出来,

【优化点】
便于对低级浏览器的大型差异化处理,并且减少对于高级浏览器的冗余代码

对于 CSS 规范:

CSS 前缀——

可考虑尝试 Nec 的方式,约定 “单字母_xxx”为公用样式的标识,取消单一的公用前缀,通过以不同字母作为顶级前缀,对公用模块进行划分

【优化点】
减免了“公用前缀_组件前缀_组件名”的多级前缀,通过以类名格式作为标识,代替了原来公用前缀的作用。

权衡点:
仍需按项目实际情况考虑。

类的划分——

可考虑约定统一几个功能性的类名(以属性为粒度的类名),例如元素隐藏的类名,供给js调用。

【优化点】
减免让开发直接写 style 内联 CSS,造成页面的 reflow/repaint

高级 CSS 选择器——

在对移动端页面进行重构时可以考虑使用更高级的 CSS 选择器
例: [class^=”icon”],:first-child,:nth-child(n)….

【优化点】
1. 相比于传统的方法,节省类名

对于图形:

考虑与设计师约定,视觉效果在可接受范围内,部分效果使用 CSS3 实现,对低级浏览器实现优雅降级

【优化点】
1. 大量减少图片的使用,节省带宽以及请求数

最后

随着新技术的不断涌现,越来越多优秀的 CSS 框架出现在我们的眼前,这里分析覆盖面有限,未能一一进行对比并深入探索,如有不足之处,敬请大家多多指正交流。

相关 [css 框架] 推荐:

介绍27款经典的CSS框架

- jessie - 蓝色理想
利用 CSS 框架,可以简化你的工作,提高工作效率. CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块. 下面给你推荐了27款优秀的CSS框架,你可以选用. 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容.

10 个加速 CSS 开发的框架

- Tairan Wang - ITeye资讯频道
CSS 可以做很多事情,但开发者更习惯的是变量、常量和一般的更快速的语法,而 CSS 本身是不支持的. 本文介绍了 10 个 CSS 预处理器,让 CSS 支持一些简单的编程语法,使Web开发更高效. Compass 是一个开源的 CSS 制作框架. 针对个人框架开发时,其非常简单、易用. 这是一个很棒的 CSS 预处理器,可以让开发者制作插件,要求 PHP 以及 Apache (mod_deflate 和 mod_rewrite).

最佳PHP,HTML5和CSS框架大荟萃之二 HTML5框架

- - Web前端 - ITeye博客
这篇文章继续我们的框架大荟萃,如果你没有阅读前面的文章,请点击这里查看 PHP框架. 数以百万计的设计师和工程师都接受使用foundation框架来作为产品或者网站的前端设计. foundation是第一个支持响应式,语义化, 移动为先的开源框架. 最近Foundation5已经发布,作为当今最快速的发布版本工具,在很多方便比如开发产品和网站都很快.

使用CSS框架的优点和缺点

- SmallColor - RockUX | WEB、前端、JavaScript、PHP
CSS框架是一个软件,它为你的HTML开发提供了许多选项以供使用,可能使得你开发网站或web程序更快速更简单. CSS框架通过包括预定义代码库来达到这个目的. 一个例子是基于网格的框架,它建立了一个预定义宽度的多列布局所以你可以专注于创建内容而不是排列文本块. 最终来说有时候有的东西节约你的时间的代价是引发了更多地问题,导致节约的时间没有意义了.

Semantic:来自未来的CSS布局框架

- 小宇 - 雷锋网
CSS网格框架可以让你享受轻松的生活,但这依然无法掩盖它们的不足. 让我们感到幸运的是,先进技术为我们引入了新的方法去布局网页. 在我们前往了解先进技术前,我们必须首先了解当前影响CSS网格样式的三个看似不可克服的缺陷. 这是我从“纯化论者”口中听到过的最大的抱怨,自我在两年前创建1KB CSS Grid框架开始,CSS网格系统就规定标记和描述必须在一起.

16个非常有用的前端CSS框架

- - Jackchen Design 1984
网页是设计风格渐渐走向几个特点. 一种是创意类而另一种就是框架类. 创意类的网页是让网页更趋向于艺术风格,而框架类的网页则是为了加快网页设计的开发速度以及各种标准化的统一管理. 好的团队都会用一种高效的框架来进行快速开发. 更牛的团队会相应的开发自己的框架,或者对一些开源框架进行二次定制修改来更大程度的发挥效用.

11 款最好 CSS 框架 让你的网站独领风骚

- - 互联网的那点事
网页设计和发展领域已经成为竞争激烈的虚拟世界. 想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计. 网页编码一定要合适、精确,才能保证不发生错误,使网页能在浏览器上轻松加载出来. 此外,还要在网页设计中留出足够的空间以充许日后的功能增加和改善,这样做才能让更多与时俱进的特征能加入到网页设计中.

可以从CSS框架中借鉴到什么

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
现在很多人会使用 CSS 框架进行快速建站,. 那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置. 使用 CSS 框架大大降低工作成本进行快速建站. 当然对于一些大型的项目,可能会很难照搬某些框架直接使用的,因为直接使用会带来一些限制或者冗余的问题.

推荐 10 款 CSS 框架,网页设计就是这么简单

- ayu - 博客园新闻频道
程序开发人员和网页设计人员掐架的事情常有听说,程序员们总是为自己设计不出来漂亮的网页而纠结. 不再郁闷,因为开源帮了你,下面为你介绍11款相当不错的CSS框架,专心做程序吧,网页设计交给开源帮你. CSS网页布局框架 Elastic. Elastic 是一个简单的 CSS 框架用来对网页进行布局. Elastic 可实现各种各样常见的网页布局,如下图所示:.