来看看：OOcss教程:熟悉OOCSS和复杂使用OOCSS

那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
网页制造poluoluo文章简介：OOcss教程:熟悉OOCSS和复杂使用OOCSS.

• 原文：http://wiki.github.com/stubbornella/oocss/faq（翻译时为Version
  28）
  
• 翻译：ytzong
  

在OOCSS中怎样界说“工具”？

工具相似JAVA中的类，坚持着OO的特性。
一个CSS工具由4部分构成：

• 多是一个或多个DOM节点的HTML
  
• 由wrapper节点的class名入手下手的CSS款式声明
  
• 相似于背景图片和显现用的sprites组件和
  
• JavaScript举动，监听大概与工具联系关系的办法
  

这大概使人隐晦，由于每一个CSSclass不是其本身需要的工具，但能够是一个wrapperclass的一个部件。好比：

1. <divclass="mod"><divclass="inner"><divclass="hd">BlockHead</div><divclass="bd">BlockBody</div><divclass="ft">BlockFoot</div></div></div>

复制代码

工具是一个class为mod的模块。包含4个部件节点（不克不及自力于模块外，包含2个区块，inner和body，和两个可选择的区块，head和foot）
OOCSS怎样提拔功能？

OOCSS具有双倍的功能上风：

• 高度重用的CSS代码，只必要很少的CSS代码，意味着：
  
  
  
  • 更小的文件，从而更快的传输
    
  • CSS代码在站点页面中挪用的比重增年夜则有但愿被复用或被扫瞄器缓存
    
  
  
• 就扫瞄器而言更少的重绘和结构盘算
  
  
  
  • 单个页面，CSS划定规矩复用的越多，衬着引擎花在“computedvalues”的盘算工夫越少
    
  • 手动增添的"extending"类，重写更少的划定规矩，这再一次意味着引擎做很少往使用划定规矩
    
  
  

要用ID来对内容写款式吗？

当你在统一页面（大概统一站点同时缓存优秀）复用一个工具时，这是功能的“收费赠品”。用ID来写款式在统一页面中只能利用一次。@cgriego(twitter)
拿它与singletons对照过，我以为十分准确。大概有些情形下你要用ID界说款式，好比十分特别的headermenus，此时你能够在用ID来沙箱（译注：动名词）特别元素并确保此处的代码不会影响站点的别的中央。选择ID而非class前要三思，跟着站点的开展，真的很难意料其别人会怎样处置根据你的CSS所构建的HTML。若有选择的余地，尽量的思索扩大性。
我正在思索移除模板head,body,foot中的ID。某些人也许有多个主地区。站点的多个header和footer更难以推测，但我敢赌博一定有计划师会如许想，以是ID极可能会消散（不太顺，看原文：Someone
couldhavemultiplemaincontentareas.Multiplesiteheadersandfootersaremore
difficulttoimagine,butIbetthereisadesignerwhocandreamupsomethinglike
that,sotheIDsareverylikelytodisappear.）。
另外一方面，IDhooksaregreatforlinking。放在HTML中，不外别用它们来写款式。
计划师能够写OOCSS吗？

是的，计划师出于天性了解工具，比多半人以后誊写CSS的体例要抽象—layersofexceptions(想一下，一个老太太吞了一只苍蝇)。现实上，他们爱上OOCSS的缘故原由有两个：

• 这使他们能疾速创立庞大高点击量的站点。他们不需纠结于不睬解的布局除非有充足的才能并充分的懂得语法
  
• 学CSS时，他们不需创立丑恶的“helloworld!”站点。计划师在十分在乎的是他们的事情看起来很大度。假如必须做一些丑恶的东东，即使是进修之由，他们很快就会有挫败感并灰常的忧郁。OO-CSS
  使得他们的事情在每一个进修阶段都看起来很大度
  

计划师是伶俐D。我们要给他们信托。他们会讲一种分歧的，非工程师的言语，可是极客的言语常常以一种丑恶的体例来回绝人。我们能做的更好。
我是个前端架构师，怎样向团队教授OOCSS？

