“重構(gòu)”的東風(fēng)吹遍大江南北，互聯(lián)網(wǎng)臨時(shí)間土崩瓦解，“div+CSS”儼然已成為一種“時(shí)尚”，難以盡數(shù)的網(wǎng)站都不謀而合地開始了本身的“重構(gòu)”。然而打開這形形色色網(wǎng)站的源代碼，卻時(shí)常令人啞然發(fā)笑——

我們看到有嵌套6、7層的div布局，有不消table的表格，有純div+a構(gòu)成的頁面，有成百上千的體現(xiàn)層class……如今關(guān)于尺度的冊(cè)本越來越多，除了少數(shù)幾本標(biāo)榜“高級(jí)本領(lǐng)”的冊(cè)本以外，很少有人不會(huì)在本身著作的前幾章夸大如許一句話——“布局與體現(xiàn)分散”。然而這些冊(cè)本的讀者們，又有幾多人認(rèn)認(rèn)真真地讀過前幾章呢？照舊更多地直接跳過那些乏味的布局解說，一頭扎到貌似高妙的布局本領(lǐng)與Hack中去？

實(shí)在div+CSS這個(gè)說法從一開始就誤導(dǎo)了太多的人，急功近利的心態(tài)則更是造成這種征象的罪魁罪魁。一個(gè)風(fēng)俗了table布局的網(wǎng)頁制作打仗尺度的第一步，不該該是去盲目尋求實(shí)現(xiàn)種種布局的CSS本領(lǐng)，而是高興轉(zhuǎn)變本身的頭腦方法。

下面將聯(lián)合我的親身領(lǐng)談判一談適應(yīng)尺度的頭腦方法，此中有不少是我曾經(jīng)走過的彎路，盼望對(duì)方才打仗尺度的XDJM們有些資助：

1、“節(jié)流代碼”是營(yíng)銷本領(lǐng)，不是宗旨

“利用div布局可以比table布局節(jié)流更多的代碼”，我在很多冊(cè)本和網(wǎng)站上見到過這句話。這句話本身是沒錯(cuò)的，可以“節(jié)流代碼”簡(jiǎn)直是網(wǎng)頁尺度化所帶來的利益之一。然而牢記，它只是“利益之一”，而不是“唯一利益”，更不是宗旨。“節(jié)流代碼”更多的時(shí)間是我們用來說服那些至死不悟的老板的營(yíng)銷本領(lǐng)。網(wǎng)頁尺度化的唯一宗旨是“布局與體現(xiàn)分散”，而絕不是為了節(jié)流代碼而節(jié)流代碼。我曾經(jīng)過于網(wǎng)站邊欄乃至主體內(nèi)容的體現(xiàn)情勢(shì)雷同而接納了同一的class （至今另有一些書是如許教的），如許簡(jiǎn)直比分別定名id更節(jié)流代碼，然而如許做的價(jià)錢是代碼失去了精良的布局。失去精良布局的結(jié)果是：一、源代碼沒有了可讀性；二、網(wǎng)站增加了未知的維護(hù)本錢。試想，當(dāng)某一塊內(nèi)容由于必要而作出體現(xiàn)情勢(shì)的變更，比方鏈接的顏色等等，我們就不得不去修改頁面源文件，增加分外的class，事情量比起只必要調(diào)解id分組就大了很多。并且長(zhǎng)此以往，布局將會(huì)越來越差，形成難以逆轉(zhuǎn)的惡性循環(huán)。

另有一種環(huán)境，出如今id的定名方面，也是本人曾經(jīng)犯過的錯(cuò)誤。當(dāng)時(shí)為了“節(jié)流代碼”，而把主菜單定名為“mm”，二級(jí)菜單定名為“m2”，三級(jí)菜單為“m3”，結(jié)果嚴(yán)峻低落了網(wǎng)頁的可讀性，使其他同事很難接辦，圖省事卻累了本身。同理，文件及文件夾定名方面也不宜過簡(jiǎn)，象《網(wǎng)站重構(gòu)》里發(fā)起把圖片都用“i”目次存放，小我私家以為并不行取，除非你能為這種高度縮寫的目次布局撰寫細(xì)致闡明并包管每個(gè)相干職員包羅其他制作職員、開辟、乃至懂行的老板……都能明白和實(shí)行，不然只會(huì)給你本身增加不必要的貧苦。

