設計漂亮的樣式表不是一門暗黑藝術(如果用藝術家的眼光來看待這門藝術的話，那更多表現的是種對幸福的生活渴望和完美人生的追求. ps: 這是譯者找到的最靠譜的解釋.). 它需要持久的練習和全身心的投入, 但是, 有一些小竅門來幫你快速提公升, 讓你也成為乙個css高手.
再接下來的文章裡，我會演示一些自己在設計可讀性強, 維護性強, 並容易除錯的樣式表時用到的技術.
在所有的專案中我都遵循一種簡單的命名習慣. 這是一種簡單而有效的辦法來維護css檔案. 有很多設計師會給樣式表起一些模糊的名字, 比如main.css, 或者style.css. 我覺得檔名可以更細緻一點, 這樣的話, 你可以很快的知道每個檔案是做什麼的.
這是我的乙個客戶的**檔案結構.
css 命名慣例
style_all.css
包含重置和一些適用於各個瀏覽器和作業系統的css**. 而且最好把那些用內容管理系統中所見即所得編輯器生成的內容的樣式放在這個檔案裡, 比如鏈結的顏色和元素的樣式等等.
style_screen.css
這是包含整體樣式的主檔案. 一會兒我們會深入了解它.
style_screen_ie7.css
特別為ie7準備的樣式表. 我做過的大多數專案不需要特別準備乙個ie7的樣式表, 這裡只是讓大家更加理解我所說的命名慣例.
style_screen_it-ie7.css
這是相容所有ie7以下版本瀏覽器的樣式表.
style_print.css
當你去掉所有, 僅僅顯示好看而整潔的文字時就會用到這個用於列印的樣式表.
這個命名慣例很複雜. 比如你要專門為ie6準備乙個樣式表, 就可以命名為style_screen_ie6.css. 如果是針對便攜裝置, 就可以命名為style_handheld.css, 如此等等.
我在開發的商業內容管理系統, 有這樣乙個功能就是檢查樣式表檔案並自動使用適當的條件注釋. 將來我也許會發布那部分**
現在讓我們深入**一下主樣式表style_screen.css. 這個檔案將來會變得很大, 所以把樣式劃分成一部分一部分是非常重要的.
我會在樣式表的開頭宣告劃分成哪幾部分.
將css檔案劃分成許多部分
規定布局的結構, 定位基本的元素. 把頁面分成頭部, 內容部分, 側邊欄, 和頁尾. 在開發乙個新頁面時, 首先要做的是把整體的框架搭建起來, 而不要先考慮細節.
先定義基本的樣式結構
排版排版包括定義全域性和所有常見元素的字型. 定義那些會控制內容的元素的字型, 比如頁頭, 段落樣式, 列表, 引用等等.
把字型定義從布局樣式裡面劃分出來
布局設計
既然已經解決了定位和排版, 你現在就要把精力放在頁面設計上了.
如果這部分太長的話, 以後可以把它們劃分成更小的部分. 適當縮排, 保持**的層次感對維護樣式表很有幫助.
其他部分
通常我會把表單, 內容管理系統**等單獨分出來. 根據需要, 把自己專案的樣式單獨分成一部分.
一旦需要除錯或者修改從前專案的時候, 模組化**的優點就很明顯了. 瀏覽**, 並找到所需的**就變得容易很多.
最高端別的元素縮排最少. 它的下一級元素縮排一次. 再下一級縮排兩次, 以此類推.
適當縮排並保持父級子級的層級結構
這樣做不僅美觀而且可讀性強, 同時可以更容易的鎖定問題. 大量的空格的確會使檔案變大, 但你總是可以在發布之前壓縮css檔案.
比如, 頁面上的搜尋框出了問題. 而**必須在布局部分裡, 寫在父級側邊欄樣式的下面. 如果有適當的模組化和縮排, 你會發現找到你需要的**是多麼容易的事情.
有的設計師覺得把css屬性按字母序排列是乙個比較有效的方法, 因為這樣容易維護. 但我不太同意. 我覺得用以css屬性的型別來排列會更有效.
.selector
在上面的例子中, 屬性的劃分是按照: 控制內容的, 控制間距的, 以及塊級元素的視覺化(背景和邊緣)這些型別劃分的.
如果它們是按照字母序排列的, 就是下面這樣:
.selector
很顯然, css的可讀性大大降低了. 我通常先寫布局相關的屬性, 接著是內容屬性, 然後是間距和其他屬性.
其實以上這些並不複雜. 這些簡單的事情可以幫助前端開發者隨時保持清晰的思路. 漂亮的樣式表是禪意開發的第一步.
程式設計是一門藝術
stanley b.lippman 僅僅使用軟體的人們 通常意識不到編寫軟體有多麼困難。噢，設計部分和最初開發部分都很有趣。最困難的部分是使其正確執行 且執行速度足夠快 對於程式設計師而言，這就好比一餐開始時是美味的雙層牛奶巧克力咖啡乾酪餅，而結束時卻是菠菜奶油沙司。之所以說程式設計仍是一門藝術而不...
專案管理是一門藝術
在網上看到一位在微軟做pm 程式管理 漂亮女人寫的一篇文章，寫得很精彩，這也是自己曾經在工作中的體會，把內容貼在下面 曾經聽過乙個比喻,如果把乙個專案比作乙個大蛋糕,開發人員會切走一大塊,測試人員會切走一大塊,使用者體驗專家會切走一大塊,使用者教育人員也會切走一大塊,而剩下的所有東西 無論是剩下的大...
This is it 語言是一門藝術
最近一直在搞合作，每天能算娛樂活動的也就是早上聽聽英語了，哎，這日子，像我這種划水型選手，怎麼跟的上節奏啊。每天從醒過來就燃燒小宇宙到晚上回宿舍，at field全開，再加上我大狼院的畢業設計要中期檢查，要在下個星期完成基本設計。簡直要報警了。好吧，還說回英語，這乙個月還是聽得 jessie 直到前...