CSSOO的思想及CSS框架的应用

前语：通过这次研究分析总结，个人对CSSOO的概念及应用的思路也更明确一些，是一个和大家共同学习的过程。

一、CSS框架

框架目的：

给出一个相对规范的开发方法，给出一些具体的可以操作流程内容，按照框架的思路来方便灵活的完成一个css设计。规划了样式应用的代码组织模式，进行页面布局的一种灵活的组合方式。

目前CSS框架：

国内比较出名好像是YUI。

• Blueprint
• YAML :: Yet Another Multicolumn Layout
• Yahoo UI Grids
• Elements CSS Framework

二、框架的应用

CSS能形成框架应用主要是归功于样式选择器的层叠和继承。

CSS的选择器有：类型选择器，后代选择器，ID选择器，类选择器，高级选择器（属性选择器，子选择器，相邻选择器。浏览器支持不一）及这些选择器的组合应用。

1、层叠和特殊性

 

那么这些选择器在使用过程中，如何确定显示内容的最终渲染效果？

这主要借助于CSS的层叠和特殊性。样式表的应用规则如下：

1). 首先根据样式表的重要度次序来应用样式表，重要性从上到下降低
              ！important的用户样式
                    ！important的作者样式
                    作者样式
                    用户样式
                    浏览器定义的样式

2）在确定样式表的重要次序的基础上根据特殊性觉得规则的应用。

每种选择器被分配一个数字值。然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。

选择器的特殊性分成四个成分等级：a、b、c和d。

l         如果样式是行内样式，那么a = 1。

l         b = ID选择器的总数。

l         c = 类、伪类和属性选择器的数量。

l         d = 类型选择器和伪元素选择器的数量。

使用这些规则可以计算任何CSS选择器的特殊性。

表1-1给出一系列选择器以及相应的特殊性

注：用style属性编写的规则总是比其他任何规则特殊；具有ID选择器的规则比没有ID选择器的规则特殊；具有类选择器的规则比只有类型选择器的规则特殊；

3）如果两个规则的特殊性相同，那么后定义的规则优先。

4) !important :如果应用这个规则，那你可以不管上面2，3两点的复杂的规则了，但若过多的应用此!important将破坏样式的层叠应用。

2、继承，重载，抽象，实例

<父>

<元素    (继承上文)   Class="A B ..."    Id="ID"Style="属性:值;">

<子>... </子>

</元素>

</父>

1.

继承，重载的对象是样式的某一个属性。

2.    上文环境：不由元素自身的class，id，style行里样式决定的，由雨它所处的祖先级元素的环境而自动拥有的样式属性。

3.    元素的样式属性规则Class(A)  < Class(B) < Class(…) < ID < Style，对于应用规则越往右，优先级越高。

元素首先会根据元素所在的上文拥有一些样式属性，

前面有的后面没有的，后面默认继承前面的样式，

前面没有的后面有的，可看作增加了私有的样式

前面有的后面也有的，可看作重载了相同属性的样式。

4.    同类型的元素（相同标签名），同类元素（块，行元素）

5.    操作对象：应用某规则的元素及元素的后代。

6.    一个元素的样式由其上文和该元素所设置的class，id，style行里样式确定，且该元素的设置也将影响其后代元素的样式属性，

7.    <父>的样式设置，影响其所有的后代的部分属性（共同拥有的那部分属性），<元素>继承、重载并私有新的样式属性，且在重载的部分中赋予<子>中由<父>确定的那部分新的样式。

8.    CSSOO类，类群。

CSSOO类：选择器规则 {类主体}

选择器规则：是各种选择器的组合。

类主体：属性：值;的集合。

CSSOO类只有属性，没有方法（扩展：如果拥有方法 js？c#？）

由CSSOO类组成的块叫类群。

9.    模型应用

语义片段，CSSOO类群

10.父子元素的继承，重载… 元素自身的class id style行里元素设置的继承，重载。

11.实例化：符合选择器规则的语义片段的应用。

 

 

       抽象、继承，重载，实例的我们是看不到一个明显的过程的，没有像程序一样的显示的声明，一切都是思考后的一种结果。

 

