談一點css，程式員視角

    做Web前端開發，網頁布局和美化不可避免，心想不就div和css嗎，標籤、屬性、樣式沒啥了，可不曾想和靜態頁面設計人員打交道竟成了可怕的夢魘，而且一次又一次。當我憤怒地做起兼職設計，修改那些垃圾代碼時，心中便暗中發誓怎樣才能避免這樣的情況再次發生，那些樣式能不能優雅一些呢？前段時間也看過某大大的文章，確實啊，美工們全活在烏托邦！美工如果不瞭解一些技術實現和商務程序的話，說實話，很難和開發人員耦合好!下面簡單說一點自己的看法吧。

1.絕不重複，讓你的css優雅起來
    做布局設計，大局觀很重要，需要抽象出來哪些是必須和多次使用的元素，一般div和ul，li吧，再結合介面設計圖抽象出它們的共性，如border、padding、white-space、font-size等等，做全域處理。盡量的減少css代碼量，例如如果全域的padding:0px;那麼在某個具體的標籤中就不要加上這個了。不重複的設計不僅代碼量小，優雅整潔，而且另外的好處就是維護方便，應對變化輕鬆自如。

2.限制全域的勢力，明確管理範圍
    第一條說的意思就是鼓勵用全域解決每個class和標籤的細節設計過於繁冗的問題，但這樣真的就算優雅了嗎？優雅的標準是什嗎？至少應該是沒有“安全隱患”吧。何謂“安全隱患”，一次經曆讓我深感明確職責的重要性。全域一旦使用，它會對頁面的相關所有標籤起作用，這樣做它的權利是不是太大了點呢。那次的經曆就是一個發表文章的介面，用了一個可以產生各種樣式和直接支援從word粘貼功能的編輯器（Fckeditor），而css裡不乏p、span、div等全域樣式定義。比如說p標籤，設計人員的原意是用來做文章標題的樣式的，用了綠色的大字型，結果編輯器產生的程式碼裡面就含有p標籤（直接從word貼過去的話，產生的垃圾樣式超多），便出現了文章內容大段大段的綠色大字型的壯觀場面。
    顯然只遵循第一條是遠遠不夠的，全域有好處，但勢力未免太大了點，結合起來的用當然最好。其實結合起來也很簡單，如果你規定哪個地區的所有li用某個樣式，你只需要用#地區id li{...}這樣寫就可以，地區之外的li絲毫不會收到影響。採用這種方式的原則是你明確知道地區內的所有可能出現的標籤和其所附帶的樣式。做好每個地區後，若每個地區有共性，在將共性抽離出來作為全域。這樣解決了“安全隱患”，便又優雅起來了。當然，想上面提到的編輯器所帶來的災難，根本原因就在於不知道編輯器會產生怎樣的標籤和樣式的前提下，貿然的採用了全域，無形中擴大了全域的勢力，讓它“越權”管了違背本意的地區和標籤。如果考慮本條原則，這個情況是可以避免的。

3.在設計中加入一點動態商務邏輯思維
    要求美工設計一段grid內嵌html代碼的樣式，發給我一看效果不錯，可當我準備直接結合資料嵌入時，麻煩來了。怎麼全是用id標識的樣式啊，grid是啥意思啊，不就是在頁面輸出樣式重複但內容不同的東西嗎。用了id那豈不是我一頁輸出十條記錄，這也頁面將出現十個相同的id？那這是誰的錯呢？開發人員說要一個酷酷的樣式，你設計人員確實原原本本的做到了又酷又整潔。可當結合起來還是出現了問題，從程式員的角度來看待這個問題，我希望設計人員有一點動態意識。類似的情況還包括設計人員應該在設計樣式時把什麼滑鼠經過，滑鼠點擊等效果做齊了，內容編號的地區高度不要做死了（最好自適應就好了），內容超過時怎麼處理等等。

4.跨解析度與跨瀏覽器
    這兩點應該成為設計人員交工前必須的檢查環節。跨解析度意味著請盡量採用百分比來處理寬度。百分比的一個好處還在於當改變最外層元素的寬度時可以很輕鬆的適應這種變化，而不用對每個標籤的width進行修改。跨解析度還能識別那些依靠margin-left：**px;的“假置中”情況。跨瀏覽器是個累人的活，需要不斷測試，涉及到很多css的應用技巧，在這裡不一一羅列，這也不是一個開發人員開的事兒，只是必須作為硬性要求來規定。要特別注意各瀏覽器對padding等標籤的解釋差異，有時一些padding=1px，2px的情況，跨瀏覽器時出現差異，設計人員居然沒看出來，等到搞開發的發現，確實有點鬱悶。

5.更加友好的和開發人員耦合
    做好前面那些，這個設計人員已經相當的出色了。但還可以更好。談到和開發人員的耦合問題，這意味著開發人員完全不需要擔心和讀懂那些css，而只需要操縱和呈現資料，完成商務程序即可。以前有一個美工，和他合作就非常舒服，他會經常在設計好的頁面上加入“這裡放新聞，這裡最多隻能容納50個字”等等提示，開發人員一看就懂得處理。可是那樣的感覺從那之後我再也沒有享受過。這算一種境界也算是開發人員的期望吧，呵呵。

    我非美工（這裡的美工指頁面配置和樣式設計）人員，上面所談難免膚淺和業餘，更多的代表Web前端開發人員的一點點心聲吧，輕拍。