2、ID是偷襲槍，class是雙刃劍

想要做好網(wǎng)頁布局，id與class都是必須純熟掌握的，所謂“兩手抓，兩手都要硬”。ID就象偷襲槍一樣，可以資助我們精準(zhǔn)地定位要想要加載樣式的元素；而class則是俠客的佩劍，信手拈來越發(fā)輕巧靈巧，兩者的聯(lián)合可以大概實(shí)現(xiàn)布局精良且體現(xiàn)富厚的頁面。然而如今有一種錯(cuò)誤的看法，便是id完全可以用class來代替，究竟上很多網(wǎng)頁源代碼也簡(jiǎn)直云云，打開來通篇class，找不到一個(gè)id。造成這種征象的來由有很多種，然而自table期間傳下來的根深蒂固的“class=CSS”的看法才是本因。簡(jiǎn)直，class比id用途更廣更機(jī)動(dòng)，但也必須意識(shí)到，class對(duì)付構(gòu)建精良的網(wǎng)頁布局遠(yuǎn)不如id有用。id的逼迫唯一性使得我們可以很容易通過id檢索到我們必要的恣意模塊，而class則沒有這個(gè)上風(fēng)。固然我們可以為模塊界說唯一的class名，但條件是——只有制作者本人可以動(dòng)網(wǎng)頁樣式。不然換一個(gè)輕微懶一些店員，看到樣式雷同便直接把前面的class拿來套用，其結(jié)果便是我們發(fā)明網(wǎng)頁里有十幾個(gè)模塊都叫做“gonggao”大概“xinwen”，以至于為了區(qū)分還不得不加上大量的html解釋，如許的結(jié)果顯然并不是我們想要的。再者便是前面提到的，通過通用class所節(jié)流下來的代碼，又不得不在每個(gè)單獨(dú)界說的class中浪費(fèi)失。

ID是偷襲槍，class是雙刃劍，合則兩利，分則兩敗。

3、并不是全部的內(nèi)容都必要div做“容器”

　　主菜單究竟是用<div id="mainnav"><ul>照舊<ul id="mainnav">？這是一個(gè)博弈的題目。至今這個(gè)題目也沒有人可以大概給出明白的答案，就連我也是云云。誠(chéng)然，<div id="mainnav">在只包羅了一個(gè)<ul>元素的時(shí)間，這個(gè)div就顯得有些冗余，但偶然間為了共同美工壯麗的計(jì)劃，多一層標(biāo)簽就意味著多一層變革（有些人在a標(biāo)簽里套span也是云云）。而div不帶任何原始屬性的天賦上風(fēng)也是別的標(biāo)簽所無法相比的。這個(gè)命題我只是想闡明一件事，便是我們應(yīng)該意識(shí)到，<div id="mainnav"><ul>之外，另有<ul id="mainnav">這種寫法，同樣具有精良的布局和語義，并且省去了一層嵌套。在我們不必要為富麗的美工勞心費(fèi)神的時(shí)間，是不是也可以讓布局越發(fā)簡(jiǎn)約呢？

這個(gè)命題實(shí)在還可以引申為——“并不是全部?jī)?nèi)容都必要塊元素做容器”、“并不是全部鏈接都必要?jiǎng)e的元素做容器”，比方很多頁面都有的“更多”。有些人寫做“<div class="more"><a>”，也有人寫做<p><a>大概<strong><a>。在這些“容器”只包羅了一個(gè)<a>標(biāo)簽的時(shí)間，它們是否另有存在的必要？直接寫成<a class="more">會(huì)粉碎布局嗎？會(huì)缺乏語義嗎？會(huì)影響布局嗎？換一種思緒，你大概就會(huì)有紛歧樣的勞績(jī)。