作为架构师，你应当写布局工具；圆角怎样创立，为角或其他特征安排表象元素，并处置扫瞄器差别。老手为这些模块写皮肤（borders,colors,background
images,等等）。
我用OO-CSS体例创立了多量站点（千级的页面，百万级的会见者）。准确的完成后，很好扩大，这意味着老手将处置的一般元件可预感性很强。代码审视很简单，由于有可承受的办法明白的划定规矩来扩大工具。这类回馈使新开辟者疾速临盆。
我在FullSIX（一个法国的收集营销机构）办理一个前端开辟团队，是我事情过的最有才干的。某些时分我们的乐成意味着我们将会有更多灾以把控的事情。雇佣前端专家十分坚苦（没有这类黉舍！），以是我入手下手对一些对写代码有乐趣的计划师（很少或没有履历）奉行一个外部练习项目，一个月就能够作为团队的低级成员事情。

• 第一周：进修语义并依据现有的CSS创立HTML。进修创立网页：不必要更多的CSS，HTML语法，多个class，考证，语义，先容代码审视等
  
• 第二周：创立复杂的内容工具（题目，列表等），延续一周。进修CSS语法，怎样扩大工具，色彩，字体百分比，等等
  
• 第三周：创立区块的皮肤。边框，色彩，背景图片，基础的结构，sprites。让他们统一个回覆过n个成绩的资深开辟者一同事情，使他们少走弯路，他也应是很好的代码审视者。
  
• 第周围：他们已是团队的皮肤制造成员了。
  

他们的代码在一个客户的网站上，同资深开辟者写的一样好，也许更好由于他们还未学到一些坏习气:)
进门：怎样利用这些文件？

3个文件，libraries.css(reset及fonts取自yui),grids.css及template.css已完成，别的的还十分不不乱。

• 翻开template.html并存为新文件
  
• 经由过程扩大响应的工具来改写列的数目及宽度。站点中只需一个模板，即便你有分歧列的页面，由于列也是工具。能够把它们看成恣意的地区，大概会有0~n
  个左列。查阅模板文档可懂得更多
  
• 用栅格来支解内容地区为小的区块。查阅栅格文档懂得更多
  
• 增加内容。提醒：这也应OO
  

怎样部署在站点上？

注重CSS文件在精益求精中，我会根据接到的反应举行改动。
我把CSS文件分为了模块，好比栅格和模板。在利用时移除不用要的正文并削减HTTP哀求，不然站点会超等慢。这意味着要兼并CSS文件为一个稍年夜的文件。我经由过程嵌套的正文来构造CSS。最初，作为上线/部署的一部分，用CSS紧缩器来移除正文.
能够修正文件，大概用我本人的款式重写吗？

我不会修正grids,template,大概libraries。大批测试标明这些已恰如其分。假如要自界说，思索上面的扩大基础工具。
粉红不是我要的色彩！怎样处置content.css？

猎取你会想要修正content.css。往吧，改色彩，字体巨细，巨细写。只需注重这个文件在疾速开展，同时我还没有任何文档来讲明怎样准确的处置。我会这么做，我包管。
我必要不但6种题目（h1~h6），怎样增添？

假如必要不但6中题目款式，经由过程增加一个新class来扩大题目工具。

