高质量的css.ppt

1、读编写高质量代码一书感想,如何组织CSS、如何划分模块、精简高效的CSS命名准则和方法、挂多个class还是新建class,一、如何组织CSS,应用css能力,css的API,css框架,重点,重点,如何用CSS控制页面内元素的样式,如何对CSS进行组织,（这部分是基础）,一、如何组织CSS,base层：这一层位于三者的最底层，提供CSS reset功能和糖粒度最小的通用类-原子类 base层要力求精简和通用base层具有高度可移植性,common层：提供组件级的 CSS类common层最好由 一个人负责，统一管理,page层：网站中非高度 重用的模块，可以把它们 放在page层,二、如何划分

2、模块,原生JS因jQuery的”write less,do more”变得极简, HTML因语义化编码变得简明, 那么, 有没有一种方式让CSS也更加的高效精致呢? 当然有, 那便是模块化编码.,CSS的模块化,我们可以理解成OOP思想, 重用性、灵活性、可扩展性， OOP的多用组合少用继承一样是它的基本原则.,CSS模块化,从整站全局模块化（reset.css就是是模块化的一部分。）,是从视觉效果上模块化,在视觉上样式和功能相对独立稳定的部分即可视为模块. 拆分这些模块, 应该尽量遵循一个原则: 模块与模块之间尽量不要包含相同的部分, 若有 相同部分就再拆出来独立成一个模块.,(文字、定位、

3、长度高度、边距等这些称为css在子类),下图是我画的一个简易的页面视觉图:,可以看出,14中,标题背景, 标题文字,内容文字这三个 部分的样式都是相同的, 所以, 我们可以为这个四 个区块定义一个类名, 将 共同的样式写给这个类名:,原则二：模块应在 保证数量可能少的 原则下，做到尽可 能简单，以提高重 用性,三、精简高效的CSS命名准则和方法,精简高效CSS命名之“三无原则”：无ID，无层级，无标签,例如#test .test这种写法，里面的CSS重用性多大，完全限死在了id为test的元素下，哪 有重用性可言；又如ul.test，这个ul标签十有八九就是装饰用的，同样CSS样式的div标签

4、 可以用吗？,CSS命名就应该最简单、最直接。没有HTML标签，没有层级，这些通通不要。 为什么不要，有三大原因：1、限制重用性：,2. CSS文件大小,名称的字节数已经比属性还大了，冗长的CSS命名,修改后的代码,这样子的CSS排版更舒服，更简洁,3. 降低了渲染效率,看个例子：,现在要给这里的ul标签一个样式，比如说padding-left:25px;那么下面四种写法 哪个渲染速度最快？,如果单纯的ul与.test PK，我还真拿不定谁的渲染速度更快些。但是，一旦牵扯 到层级与标签，我100%确定，.test这种最直接的命名方式渲染效率是最高的。,面向属性的命名方法,分离为什么可以让样式的

5、重用性放大至最大，就是因为分离后样式的 命名就是样式本身，如下图：,记住精简高效的CSS命名准则之一：对于网站非通用元素，如果样式简单 (12个属性)，对其分离并使用面向属性的命名方法。,四、挂多个class还是新建class多用组合，少用继承,继承的思路是将一个复杂且包含变化的类，拆分成几个复杂但稳定的子类首先 明确一个抽象的父类，父类有着几乎所有的方法和属性，子类继承自父类，根据 需求，添加新的方法和属性，覆盖掉与父类有变化的方法和属性。,组合的思路是将一个复杂的类分成容易产生变化的部分和相对和相对稳定的部分， 将容易变化的部分拆分出去，每一种可能的变化设计成一个个单独的类，相对稳 定的部

6、分设计成一个主体类，这样，将一个复杂的类拆分成几个简单的类，类之 间没有继承关系，这遵循了面向对象设计的单一职责原则这些容易变化的 类的实例赋值给主体类作为一个属性，实现了类的组合用组合的方式，可以大 大减少类的数量,五、如何处理上下margin,margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重合的，但相 邻的margin-top和margin-bottom会产生重合 总结：如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而 是使用类的组合，单独为上下margin挂用于边距的原子类（如：mt10、mb20） 模块最好不要混用m

