淺談css寫法跟html的架構

              您的位置: 首頁 > > 建站常識 > > 詳細內容

              注: 此文章會講多關于CSS跟HTML的前端。

              很久很久以前,在工業革命時代,差不多1700~1800年,人類發明了許多商業量產的新技術,雖然傳統手工的工匠們還是得以保持工作,卻不肯邁進學習,覺得機器這些東西是無法取代他們的工作。
              但差不多在十九世紀因為時代的改變,需求量越來越多,不得不以這個可以量產更多,更快的機器來取代工匠們的工作。后來這些老工匠們看到機器是如何代替他們的工作,而發現自己的技術已經被淘汰已久。

              以前的網頁

              在很久以前,當網路還是以table作為架構, 類似這種 < font color = "red"> foo < /font > 被設計網頁廣泛的使用。
              那時我才剛開始接觸網頁設計,約2008年開始,那時table的架構已經開始的慢慢的被css取代, 常上的smashing magazine, web designer ledger, speckboy magazine, nettuts等這些部落格已經很直接的植入css為下一代的網頁基本。每個閱讀的文章,都是在講關于semantic,干凈的HTML。
              那時候要修改wordpress, blogspot, 都是下載一個theme structure, 然后透過css去修改, 想當初我還覺得網頁設計怎可以如此困難。

              以前的網頁只是很小眾,還記得十多年前,網頁可能就只有一頁,而且只是用來放放自己每天的生活日記,把自己喜歡的音樂放上去,而且還是midi的。
              現在的網頁的scope卻很大, 從數十頁至百頁,且還可以每年賺十幾億的商機。

              從table轉至css是網頁技術的小改變,卻沒想到這改變了下一代網頁的趨勢。

              現在的網頁

              現在的網頁越來越大,跟以前的相比之下,已經越來越復雜,也越來越重要,當然,也可以賺更多的錢。

              當網站的需求越來越大,開發團隊也相對的會越來越多,現在比較重要的可能已經不再是hand-code, semantic, 以及干凈的網頁。
              反而是能夠快速開發,更強大的技術是比較需要的。沒錯-我們又得追上這個“改變”了。

              當然,那些十年前的網頁最佳技術等到現在也還是可以使用,我們無法否認,只是目前網頁的改變比我們想像中的還要快。我們現在的網頁可能都要做出可以每天提供上萬人的服務,并制造出上百萬的業績。
              我們應該以不一樣的態度去看待這件事情。

              我們可以把網頁分給三個利害關系的組群:

              • 1. 客戶 – 付錢給我們制作網頁。

              • 2. 使用者 – 將會使用我們網頁的人。

              • 3. 開發者 – 維護及開發網頁。

              對于正確的組群做出適當的選擇

              一定要切記這三個組群,確保我們為這些組群做正確的選擇。

              客戶

              客戶是絕對不會管網頁到底是否semantic, 客戶也絕對不會去管你的id或class總共有多少。他們也不需要了解到是否能夠重復的使用id或class,這不是他們應該煩惱的問題,這應該是我們開發者應該幫他們解決的問題。
              客戶想要了解的只是網頁的效率跟速度可以有多快多高。以最便宜及有效率的更新他們的網站。

              使用者

              使用者也不會管你的code,就算你是使用table,其實也不會有人知道的。不過使用者是比較在乎網頁速度跟穩定性,試想一下,網頁如果慢的話,又導致瀏覽器當掉的話,那絕對不是我們想要的。

              開發者

              開發者,也就是我們。會很在意我們的code文件有多整齊,有多方便合作,多方便維護,多方便擴張,多方便修改。
              如果新增兩個div會使我們方便維護,何樂而不為呢?

              我們要為自己寫code,同時要寫的夠清楚給團隊,寫的有夠穩定給客戶,寫得效能夠好給使用者。

              SEMANTIC

              Semantic在前端是要考慮是否使用div或header, 有些字是否為h或p, 使用ul或ol. 關系在于文件的內容,而不是管我們寫的class或id的關聯性,或更加以直接的方式:
              < div class = "heading-one" >My page title< /div >

              < h1 class = "red" >My page title< /h1 >

              第一個是不良的示范,所有的標題應該是以h去寫mark up,而不是div. 就算class的關聯性有多好,不過文件上這是對于網頁沒有好處的寫法。
              第二個是正確的示范,文件上就會很清楚的了解這個標題是很重要的,就算使用red的class,沒有css他還是無法了解此內容的重要性。

              實際上瀏覽器不會去閱讀你的css, 而是閱讀html文件, 再透過文件去搭配你css寫好的class。所以你css class寫的太好也沒用,因為html根本就看不懂你的red是否重要,凡而是你的h1會告訴他說他是重要的標題。

              很多人對于semantic的誤解,其實是命名的相關性,每當我們寫class的名字的時候,其實是件很令人懊惱的東西,建議是要考慮以后的維護性,以后這個class修改后會多久再次更新。
              最直接的sample是:
              < strong class = "red" >$99.9< /strong>
              .red {
              color: red;
              }

              如果這時候客戶希望我們將更改顏色,那么,我們是否要這樣:
              < strong class = "red" >$99.9< /strong>
              .red {
              color: blue;
              }

              不過最好的建議,當然是這樣:
              < strong class = "special-offer" >$99.9< /strong>
              .special-offer {
              color: red;
              }

              這樣的話是否更好呢?
              寫class的話, 是不需要semantic的,而是察覺性 (sensibility)。

              我想講個其實是,時代正在慢慢的改變,雖然要跟上改變的速度是難的,要重新學習也不是件容易的事,不過這是事實,技術越來越成熟,自然而然有更好的東西一直出來。

              以前只有單純的css, 現在有sass, 有less, 有stylus.
              以前只有html, 現在有haml.
              以前只有javascript, 現在有jquery, 有coffeescript.

              以前可能寫一寫就上線了, 現在還要調整網頁速度, 優化, seo, 維護, 等等等等~

              網頁不論是技術或設計,商業模式,都正在改變。
              但是,你跟上了嗎?

              龍創網絡憑借多年的網站建設經驗,堅持以“幫助中小企業實現網絡營銷化”為宗旨,累計為3000多家客戶提供品質建站服務,得到了客戶的一致好評。如果您有企業網站建設網站改版網站維護域名注冊主機空間手機網站建設網站備案等方面的需求...
              請立即點擊咨詢我們或撥打咨詢熱線:0551-63652142,我們會詳細為你一一解答你心中的疑難。 在線咨詢客服

              相關閱讀

              猜您喜歡

              Copyright © 2011- 合肥龍創網絡科技有限公司   互聯網備案號:皖ICP備11008473號-5

              在線
              客服

              在線客服服務時間:9:00-18:00

              客服
              熱線

              0551-63652142
              工作日客服熱線

              微信
              咨詢

              加微信獲取報價
              頂部
              夫妻性生活视频 - 视频 - 在线观看 - 精彩短片 - 雨爱网