CSS: 試試,然後做的更好

賴信濤發表於2015-08-28

你有沒有擔心過自己寫的 CSS 都錯了?有沒有想過會錯過一些讓一切變得更好更簡單的新方法?是不是想在 CSS 方面更有自信呢?

那在這方面你和 Anna 肯定感同身受:

我的 CSS充滿了自我懷疑。現在 class 使用什麼樣的名字系統更合適呢?以後什麼又是最好的?什麼是差的?

——Anna Debenham (@anna_debenham) November 13, 2014

如果你也寫了很多 CSS,但是從來沒有過這樣的疑慮,那麼就比較令人擔心了。要麼就是你頂級聰明,要麼,呵呵,你懂的

我最近寫 CSS 的方法是:儘管嘗試,做的更好。我不是想要宣揚特殊的方法論或者嚴格的規則。這更像是一些寬鬆的法則,保證事情在可控的範圍內,積極地嘗試,然後做的更好一些。

警告:這是我個人的方法。我工作的專案幾乎只有我自己負責 CSS。從最近 css-tricks 上的投票來看,其中55%也同樣適用於你。我推測,和你一起工作的人越多,我的建議的作用就越小。 //譯註:原文 csstricks 網站邊欄有一個投票。

以下就是詳細的法則:

不要懶惰。你什麼時候偷懶了,自己心裡都清楚。比如對某個問題你喜歡草草的快速修正,而不是徹底瞭解這個問題。或者是哪個檔案看起來合適就立馬將 CSS 放進去而不是想想它到底該放在哪裡。又或者是當某個場景明顯需要新的模式時你卻背道而馳。

使用你喜歡的方式。知道嗎?在模組中我喜歡光明正大地使用子選擇器。.module > h2這種形式經常出現在我的 CSS 中。嚴格的方法論肯定不支援這種做法,但是我可不管。在它出錯之前,我會一直這麼使用,但是到現在為止都是對的。如果它出錯了,我再改。原因正如我之前所提到的。

用你喜歡的方式進行命名。如果讓我根據某個規則來命名,我腦子裡肯定會一團糟。我應該會花上一兩天的時間來接受這個規則,並且重新進行管理。我們的專案完全是根據我自己的愛好進行命名的。總體上來說,我感到更自在,更高效。

使用自己覺得高效的工具。我不會推薦什麼工具,因為好的工具是因人而異的。如果我覺得某個工具很有用,我就會去用。只要它能節省時間,做出更好地效果,更好地組織,解決效能問題,自動做出最佳選擇,不管它是什麼,我用了。

有一條原則是我一直以來堅信的:在整個專案中保持選擇器的低特異性。結合 Harry 的特異性圖表可以很好地理解這句話。特異性是會逐漸升高的,因此要防止一開始就產生高特異性,否則它會很快成為一個問題。可以考慮多用:.class{}

有目的性地重新訪問頁面的各個部分。目的不僅僅是檢查各個部分的 CSS 良好,還要試圖做的更好,適用於大多數人。我發現每次我重新訪問一個地方,都是做最後潤色的一個機會,這讓我對舊程式碼更有自信。

相關文章