7、argin-top和margin-bottom，统一使用margin-top和margin-bottom,六、低权重原则避免滥用子选择器,1、CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高 的选择设置的样式权重的规则：HTML标签的权重是1，class的权重是10，id的 权重是100 2、如果CSS选择符权重相同，那么样式会遵循就近原则，选择符最后定义，就采 用哪个选择符的样式 3、为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低,CSS reset的重新审视 避免样式重置(讨论的话题),一、CSS reset（CSS重置）的历史,根据淘宝射雕的叙

8、述，最早的一份CSS reset来自Tantek 的undohtml.css，很简单的 代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。其余一些有 名的CSS reset如业界领袖Eric Meyer的reset，或是Tripoli Reset。CSS reset的作用 是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”！ 如下面常见但事实上极不推荐的代码：* margin:0; padding:0; 可以说，兼容性是 CSS reset诞生的的主要原因之一，还有一方面的原因是类似于“库”的作用。,二、CSS reset的滥用,看这么一行CSS re

9、set代码：,1. div标签默认有margin值吗？有padding值吗？怎么会想到应用divmargin:0; padding:0;属性呢？真是画蛇添足，多此一举。 2. dt标签有默认的margin与padding值就是0，这里为什么还要使用呢？ 3. li标签默认有margin值吗？有padding值吗？压根就没有，也不自己测测，还没事找事设置个limargin:0; padding:0;属性，真是衰！ 4. code标签是个属于inline水平的元素，居然也扯到margin与padding的重置，真是好笑。 5. 还有，像form, input, button, textarea这样

10、子的表单元素，有margin值吗？有padding值吗？ 6. fieldset, legend这两个90年代的标签你的网站上使用了吗？使用概率不足1%的标签也拿来 重置，我实在无语了。 7. 还有th，td这些标签，幸好没有写上table与tr标签，否则我一起痛批一段。,最近他下的结论：就算要CSS默认属性要reset重置，也应该如下：,三、CSS reset的不足,CSS文件的大小 显然，CSS reset平白无故的增加了CSS文件的大小，虽然，增加的大小可能有限，但是， 要知道，即使0.1秒的载入时间差异也会影响互联网企业的收入的。 样式的重置 许多的CSS样式要重写与重新覆盖，典型的多

11、此一举。 CSS的渲染 这可以说是最大的问题，样式无缘无故增加了很多的渲染，想想看，一个项目或是一个页 面中有多少个div标签，居然使用divmargin:0; padding:0;当然，*margin:0; padding:0; 更是无法容忍的。,四、CSS reset本没有存在的必要,1. 那些所谓的需要重置的标签,h1margin:10px 0 0; 对比下CSS reset下的使用： h1, h2, h3, h4, h5, h6margin:0; . . .h1margin-top:10px; 使用CSS reset不仅文件大小增加了，CSS代码属性也发生了重置， CSS渲染也增加了。

12、显然不及没有CSS reset来的高效。,例如腾讯首页的模块选项卡标题，如下图：,我们看看腾讯页面时如何对这个h4标签设置样式的，见右图样式：,方案一：,方案二：,避免了右侧margin值的重置，而且也节省了可能不会 使用的h5,h6标签。就算这里的h4标签没有margin值， 我们可以直接设置margin:0;就好了，没有任何的损失。 CSS reset就是个可有可无，没有最好的东西。,2. 那些所谓的兼容性,所谓兼容性，我想，大多数人都是听别人说的，不同浏览器下标签的一些属性有差异啊！ 我倒要问一问，哪些标签的默认属性在不同浏览器下有差异？ 我所知道的就是h1标签的文字的大小，在有些浏览器下大些，有些小些；然后就是一些 margin值的些许偏差，然后还有呢？事实上，目前浏览器而言，对于这些默认标签的属 性其