网页制作,转变你的思维方式日期：2012/12/10 11:20:50　　

    “重构”的东风吹遍大江南北，互联网临时间土崩瓦解，“div+CSS”俨然已成为一种“时尚”，难以尽数的网站都不谋而合地开始了本身的“重构”。然而打开这形形色色网站的源代码，却时常令人哑然发笑——

　　我们看到有嵌套6、7层的div布局，有不消table的表格，有纯div+a构成的页面，有成百上千的体现层class……如今关于尺度的册本越来越多，除了少数几本标榜“高级本领”的册本以外，很少有人不会在本身著作的前几章夸大如许一句话——“布局与体现分散”。然而这些册本的读者们，又有几多人认认真真地读过前几章呢？照旧更多地直接跳过那些乏味的布局解说，一头扎到貌似高妙的布局本领与Hack中去？

　　实在div+CSS这个说法从一开始就误导了太多的人，急功近利的心态则更是造成这种征象的罪魁罪魁。一个风俗了table布局的网页制作打仗尺度的第一步，不该该是去盲目寻求实现种种布局的CSS本领，而是高兴转变本身的头脑方法。

　　下面将联合我的亲身领谈判一谈适应尺度的头脑方法，此中有不少是我曾经走过的弯路，盼望对方才打仗尺度的XDJM们有些资助：

　　1、“节流代码”是营销本领，不是宗旨

　　“利用div布局可以比table布局节流更多的代码”，我在很多册本和网站上见到过这句话。这句话本身是没错的，可以“节流代码”简直是网页尺度化所带来的利益之一。然而牢记，它只是“利益之一”，而不是“唯一利益”，更不是宗旨。“节流代码”更多的时间是我们用来说服那些至死不悟的老板的营销本领。网页尺度化的唯一宗旨是“布局与体现分散”，而绝不是为了节流代码而节流代码。我曾经过于网站边栏乃至主体内容的体现情势雷同而接纳了同一的class （至今另有一些书是如许教的），如许简直比分别定名id更节流代码，然而如许做的价钱是代码失去了精良的布局。失去精良布局的结果是：一、源代码没有了可读性；二、网站增加了未知的维护本钱。试想，当某一块内容由于必要而作出体现情势的变更，比方链接的颜色等等，我们就不得不去修改页面源文件，增加分外的class，事情量比起只必要调解id分组就大了很多。并且长此以往，布局将会越来越差，形成难以逆转的恶性循环。

　　另有一种环境，出如今id的定名方面，也是本人曾经犯过的错误。当时为了“节流代码”，而把主菜单定名为“mm”，二级菜单定名为“m2”，三级菜单为“m3”，结果严峻低落了网页的可读性，使其他同事很难接办，图省事却累了本身。同理，文件及文件夹定名方面也不宜过简，象《网站重构》里发起把图片都用“i”目次存放，小我私家以为并不行取，除非你能为这种高度缩写的目次布局撰写细致阐明并包管每个相干职员包罗其他制作职员、开辟、乃至懂行的老板……都能明白和实行，不然只会给你本身增加不必要的贫苦。

　　2、ID是偷袭枪，class是双刃剑

　　想要做好网页布局，id与class都是必须纯熟掌握的，所谓“两手抓，两手都要硬”。ID就象偷袭枪一样，可以资助我们精准地定位要想要加载样式的元素；而class则是侠客的佩剑，信手拈来越发轻巧灵巧，两者的联合可以大概实现布局精良且体现富厚的页面。然而如今有一种错误的看法，便是id完全可以用class来代替，究竟上很多网页源代码也简直云云，打开来通篇class，找不到一个id。造成这种征象的来由有很多种，然而自table期间传下来的根深蒂固的“class=CSS”的看法才是本因。简直，class比id用途更广更机动，但也必须意识到，class对付构建精良的网页布局远不如id有用。id的逼迫唯一性使得我们可以很容易通过id检索到我们必要的恣意模块，而class则没有这个上风。固然我们可以为模块界说唯一的class名，但条件是——只有制作者本人可以动网页样式。不然换一个轻微懒一些店员，看到样式雷同便直接把前面的class拿来套用，其结果便是我们发明网页里有十几个模块都叫做“gonggao”大概“xinwen”，以至于为了区分还不得不加上大量的html解释，如许的结果显然并不是我们想要的。再者便是前面提到的，通过通用class所节流下来的代码，又不得不在每个单独界说的class中浪费失。