1. .category{font-size:108%;font-weight:normal;font-style:normal;text-transform:uppercase;color:#333;}

复制代码

不要如许做：

1. #mySaleModuleh2,#mySaleModule.h2{font-size:108%;font-weight:normal;font-style:normal;text-transform:uppercase;color:#333;}

复制代码

怎样扩大工具？

假如要扩大工具，好比一个160px的左列，而非默许值，你能够再列上增添分外的class。

1. <divclass="leftColgMail">...</div>

复制代码

假如默许值和扩大的列宽大概页面不合适你的站点，你能够扩大列来完成自界说的宽度。
列

myColumn扩大列工具来完成自界说列宽。

1. .myColumn{width:400px;}

复制代码

HTML

1. <divclass="leftColmyColumn">...</div>

复制代码

不要经由过程重写我的class来完成，而应扩大此框架供应的工具。我供应了列，题目及其他工具。你能够经由过程增添别的的class（只指定与我的基础工具的分歧点）来扩大这些工具。绝对而言此处夹杂对照好。
不要如许做（由于更新我的框架时会有些贫苦）：

1. .leftCol{…此处自界说CSS…}

复制代码

没有效到的款式。我的站点没有160px的gmail式的列，能够移除吗？

固然。移除工具或扩大工具十分公道。只需注重在站点开展时，很难意料到其别人用你的CSS创立的甚么样的HTML。过早优化很伤害。
为何有一个独自的模板？

在OOCSS中，一个主要的方针是一切的页面创立自一个模板。这简化了CMS开辟，由于有一个独自的肇端点一切页面能够制造为其他的页面。CMS的用户不会落进已创立的页面不克不及变种为分歧的页面范例的圈套。OO模板的另外一个方针是每个section（列，header等）把持本人。实践上，这意味着假如要在模板上增添一个左列，只需在HTML中增添此列。你历来不想如许写CSS吧，为了使子元素满意体现而DOM树必要良多改动。对CMS开辟来讲DOM轮回相称的高贵。
这有语义吗？我要停止像.formYellow或tinyBlueH2的class定名吗？

OOCSS能够写得有语义也可无语义，取决于你创立模块时用errorMod而非bigRedModule。我选择class名优一些准绳（排名不分前后）：

• 短&ndash;每字节盘算起来，以是尽量坚持class短
  
• 明晰&ndash;可意料的举动/款式要不言而喻
  
• 语义化&ndash;工具是甚么高过看起来像甚么。怎样用在站点中？
  
• 通用&ndash;称号应当合用于多半站点。过于特别的称号削减了合用场所或招致语义化的class以非语义化的体例利用
  
• 屏幕&ndash;挪动浏览器或打印款式也许有分歧的视图，会重写默许的屏幕视图，以是当有抵触时class为屏幕而特别界说（Differentviews
  mightbeprovidedbymobileorprintstylesheets,howevertheyoverridethe
  defaultscreenview,sotheclasseschosenarescreenspecificwhentherewas
  aconflict）。这简化了开辟。
  

别的的框架怎样？这只能同YUI一同利用吗？

在大批框架的生态体系中，YUI是专业性及可扩大性的一例。我同他们举行了对照，由于我不休遭到他们代码和文档的影响。OOCSS不是一个真正意义上的框架，只管我创立了良多例子，而是一种誊写可扩大，强健，可保护性强的CSS的一种体例。大概最好的比方是一个新的言语。终极，它是未知的JavaScript库（it
isJavaScriptlibraryagnostic），我但愿奉献代码回YUI及其他框架。
CSS框架太凌驾！我必要重新入手下手编写一切代码吗?

每必要一个随机数字都要写一个数字class吗？
CSSishard,

notbecauseitisbroken,butbecauseitisalegitimatetechnologyrequiring
expertisetoarchitectcorrectly.为每一个站点反复创造轮子十分的愚昧。
源文件中右列在主列之前，会影响可会见性，SEO吗？

我初期事情过的站点有更尺度的模板布局，body上有一个极好的class，依托这个模板显现或埋没摆布列。自界说CMS的用户要创立一个3列结构的页面时十分懊丧，发明必要两列，找到它们不能不一个个重新入手下手，由于有多个模板/肇端点。你也许注重到主列是个流体列，在摆布两列衬着后自顺应残剩的空间。
我更喜好标签排序赛过视觉排序（由于假如标签按次改动会变得十分奇异），可是我也只想要一个模板。在web开辟中常常碰到的是，两个主要的方针产生了抵触，我做判别怎样办理。这类情形下标签排序满意视觉按次除右列。在以后的代码中，只需在HTML增添一个左或右列，没有别处高贵的DOM变更。
屏幕浏览器用户有两个选择：

• 跳过链接
  
• 导航链接常常为一个链接列表或嵌套的链接列表情势。这十分风趣，由于这同意屏幕浏览者经由过程屏幕浏览器的特别操纵设置跳过全部列表。
  

我的定见是关于跳过菜单这两种体例充足了。
每一个人仿佛都有一个复兴概念：SEO，它们都分歧，乃至相反。:)基于这个思潮，我偏向于：特别对含有必定公道数目链接的导航菜单，不必太甚在乎。曾多少时，我看到过导航链接被索引在搜刮了局的内容部分，不外是在几年前了。搜刮爬虫十分智能，我已筹办好想固然的以为假如我以语义化，洁净的体例标志内容，并不是添补一坨渣滓链接，爬虫能辨别的出来。
把导航菜单标志为列表，同意屏幕浏览器用户跳过，并供应“跳至内容”链接，对可会见性供应了双倍的备用措施。
为何用了_hack？我能把这些代码放在独自的文件中吗？大概增加IE专有的class？