4、事情上也做到“布局與體現(xiàn)分散”

關(guān)于這一點(diǎn)，網(wǎng)絡(luò)上很多妙手都是如許發(fā)起的，也便是先打開編輯器，把布局完備地寫出來，再去CSS里寫體現(xiàn)，而只管即便不去動(dòng)已經(jīng)寫好的布局。

然而以看書為重要學(xué)習(xí)方法的人卻很難領(lǐng)會(huì)，由于關(guān)于尺度的冊(cè)本多數(shù)是手把手來教的，也便是一定是布局體現(xiàn)聯(lián)合，循規(guī)蹈矩。固然有些冊(cè)本有這方面的發(fā)起，但短短的幾句話遠(yuǎn)不如念書歷程中的潛移默化。在制作職員可以大概對(duì)布局精良掌握的時(shí)間，同時(shí)寫布局與體現(xiàn)也不會(huì)對(duì)結(jié)果有太大的影響。但以我的履歷，布局體現(xiàn)分散的事情方法，要比同時(shí)寫布局與體現(xiàn)服從高很多，同時(shí)也不容易遺漏頁面上的元素。

固然，所謂的“布局與體現(xiàn)分散”并不是完全不思量體現(xiàn)，想要分身到體現(xiàn)，就要包管——在不粉碎布局的條件下，CSS選擇器可以大概選擇到只管即便多的內(nèi)容。在哪些地方加class，大概用哪些標(biāo)簽來區(qū)分，是一個(gè)見仁見智的地方，信賴每小我私家都有本身的領(lǐng)會(huì)。而聯(lián)合差別的計(jì)劃稿，偶然間也必要做出相應(yīng)的變革，然而這些變革都應(yīng)該有一個(gè)同樣的條件——不粉碎代碼的布局和可讀性。

再便是，肯定要意識(shí)到，任何可視化的東西都是妖怪。它們可視化界面下所出現(xiàn)的結(jié)果，每每與真實(shí)欣賞器相差千里，而我們真正要兼容的是欣賞器，不是編輯器的可視化界面。

5、CSS不是全能的，沒有CSS也不是千萬不克不及的

相比于CSS1.0期間，本日CSS可以完成更多的事變，然而需求永久是于技能的，CSS無法完成網(wǎng)頁全部的體現(xiàn)層事情，偶然間我們必須聯(lián)合JS大概其他語言來實(shí)現(xiàn)一些結(jié)果。而另一些時(shí)間，用JS的方法比只靠CSS簡(jiǎn)樸得多，并且代碼布局越發(fā)精良——最典范的例子便是下拉菜單。這些時(shí)間，我們要說服本身，大概說服老板與客戶，去接納更簡(jiǎn)樸更公道的方法。由于DOM同樣是網(wǎng)頁尺度的重要構(gòu)成，并不是利用了JS我們的網(wǎng)頁就低落了服從或是不再尺度，恰好相反，這是對(duì)JS大的誤解。說到這里不得不提一點(diǎn)，便是本日的期間，比以往更要求每個(gè)職業(yè)相識(shí)更多的相干知識(shí)，做計(jì)劃的人要懂一點(diǎn)交互和制作，做制作的也必須相識(shí)計(jì)劃和步伐，尤其是JS如許的前端技能，只有如許，你和同事才可以大概更好地互助，小我私家的生久遠(yuǎn)景也會(huì)越發(fā)灼爍。

沒有CSS，指的是當(dāng)我們的網(wǎng)站由于種種未知的緣故原由導(dǎo)致CSS文件載入失敗，不要因此而忙亂，這是磨練我們代碼質(zhì)量的好機(jī)遇。在沒有CSS的時(shí)間，要是網(wǎng)頁仍舊連結(jié)精良的可讀性，這結(jié)果要遠(yuǎn)比通過W3C驗(yàn)證更值得我們自大。

分享名稱：網(wǎng)頁制作,轉(zhuǎn)變你的思維方式
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/news23/74523.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、企業(yè)建站、App開發(fā)、軟件開發(fā)、網(wǎng)站維護(hù)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)