CSS的继承本身是指应用样式的元素的后代会继承该元素的某些属性，这些属性通常是父元素和子元素都有的属性，一般是修饰方面的属性，比如颜色，在结构排版方面的一般不会继承。

要涉及框架的应用，可以将继承的理解扩展开来，css本身的继承只作为一个内在的方面。

下面分析理解CSSOO的继承，及重载，抽象，实例。(个人将CSS的类面向对象的应用，称为CSSOO.)

CSSOO的类可以理解为一条条样式规则及规则组合。

形如：选择器{属性：值}。

.testClass1 {}

.testClass1 h1{}

.testClass1 p{}

#testId {}

层叠和特殊性为CSSOO提供应用规则，通过这种规则的组合，可以达到类面向对象化的效果。

有点需要指出，框架的应用必须形成有语义结构的html代码结构模块，下面会结合土豆网的一个box的代码片段进行这个CSSOO的分析理解。

1)        抽象
css的类class的自身定义就是提取元素中共用的东西放在一个class里面，以便需要相同表现的元素进行应用。这是css的自身的一种抽象应用。
css的类的规则定义是以： .test{属性:值;}的方式定义的。比如给所用的img设置成3px red边框，比如给 某些div，某些table设置共同的背景色等等。

CSSOO的抽象：

将公用的重复的东西抽象出来作为基类class。基类可以分成多个方面.

可以利用类型选择器，和class类选择器及高级选择器的规则组合对样式进行提取抽象，抽象出来的可以成为父类。

对于ID选择器在抽象中尽量较少应用，因为id选择器不利于抽象和继承。如果应用id选择器定义样式，这个样式类就相当于程序中的类加了sealed修饰符，无法被继续。Id选择器定义样式类一般用于比较具体的类中。

 

抽象分为全局抽象和局部抽象。
全局抽象：

常是通过类型选择器将元素的默认样式重置统一成你想要表现出的样式。以及为一些元素的包含关系进行一些样式定义。如CSS框架应用中的reset.css，typography.css
比如：*{padding:0;margin:0} , div p {color:red;}

还有是通过class类定义一些比较倾向于某个方面的样式，大多是表象样式。这些样式一般是与局部抽象无关的，但可以用于任何元素的样式，这些类可以统一风格，增加使用灵活性。
局部抽象：

我们自行定义的一些语义模型，并对这些模型设置一个统一的样式应用，如土豆网的box盒模型，为引用box盒模型的实例提供相同表现。

CSS框架除了提供分栏布局的模型外一般是不提供这些局部抽象的，局部抽象是根据我们的具体项目使用，定义一些模型。

上面的这些抽象都将作为一个父类来继承。

2)        继承与重载

一个语义代码结构不附加任何的行内样式，不添加id选择器，不添加class类，这个元素将按照CSS本身继承特性拥有一些样式。

当添加id或者class时，就可以理解为发生了继承这一个行为，当添加的类中含有全局抽象中定义的属性时，会按照层叠和特殊性的原则进行重载。

如：<div class="traffic car" id="mycar"></div>

traffic是抽象出来的交通工具的样子， car里描述了一些小轿车特有的样子，mycar是描述了我的车拥有的特征。

通过上面的一条html片段，基本能够了解CSSOO的一个思想。

继承的行为是在class="traffic car"这样的过程中能够发生的。

当car中拥有需要修改traffic里的一些外观属性时，就发生了重载，比如traffic将交通工具的颜色默认设置成黑色，而car里定义默认的颜色为红色。就会放生重载。重载是针对已经拥有的属性来说的。

继承是两方面，一种是隐式的集成，就是继承全局抽中里，利用类型选择器进行定义的样式规则，另一种就是在如上面的html片段中产生的一种继承行为，即car 继承了traffic描述的交通工具的基本外观特征。

3)        实例：对于某一个元素应用是就是将这个元素实例化。简单点理解，就是拷贝相同的语义结构代码，并应有CSSOO的类规则。如果灵活实例化的问题，是一个CSS框架的好坏的关键, 也是判断CSSOO的样式框架是否合理一个标准。
以怎样的一种方式进行实例化，是一个非常重要的可研究的地方。

3、结合土豆网box模型实例（未整理完）

