注: 此文章會(huì)講多關(guān)于CSS跟HTML的前端。
很久很久以前，在工業(yè)革命時(shí)代，差不多1700~1800年，人類發(fā)明了許多商業(yè)量產(chǎn)的新技術(shù)，雖然傳統(tǒng)手工的工匠們還是得以保持工作，卻不肯邁進(jìn)學(xué)習(xí)，覺(jué)得機(jī)器這些東西是無(wú)法取代他們的工作。
但差不多在十九世紀(jì)因?yàn)闀r(shí)代的改變，需求量越來(lái)越多，不得不以這個(gè)可以量產(chǎn)更多，更快的機(jī)器來(lái)取代工匠們的工作。后來(lái)這些老工匠們看到機(jī)器是如何代替他們的工作，而發(fā)現(xiàn)自己的技術(shù)已經(jīng)被淘汰已久。
在很久以前，當(dāng)網(wǎng)路還是以table作為架構(gòu), 類似這種 < font color = "red"> foo < /font > 被設(shè)計(jì)網(wǎng)頁(yè)廣泛的使用。
那時(shí)我才剛開(kāi)始接觸網(wǎng)頁(yè)設(shè)計(jì)，約2008年開(kāi)始，那時(shí)table的架構(gòu)已經(jīng)開(kāi)始的慢慢的被css取代, 常上的smashing magazine, web designer ledger, speckboy magazine, nettuts等這些部落格已經(jīng)很直接的植入css為下一代的網(wǎng)頁(yè)基本。每個(gè)閱讀的文章，都是在講關(guān)于semantic，干凈的HTML。
那時(shí)候要修改wordpress, blogspot, 都是下載一個(gè)theme structure, 然后透過(guò)css去修改, 想當(dāng)初我還覺(jué)得網(wǎng)頁(yè)設(shè)計(jì)怎可以如此困難。
以前的網(wǎng)頁(yè)只是很小眾，還記得十多年前，網(wǎng)頁(yè)可能就只有一頁(yè)，而且只是用來(lái)放放自己每天的生活日記，把自己喜歡的音樂(lè)放上去，而且還是midi的。
現(xiàn)在的網(wǎng)頁(yè)的scope卻很大, 從數(shù)十頁(yè)至百頁(yè)，且還可以每年賺十幾億的商機(jī)。
從table轉(zhuǎn)至css是網(wǎng)頁(yè)技術(shù)的小改變，卻沒(méi)想到這改變了下一代網(wǎng)頁(yè)的趨勢(shì)。
現(xiàn)在的網(wǎng)頁(yè)越來(lái)越大，跟以前的相比之下，已經(jīng)越來(lái)越復(fù)雜，也越來(lái)越重要，當(dāng)然，也可以賺更多的錢(qián)。
當(dāng)網(wǎng)站的需求越來(lái)越大，開(kāi)發(fā)團(tuán)隊(duì)也相對(duì)的會(huì)越來(lái)越多，現(xiàn)在比較重要的可能已經(jīng)不再是hand-code, semantic, 以及干凈的網(wǎng)頁(yè)。
反而是能夠快速開(kāi)發(fā)，更強(qiáng)大的技術(shù)是比較需要的。沒(méi)錯(cuò)－我們又得追上這個(gè)“改變”了。
當(dāng)然，那些十年前的網(wǎng)頁(yè)最佳技術(shù)等到現(xiàn)在也還是可以使用，我們無(wú)法否認(rèn)，只是目前網(wǎng)頁(yè)的改變比我們想像中的還要快。我們現(xiàn)在的網(wǎng)頁(yè)可能都要做出可以每天提供上萬(wàn)人的服務(wù)，并制造出上百萬(wàn)的業(yè)績(jī)。
我們應(yīng)該以不一樣的態(tài)度去看待這件事情。
我們可以把網(wǎng)頁(yè)分給三個(gè)利害關(guān)系的組群：
1. 客戶 – 付錢(qián)給我們制作網(wǎng)頁(yè)。
2. 使用者 – 將會(huì)使用我們網(wǎng)頁(yè)的人。
3. 開(kāi)發(fā)者 – 維護(hù)及開(kāi)發(fā)網(wǎng)頁(yè)。
一定要切記這三個(gè)組群，確保我們?yōu)檫@些組群做正確的選擇。
客戶是絕對(duì)不會(huì)管網(wǎng)頁(yè)到底是否semantic, 客戶也絕對(duì)不會(huì)去管你的id或class總共有多少。他們也不需要了解到是否能夠重復(fù)的使用id或class，這不是他們應(yīng)該煩惱的問(wèn)題，這應(yīng)該是我們開(kāi)發(fā)者應(yīng)該幫他們解決的問(wèn)題。
客戶想要了解的只是網(wǎng)頁(yè)的效率跟速度可以有多快多高。以最便宜及有效率的更新他們的網(wǎng)站。
使用者也不會(huì)管你的code，就算你是使用table，其實(shí)也不會(huì)有人知道的。不過(guò)使用者是比較在乎網(wǎng)頁(yè)速度跟穩(wěn)定性，試想一下，網(wǎng)頁(yè)如果慢的話，又導(dǎo)致瀏覽器當(dāng)?shù)舻脑挘墙^對(duì)不是我們想要的。
開(kāi)發(fā)者，也就是我們。會(huì)很在意我們的code文件有多整齊，有多方便合作，多方便維護(hù)，多方便擴(kuò)張，多方便修改。
如果新增兩個(gè)div會(huì)使我們方便維護(hù)，何樂(lè)而不為呢？
我們要為自己寫(xiě)code，同時(shí)要寫(xiě)的夠清楚給團(tuán)隊(duì)，寫(xiě)的有夠穩(wěn)定給客戶，寫(xiě)得效能夠好給使用者。
Semantic在前端是要考慮是否使用div或header, 有些字是否為h或p, 使用ul或ol. 關(guān)系在于文件的內(nèi)容，而不是管我們寫(xiě)的class或id的關(guān)聯(lián)性，或更加以直接的方式： < div class = "heading-one" >My page title< /div >
跟 < h1 class = "red" >My page title< /h1 >
第一個(gè)是不良的示范，所有的標(biāo)題應(yīng)該是以h去寫(xiě)mark up，而不是div. 就算class的關(guān)聯(lián)性有多好，不過(guò)文件上這是對(duì)于網(wǎng)頁(yè)沒(méi)有好處的寫(xiě)法。
第二個(gè)是正確的示范，文件上就會(huì)很清楚的了解這個(gè)標(biāo)題是很重要的，就算使用red的class，沒(méi)有css他還是無(wú)法了解此內(nèi)容的重要性。
實(shí)際上瀏覽器不會(huì)去閱讀你的css, 而是閱讀html文件, 再透過(guò)文件去搭配你css寫(xiě)好的class。所以你css class寫(xiě)的太好也沒(méi)用，因?yàn)閔tml根本就看不懂你的red是否重要，凡而是你的h1會(huì)告訴他說(shuō)他是重要的標(biāo)題。
很多人對(duì)于semantic的誤解，其實(shí)是命名的相關(guān)性，每當(dāng)我們寫(xiě)class的名字的時(shí)候，其實(shí)是件很令人懊惱的東西，建議是要考慮以后的維護(hù)性，以后這個(gè)class修改后會(huì)多久再次更新。
最直接的sample是:< strong class = "red" >$99.9< /strong>
.red {
color: red;
}
如果這時(shí)候客戶希望我們將更改顏色，那么，我們是否要這樣：< strong class = "red" >$99.9< /strong>
.red {
color: blue;
}
不過(guò)最好的建議，當(dāng)然是這樣：< strong class = "special-offer" >$99.9< /strong>
.special-offer {
color: red;
}
這樣的話是否更好呢？
寫(xiě)class的話, 是不需要semantic的，而是察覺(jué)性 (sensibility)。
我想講個(gè)其實(shí)是，時(shí)代正在慢慢的改變，雖然要跟上改變的速度是難的，要重新學(xué)習(xí)也不是件容易的事，不過(guò)這是事實(shí)，技術(shù)越來(lái)越成熟，自然而然有更好的東西一直出來(lái)。
以前只有單純的css, 現(xiàn)在有sass, 有l(wèi)ess, 有stylus.
以前只有html, 現(xiàn)在有haml.
以前只有javascript, 現(xiàn)在有jquery, 有coffeescript.
以前可能寫(xiě)一寫(xiě)就上線了, 現(xiàn)在還要調(diào)整網(wǎng)頁(yè)速度, 優(yōu)化, seo, 維護(hù), 等等等等~
網(wǎng)頁(yè)不論是技術(shù)或設(shè)計(jì)，商業(yè)模式，都正在改變。
但是，你跟上了嗎？
加微信獲取報(bào)價(jià)