在我开始学习css时,发现掌握语法（构成编程语言之规则

《在我开始学习css时,发现掌握语法（构成编程语言之规则》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、前言在我開始學習CSS時，發現掌握語法（構成編程語言之規則和結構的集合）很簡單，因為有規則解釋如何寫碼。然而，要學習如何能讓CSS有條理且容易維護就不是那麼容易，而且要整理原本在想法不明確時所編寫之條理不清的CSS，更是難上加難。我帶著分享不斷嘗試與錯誤之經驗的想法編寫本書，希望對讀者有所助益；我希望當初在開始學習的時候，就有這本書可參考。目標讀者雖然希望任何編寫CSS的人都能從閱讀本書中受益，但我所設定的目標讀者是那些已經能做出使用者介面，但缺乏經驗或者想法以理解如何能讓鬆散的樣式碼組織成更大架構的人。目標讀者已瞭解CSS的語法，但不一定已掌握其之所以如此運行的原由。他們可能也還不

2、知道如何將樣式碼更完善地建構成更易於維護、擴充與協作的型式。本書目標寫這本書的目的是想協助剛起步的讀者更容易理解CSS的一些細節，其中說明了CSS可能會很難寫和測試的原因，以及CSS為何值得我們花時間進行重構的理由。本書涵蓋了下列主題：•重構是什麼，它有何益處，以及它跟軟體架構有何關聯。•幾個常被誤解的CSS面向，包括串接（cascade）、選取器特定度（selectorspecificity）與盒框模型（boxmodel）。xii

3、前言•如何作出明智的決定且持續施行以編寫出更完善的CSS。•如何透過寫碼準則與樣式庫維護編寫完善的CSS。•如何檢測CSS。•如何組織CSS。•重構CS

4、S的策略。•評估重構是否成功的方法。本書將提供必要的知識，讓讀者可立即著手建造出更完善的CSS碼庫（codebase），在團隊中進行開發時，能有更容易維護的碼庫可用。因此我鼓勵讀者反覆地閱讀適用於手邊工作並與其概念相關的章節。未涵蓋的主題本書著重在解釋概念，這些概念本質上不一定與技術有關，因此有一些主題並不是本書討論的重點。沒有涵蓋的主題包括：CSS屬性瞭解可用的CSS屬性對編寫CSS而言是必要的，但本書並不會介紹這些屬性。雖然有時還是會建議可使用哪一些屬性，但最好還是找本書跟著學比較好，像EricMeyer所著的CSS大全（CSS:TheDefinitiveGuide）與Chris

5、topherSchmitt所著的CSSCookbook（二本皆由O’Reilly出版）就是很好的學習資源。讀者也可以連上一些信譽卓著的網站如MozillaDeveloperNetwork（https://developer.mozilla.org），學習CSS。架構HTMLHTML與CSS常被併用在建置使用者操作介面的工作上，二者交互影響。我們會討論如何切斷CSS與HTML間的耦合，但不會討論到編寫與架構HTML方法的優缺點。前端效能前端效能是建造任何網站的重要面向，也是一個相當有趣的議題。但因本書只討論CSS重構，我們只會概要地談到這方面的內容－因為牽涉到其他的主題，這個議題的範圍

6、其實相當廣泛。SteveSouders（https://stevesouders.com）有寫了幾本關於效前言

7、xiii能的好書，而PaulIrish（http://www.paulirish.com）、NicoleSullivan（http://www.stubbornella.org）與StoyanStefanov（http://www.phpied.com）在這方面也都有豐碩的研究成果可供參考。Google亦提供一些指引與工具（https://developers.google.com/speed/pagespeed），對前端效能的校調工作多有助益。CSS框架CSS框架經常變動

8、並在實作上強加進自己的規則，所以本書不會涵蓋這些。不過，我期待您在閱讀本書後，能夠有能力檢視任何一種框架的原始碼，並對其實作有自己的一番見解。較不知名或較不流行的瀏覽器網路上可以找到一大堆瀏覽器，不過我只會討論主要的瀏覽器－MicrosoftEdge（前身為InternetExplorer）、Safari、Chrome以及Firefox，包括它們的行動版－因為它們佔了絕大多數的市場。慣用術語雖然本書的目標讀者已具有CSS的一些背景知識，但可能還是會看到一些不熟悉的術語，底下列出本書所使用的一些術語，大致上有：•選取器（selectors）是用來選取一個或一組欲設定樣式之元素的模式（p

9、atterns）。•宣告區塊（declarationblock）是標示出應被套用到HTML元素上之屬性與值的一組規則。•屬性（property）表示應該被套用到所選元素上的樣式，屬性會帶有被指定的值。•規則集（ruleset）由一個宣告區塊所含括的一或多個選取器所組成。在範例P-1中，瀏覽器會依照指令將所有段落中的文字設定成藍色且大小為16px（像素，pixels）。p是選取器，它通知瀏覽器有哪些元素的樣式需要調整。被大括號圈住的部份是宣告區塊，其中包含了