網頁製作知識:淺談CSS編碼與組織技巧

來源:互聯網
上載者:User
css|編碼|技巧|網頁

  如何讓 CSS 代碼簡潔而易於編寫?這恐怕是許多開發人員都關心的問題。我想,大概沒有什麼魔法,可以保證一下就把你的樣式表縮小到百分之多少,但合理的 CSS 編碼與組織技巧,的確能夠協助你的更有效率地寫出更清晰高效的代碼,自然,樣式表大小的縮減還能減少下載的時間。

  組織你的樣式表

  儘管我們有種種 CSS 的開發工具,比如 TopStyle,比如 StyleMaster,它們可以讓你對當前這個樣式表裡面定義了哪些規則,涉及哪些 class,哪些 ID 一目瞭然,但這不等於說你的樣式表就組織清晰了,隨寫,隨看,隨改大概是我們常用的開發方式,一開始樣式表還有點層次,後面這裡加一點,那裡加一點,就越來越亂了。所以不妨考慮規範一下你的寫作方式。

  大概有兩種組織方式,一種是我們常用的,把所有的描述同一個元素 (和它的子項目) 的規則都放到一起來,那麼如果需要查閱頁面中某個元素究竟受哪些規則影響的時候,就不必在整個樣式表中翻來翻去了。
 
  另一種也值得參考,即,把描述某些特性的規則放到一處,把描述另一些特性的放到另一處,比如說關於顏色的定義,放到 color.css 檔案中,描述字型的定義,放到 font.css 中,描述布局的定義,放到 layout.css 中,這也能讓你的樣式表結構清晰,方便理解。最大的優點是,如果你希望換一套色彩配置,可以只修改一下 color.css,完全不必擔心其他的規則是否會影響頁面的顏色。

  在傳統的程式設計中,我們常常提到程式的風格是如何重要,培養良好的編碼風格甚至遠比掌握程式的文法和語義重要,儘管 Web 設計者不一定要掌握那些程式設計的技巧,但培養良好的 CSS 編寫風格的確是很有用的。

  使用屬性縮寫

  屬性縮寫的介紹可以參考其它相關文章,這裡我們來小結一下:
 
  首先,有這麼幾個常用的屬性縮寫:

   font
   background
   list-style
   margin
   border
   padding

  多數是可以把幾個常規屬性合并到一起使用的,也就是說,可以給這些簡記屬性賦予好幾個值,每個值之間用空格分隔。

  第三,margin, border 和 padding 都遵循中順時針原則,如果給定了四個值,從上方開始每次順時針轉 90 度。

  如果給定了三個值,則是上側一種,左右同一種,下側一種。

  如果給定了兩個值,就是上下一種,左右一種。

  如果只給了一個值,那就是都一樣。

  簡記屬性(屬性縮寫)的使用,見仁見智,一方面,它的確是可以大大縮短代碼 (如果用得頻繁的話),另一方面,修改的時候又未免帶來不直觀和不方便。

  利用繼承和預設值

  同樣參見 書寫高效的 CSS 中的相關章節,我想,這也得斟酌使用,首先,繼承和預設值在 W3C 標準中都沒有嚴格 (must) 的規定 (BTW, 就算有又如何呢?),瀏覽器未必真的會像你預期的那樣去實現,某些屬性的預設值真的是 0 嗎?在所有瀏覽器裡都是 0 嗎?需要反覆嘗試後總結經驗;再者,如果代碼中含有過多的這樣的“隱喻”,就未免不大好讀了,某某元素會顯示出某某特性,乃是繼承自它的父元素……在編寫樣式表的當天你可能還清楚,過一段時間忘了,就會很奇怪為什麼不曾定義這個規則卻又顯現出那個特性了。

  所以建議,如果你要用到繼承和預設值來簡化代碼的話,最好寫下一些注釋予以說明。

  利用多個 class 和多元選擇符

  一個 HTML 元素可以屬於多個類,比如這樣:

<td class="subtotal negative">(-$422.72)</td>

  你可以給“合總”的那些表格欄設定一個樣式,再給包含負數的那些表格欄設定一個樣式,把它們疊加在上面:

 Example Source Code [www.52css.com]
.subtotal {font-weight: bold;}
.negative {color: red;}

  這種特性有時能夠讓你很靈巧地實現一些功能,即縮短了 HTML 程式碼,又清晰了 CSS 規則。
 
  關於多個 class 的詳細說明 (包括選擇符的相容性測試..) 請參考52CSS.com的相關文章介紹。

  小結

  選擇一種 CSS 規則的組織方式,並堅持使用它!
  謹慎地使用一些雖然能夠簡短代碼,但會影響可讀性的書寫方式!
  適時地瞭解一些已經普遍實現的 CSS2 新特性,能夠大大方便你的設計!



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。