左图是土豆网BOX模型的语义片段。

三、CSS框架的组织

 

框架组织

CSS框架首选组织css的文件维护结构。通常将css按照逻辑及涉及的方面分化成几个样式表文件。一般会从以下几个方面进行组织。

1.       重置浏览器的默认风格。
这个应用主要是统一各种浏览器之间的默认设置的差异

2.       组织一种部件的应用模型
比如豆瓣的导航模型，盒模型，包装模型， blueprint框架的布局排版的组合应用

3.       统一某些具体标签元素及元素组合模型的表现。
比如，form表单里的各种控件标签的表现风格；组合的盒模型，导航元素组合；自己设置的布局组合

4.       创建通用css类。

5.       hack文件：主要是为平衡各个浏览器的版本bug的文件

比如blueprint中：

reset.css 充值样式 
typography.css 排版
grid.css 布局（能作为框架的，这是个关键）
form.css  表单部件

还有：

widgets.css   在具体项目中定义的模型，如土豆网的box模型，pack包装模型

一个css框架的好坏个人感觉主要在排版和项目中的模型是否有好的灵活的设计。

如果使用css框架？ （未整理完）

如果使用主要涉及到性能问题。
因为css分成多个文件，会增加http请求数，如果放到一个文件里面，又会降低框架使用的灵活性。

如何能做到灵活性？理想方案：一个带参数的请求，服务器端动态选择组合输出文件。

结合Blueprint CSS 框架进行分析（未整理完）

Blurprint的灵活布局

和blueprint的grid.css进行分析,基于网格的布局

相关概念：

       层叠：css的全称为层叠样式表（Cascading Style Sheets）。从命名可以看出层叠是样式表非常重要的一个属性。按照一定的规则，规则高的样式会覆盖规则低的样式。

继承(inheritance): 继承（的规则）允许样式不仅应用于某个特定的元素（父元素），而且应用于其后代（子元素）。

特殊性(specificity)：即某条CSS规则特殊性越高，它的样式越优先被采用，网页就会显示它所指定的样式。

浏览器样式：不同的浏览器厂家，都会在浏览器中给所有的html文章设置一种共同的特征，比如：你是比尔盖茨，你喜欢把IE的字体的大小设置成一个苹果那么大（呵呵，夸张了）。正式由于浏览器默认样式的存在，所以基本所有的CSS应用时为了统一绝大多数的默认样式，都会对其进行重载。所以，css的框架里都会有一个reset.css重置一些默认的，及你想要统一的一些样式。

用户样式：用户是指访问网站的人，由于浏览器会提供一些辅助功能，所以，用户可以调整一些网站作者没有定义的样式属性，比如调整字体为红色，但这个前提是作者没有定义过字体的颜色，如果定义了，那么用户调整将不起作用。（如：IE: “工具”>”Internet选项”>“辅助功能“> “用户样式表”）。

作者样式：就是指网站设计者设计的css样式，根据样式放置方式的不同，作者样式分为内联样式，外联样式，内嵌样式。三者的优先级是：内联>内嵌>外联.

内联样式：即行内样式，在元素的style属性中设置的样式

外联样式：在header中用link标签导入的样式

内嵌样式：在header中用<style>标签编写的样式

!important规则：在任何声明里利用这个规则声明的，将拥有更高的优先级。

样式应用规则：指通过一种选择的规则，在编写的样式中确定哪种将最终应用在元素上，显示出最后的效果。规则应用的对象是样式的某个属性，而不是用{ }括起来的内容，当样式的某一个方面的属性在不同的样式中定义时，将按该规则进行选择。

CSSOO:个人对CSS的一种相似于面向对象应用的简写，指css的抽象，继承，重载，实例的面向对象化的一种规则。

CSSOO的对象及实例化：一个具有一定语义结构的html代码块模型，及引用的CSSOO的类的样式规则应用。将这样的一个代码块和规则拷贝到页面中使用的过程，可以引申为对象的实例化的过程。

表象样式：诸如字体大小，颜色方面的样式属性。

结构样式：诸如长，宽，绝对定位，相对定位，等等确定元素将在屏幕的某个位置呈现的属性。如width,height，padding， margin， border-width， float,display, clear，position等等