很明显，起首思索的是尽量少和久远。

• 增加一个独自的款式表奖增添一个分外的HTTP哀求，增添全体文件的巨细，这早已经是扫瞄器功能的对峙点
  
• 我喜好把一个工具的代码放在一个中央。我以为这有助于削减hack的数目，特别是当项目随工夫而开展
  
• IE6-的开辟工具十分原始，这使得hack和一般代码放在一同加倍主要。我想能尽快找到一个可使用属性的IEbug。一样，我以为这有助于削减hack
  
• 划定规矩标明扫瞄器了解不了的属性会被疏忽。对IE6-利用_早已尽人皆知，能够公道的意料好的扫瞄器将会疏忽这个属性
  
• 利用前提正文意味着每一个HTML页面必需包括一个IE公用款式。某一天（我不克不及等了！）当IE6的市场份额下落至像IE5那样低时，我将往除这些代码，但最初我要做的是触及百级或千级的HTML页面。我宁肯只要依附CSS
  hack的CSS，而不是把它放在HTML中。不幸的是，恕我婉言，IE6兼容性的末日比我们希冀的要加倍久远，由于IE中的quirksmode会回落到IE5.5的形式
  

我以为我的选择有助于削减hack的整体数目，提拔功能，并只要疏忽不计的风险。话说返来，假如以为代码中的_令你作呕，你完整能够移至独自的文件。
为了增加表象效果好比边框而利用空<b>标签容器工具，会给屏幕浏览器用户带来成绩吗？

不会，侥幸的是屏幕浏览器会疏忽空的b标签。利用这个表象标签（b是加粗）来完成表象具有上风。这个标签能够经由过程服务器端剧本包括，以致于有一天一切的CSS圆角和暗影都撑持了，能够封闭剧本并具有大度，洁净，语义化的HTML。
OOCSS宣称制止地位依附的款式。是不是意味着我不克不及利用相似.myModule.title的派生选择器？

不利用派生选择器没甚么拦阻，只是把它们放在更高的DOM树罢了。制止在body或页面中最外层的div安排wide-netclass或id，然后对工具发生的变量写大批的款式。这不克不及复用，同时会使页面衬着变慢。相反，经由过程间接在工具上增加一个class来增添一个过剩的“local”变量（并对其子元素写派生款式）。
一个好的履历是一个容器主体（bodyofacontainer）内的恣意元素明显是一个独自的工具。
这无可厚非，由于UL明显是一个独自的工具：

1. #sidebarul{...}

复制代码

因而，carousel明显不是body工具的一部分：

1. body.browseProducts.carousel

复制代码

这是得当的层叠使用，由于子节点真实的是较年夜的父工具的一部分。b（角）和inner明显从属于moudle，它们不克不及自力存在：

1. .myModule{...}.myModuleb{...}.myModule.inner{...}

复制代码

怎样奉献？

最好的办法是涉足个中，入手下手利用代码（libraries,grids,fonts）并提交
bug呈报及功效需求。我建了一个

OOCSSgooglegroup来举行凌驾140个twitter字符的会商。
译注：

OOCSS的官方站点为http://oocss.org/，有一些例子及下载等。
</p>
更好的控制页面布局。不用多说。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

学Dreamweaver技术的过程其实是一个增加信心的过程。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。