CSS使用八大基本原則
這里向大家描述一下CSS使用的八大基本原則 ,比如簡寫的使用,使用多種簡寫方法,盡量減少了您的文件,同時也減小了網站的加載時間。此外,它不僅可以更容易地組織你的代碼,而且對于未來修改代碼提供了方便。
成為***CSS設計師的8大技巧
CSS是一個非常強大的網站設計標記語言。雖然你可能會認為,任何人都可以轉去寫CSS代碼,但是為了確保您在正確的軌道上,這里有如下8項CSS原則,每個網頁設計師應該遵循。
1、W3C驗證
如果你是1個正在寫CSS編碼的人員,那么建議您每次對您所創建的CSS代碼進行驗證。但是,有很多設計師卻在這個重要的一步跳過。驗證您的代碼清理反饋的任何問題,確保它的工作對訪問者友好。除了驗證你的CSS文件,你也應該驗證您的HTML或XHTML文件。驗證這些文件之前,請確保您已經聲明了正確的HTML或XHTML的doctype。聲明您的doctype似乎是一個簡單的細節,但很多設計師經過很多次驗證不通過以后才發現原來是因為他沒有聲明doctype。
2、文件
無論你的項目是一個人單干還是團隊協作,很重要的是文件創建工作。如果您是在團隊中單人項目,總有機會,你的單人項目將最終演變成一個團隊項目,如果發生這種情況,手頭上有文件會變得很多,創建好文件歸類與名稱,寫好注釋,協作更方便。即使在如果你是個人單干的項目,當您在創意或使用上突然想用到某些文件,您卻不知道放在哪去了?當您想找到某段代碼,卻發現因為沒有注釋變得非常難?
涉及到創建CSS代碼的注釋文件,大多數設計師的自然將它放入把它直接關系到他們的代碼/*和*/中。技術上來說這種做法沒有什么不正確的。然而,注釋直接加入到您的CSS代碼會增加該文件大小,從而增加加載時間,減緩一個網站的整體性能的大小。如果你想成為***的CSS代碼編寫員,你應該將注釋寫在一個單獨的文件里。
雖然我知道這做法很有效,但是還是有很多人不同意這種做法。如果你拒絕將注釋寫在一個單獨的文件中,退而求其次,您可以使用CSS壓縮機(事實上,即使您將注釋寫在一個單獨的文件中,你仍然可以使用這個CSS壓縮機)。當然您也可以從谷歌搜索更好的CSS壓縮機。
3、對Hacks說不
Hacks是為了讓CSS編碼在不同瀏覽器與平臺中維持網站正常顯示的做法。盡管在社會上Hacks已經成為一個可以接受的做法,這并不意味著“CSShacking”是你應該遵守的原則。這種設計方法的問題是,它意味著你為了解決問題而將標準的CSS變得更復雜。雖然你可能認為一個或兩個Hacks不會傷害任何人,但是這種思維可以對您的整體設計思想產生負面影響。
4、不濫用的div
由于div的提供了高度的靈活性,很容易讓新人過度使用他們。為了避免過度使用DIV標簽,你應該在寫HTML代碼的時候總是問自己是否有一個實際的HTML標記。例如,你為什么不使用HTML標題標記,例如H1和H2?
一旦你開始考慮到了div的問題,你很快就會使用適當的HTML標記,而不是自動創建一個新DIV。它不僅可以減少代碼量,而且還會給你的代碼更合理的加載時間。
5、Class類的命名
如果你問一個新的設計師,他們決定如何命名Class,他們可能會說,這并不重要。雖然從技術上來說,CSS類的命名沒有什么嚴格的要求,但我們必須糾正那些錯誤的做法。
假設您要創建一個類來控制網頁上的某部分。比如1個盒子將位于頁面底部,它包含讀者的評論和黑色的填充背景,很多設計師也許會隨便命名,或是叫“黑色底部”之類的。那么,我們會建議命名為“評論”。因為如果您一但決定更改背景顏色為藍色或是不把他放在頁面底部,那么“黑色底部”這個名稱就再不適用了。
6、使用簡寫
一旦你習慣簡寫方式,它也是您成為一個好的設計師最有效的做法之一。
使用多種簡寫方法,盡量減少了您的文件,同時也減小了網站的加載時間。此外,它不僅可以更容易地組織你的代碼,而且對于未來修改代碼提供了方便。
7、不要忘記打印機作為一個優秀的設計師,你應該更傾向于熱愛技術,因為你是少數的一部分,生活和呼吸在技術中。不過,由于人們仍然需要打印出來自互聯網的信息,那么您要考慮使CSS內容對打印機友好。您的同行欣賞您所創建的網站,也許他們有興趣想了解您的布局,也許他們打算將您的CSS打印出來參考,所以作為好的設計師請不要忽視打印機。
8、永不停止學習
你可能認為這***的原則聽起來陳詞濫調,但也可說是8條中最重要。如果你致力于成為***的設計師,您需要確保您一直致力于擴大你的CSS知識。幸運的是,如果你愿意,這很容易做到,并繼續你的CSS教育。只需鍵入“CSS”到谷歌,你會看到有48300.0萬結果供您瀏覽。
除了來自網絡上的學習,你也可以和同事,朋友,書籍上學,直到您成為CSS專家,成為***的設計師。
【編輯推薦】
- 實例解析CSS中display屬性使用
- CSS樣式實現快速定位bug的六大技巧
- CSS中link和@import的區別
- CSS2.0中page-break-after屬性用法
- 技術分享 使用不同CSS樣式兼容多種瀏覽器