　　ID是偷袭枪，class是双刃剑，合则两利，分则两败。

　　3、并不是全部的内容都必要div做“容器”

　　主菜单究竟是用<div id="mainnav"><ul>照旧<ul id="mainnav">？这是一个博弈的题目。至今这个题目也没有人可以大概给出明白的答案，就连我也是云云。诚然，<div id="mainnav">在只包罗了一个<ul>元素的时间，这个div就显得有些冗余，但偶然间为了共同美工壮丽的计划，多一层标签就意味着多一层变革（有些人在a标签里套span也是云云）。而div不带任何原始属性的天赋上风也是别的标签所无法相比的。这个命题我只是想阐明一件事，便是我们应该意识到，<div id="mainnav"><ul>之外，另有<ul id="mainnav">这种写法，同样具有精良的布局和语义，并且省去了一层嵌套。在我们不必要为富丽的美工劳心费神的时间，是不是也可以让布局越发简约呢？

这个命题实在还可以引申为——“并不是全部内容都必要块元素做容器”、“并不是全部链接都必要别的元素做容器”，比方很多页面都有的“更多”。有些人写做“<div class="more"><a>”，也有人写做<p><a>大概<strong><a>。在这些“容器”只包罗了一个<a>标签的时间，它们是否另有存在的必要？直接写成<a class="more">会粉碎布局吗？会缺乏语义吗？会影响布局吗？换一种思绪，你大概就会有纷歧样的劳绩。

4、事情上也做到“布局与体现分散”

　　关于这一点，网络上很多妙手都是如许发起的，也便是先打开编辑器，把布局完备地写出来，再去CSS里写体现，而只管即便不去动已经写好的布局。

然而以看书为重要学习方法的人却很难领会，由于关于尺度的册本多数是手把手来教的，也便是一定是布局体现联合，循规蹈矩。固然有些册本有这方面的发起，但短短的几句话远不如念书历程中的潜移默化。在制作职员可以大概对布局精良掌握的时间，同时写布局与体现也不会对结果有太大的影响。但以我的履历，布局体现分散的事情方法，要比同时写布局与体现服从高很多，同时也不容易遗漏页面上的元素。

　　固然，所谓的“布局与体现分散”并不是完全不思量体现，想要分身到体现，就要包管——在不粉碎布局的条件下，CSS选择器可以大概选择到只管即便多的内容。在哪些地方加class，大概用哪些标签来区分，是一个见仁见智的地方，信赖每小我私家都有本身的领会。而联合差别的计划稿，偶然间也必要做出相应的变革，然而这些变革都应该有一个同样的条件——不粉碎代码的布局和可读性。

　　再便是，肯定要意识到，任何可视化的东西都是妖怪。它们可视化界面下所出现的结果，每每与真实欣赏器相差千里，而我们真正要兼容的是欣赏器，不是编辑器的可视化界面。

5、CSS不是全能的，没有CSS也不是千万不克不及的

　　相比于CSS1.0期间，本日CSS可以完成更多的事变，然而需求永久是领先于技能的，CSS无法完成网页全部的体现层事情，偶然间我们必须联合JS大概其他语言来实现一些结果。而另一些时间，用JS的方法比只靠CSS简朴得多，并且代码布局越发精良——最典范的例子便是下拉菜单。这些时间，我们要说服本身，大概说服老板与客户，去接纳更简朴更公道的方法。由于DOM同样是网页尺度的重要构成，并不是利用了JS我们的网页就低落了服从或是不再尺度，恰好相反，这是对JS最大的误解。说到这里不得不提一点，便是本日的期间，比以往更要求每个职业相识更多的相干知识，做计划的人要懂一点交互和制作，做制作的也必须相识计划和步伐，尤其是JS如许的前端技能，只有如许，你和同事才可以大概更好地互助，小我私家的生久远景也会越发灼烁。

　　没有CSS，指的是当我们的网站由于种种未知的缘故原由导致CSS文件载入失败，不要因此而忙乱，这是磨练我们代码质量的最佳机遇。在没有CSS的时间，要是网页仍旧连结精良的可读性，这结果要远比通过W3C验证更值得我们自大。