學習編程技術，關注這個公號就夠了css
協做翻譯前端
原文：8 CSS Strategies for Writing Maintainable, Streamlined Front-End Code程序員
連接：https://dzone.com/articles/8-css-strategies-for-writing-maintainable-streamli-1web
譯者：rever4433, 邊城, 無若, 王練編程
寫基本的 CSS 和 HTML 是入門 Web 開發首先須要學習的事情之一。然而我遇到的不少程序顯然沒有真正的花時間去考慮前端開發的長期性和可維護性。安全
我認爲這主要是由於不少開發者在組織他們的 CSS/HTML 和 JavaScript 時沒有深刻地理解相關的策略。微信
對於我和咱們團隊來講，最重要的事情寫可維護的前端代碼。雖然咱們有好幾個客戶一直合做多年，但必定要記住，你永遠不會是在某個應用程序的惟一開發者。你的一次性代碼和配置僅僅對你有意義，這並不意味着它們對開發這個應用的下一任開發者有意義。框架
爲了避免讓本文太長，我今天會主要講述與組織 CSS 相關的內容。組織 JavaScript 有徹底不一樣的作法。ide
本文的目標是至少成爲一個規則，最好能成爲你編寫 CSS 的指南。我會鼓勵你找到本身的處理方式，但這裏的目標是使 CSS 一致、簡單、易於使用。工具
這裏有 8 個技巧用來組織 CSS，使之便於長期維護。
1.不要寫不須要的樣式
例如：在任何地方寫 display:block 時都須要注意。由於許多元素默認都有這種樣式。
再好比，定義繼承了你定義過字體大小的元素的字體大小。
這裏的目標是雙重的：
減小 CSS 文件的長度，這樣更容易在 CSS 文件中定位代碼位置。
明確 CSS 類實際須要作什麼，而不是定義一堆已有的垃圾樣式。
一個常見問題是有許多再也不使用的 CSS 樣式沒有清理掉，爲了簡潔起見，這些 CSS 樣式能夠徹底刪除。
2. 考慮把 CSS 看成可複用組件
若是你能夠定義可複用的 CSS 工具和組件來使用而不是把 CSS 元素看做每一個單頁特有的形式和元素，就會大大減小代碼的複雜性。
寫可複用的類來作這樣一些事情：
肯定你的設計在多個不一樣的頁面之間保持一致，你應該知道若是你改變了一個類的樣式，變化會表如今每個頁面上。
這樣寫 CSS 確實很快。多數時候，若是你把部分樣式定義爲一個工具或者類，你就不須要花大量的時間來更新和重建應用中已經存在於其它地方的樣式。
3. 在 CSS 中定義工具以使你的 CSS 更實用
咱們將 '工具' 定義爲這樣一種 CSS 類，它是爲某種特定的目標而生，而不是爲了表示一整個元素。
在流程的 CSS 框架，好比 Bootstrap 和 Foundation 中，你會常常看到對這一策略的應用。
在流程框架中能夠看到這樣一些例子：
好比，使用 .hide 以後，就不須要每次都寫一個類來隱藏頁面上的元素，你能夠直接在元素上使用 .hide 類，它會賦於元素 display: none; 樣式。
咱們已經建立了本身的工具文件並在各個應用之間共用，咱們使用一些公共工具來減小爲每一個元素寫特定樣式的需求。
關於這點，有一個不錯的例子，使用 margin 和 padding 工具。這裏咱們有一個 padding 工具的示例（咱們也定義了 margin 相關的工具，以及只有 padding-left 和 padding-right 的工具等）：
經過組合這些工具，咱們能夠保持空白像素一致，同時快速爲頁面作上標記，還不用寫大量的 CSS。
在定義工具的時候，你應該考慮到會屢次使用它們。若是是一次性的樣式，或者只是想組合一些經常使用的樣式，那麼最好是定義成專門的 CSS 類。
4. 避免嵌套，除非你真的須要它
有一些複選框的表單。 在這個特定的狀況下，你須要你的複選框內聯（並排）。
你要是試圖像這樣寫你的風格：
你意識到你須要列表元素中的一個連接其實是黑色的。 因此你試圖寫一個黑色連接的工具類：
這個.link - 黑色連接將被CSS的特殊性所覆蓋，而且將沒法壓倒.my-form li風格。
這多是您的意圖，如今要確保您的列表元素中的全部錨點標記是紅色的，可是你不知道將來的元素和可能作出的設計更改。
你可能會讀到這個問題，「好的 Corinne，可是你怎麼解決上面的問題呢？」
經過上面的例子，你應該明白錨標籤的顏色應該是一個遠離默認連接顏色的變體。
因此，在這種狀況下，我會100％肯定一個額外的工具類來處理紅色連接。因此這是一個在實踐中看起來像什麼的例子：
而後將其添加到HTML中的每一個li元素。
我會在這裏做出這樣的假設：這個紅色的連接將在某一天在應用程序的其餘地方被使用。 我不想將它嵌入到用戶表單中，由於那樣我就不得不在將來寫出另一種風格來解釋須要紅色連接的狀況。
另外，由於我將本身的懸停定義在本身的錨點上，因此紅色連接將會變成黑色懸停，而沒必要定義任何其餘樣式。
5. 利用 BEM 來防止過多的嵌套
BEM (Block Element Modifier) 策略能夠地真正防止過分嵌套。
使用 BEM 的一個例子是當你使用一個具備不少具體樣式的組件時，它會變得很複雜很混亂而且沒法使用 utilitiy 。
舉個上述那樣的例子：
從這個例子中你能夠看出，我定義的樣式表中 .profile__photo 是與 .profile 嵌套的，可是沒有使用嵌套的類。這就是 BEM 最厲害的地方，這也是爲何我推薦使用 BEM 。
6. 只在不得已時使用 !important
在一個類上定義 !important 是一種使代碼被有痛覆蓋的方法，特別是當你試圖處理 media 查詢時。
並且這對於移動端來講很麻煩。好比說，若是你但願在手機屏幕顯示某些內容，則必須使用另外一個 !important 類來覆蓋 .hide 類以在移動設備上顯示它。
我沒有找到一個合理的藉口來使用 !important ，除非你是在重寫別人以前放錯位置的 !important 類。
7. 有時候須要從新發明輪子，但請認真考量其餘可行選項
在客戶端項目中構建本身的網格 CSS 框架，這就是一個重複造輪子的例子。
據個人經驗，除非你想知道它是如何工做的，不然本身寫這些東西並無多大的好處。出現過不少本身構建的邊緣案例，並且也沒有理由不去用別人已經作得很好且免費的東西。
也就是說，本身造一個輪子多是一個很好的學習經驗 - 但這在應用生產中或許並不適用。
好吧，但 JavaScript 插件呢？
在談論 JavaScript 或 jQuery 插件時，我會說，對於那些與你使用的任何組件都很好集成的常見組件來講，狀況也是如此。 這裏有一些例子，例如： JavaScript 轉盤之間交換照片，或日期選擇器。
這裏的邊緣案例可使用一些帶有封裝組件邏輯（React，Ember，Angular等）的 JavaScript 框架插件。 若是你想要作的事情相對簡單，有時可能比將這些插件放到這些組件中更麻煩。
例如，若是我使用的是依賴於 jQuery 的項目，可是會在 React 中構建我本身的模塊，那麼我將使用基礎模塊或引導模塊（僅僅是由於編寫組件以便經過引入 jQuery 插入到 React 組件中）。
8. 在意你的前端代碼
最後，我建議你作的最重要的事情是在意你寫的前端代碼，掌握代碼，而且始終不斷地改進代碼（同時也要不斷提高本身！）。
在一個須要長期維護的應用程序和一個很難上手且老是出問題的項目之間，我相信不斷改進代碼是最大重要因素之一。
寫 CSS 時使用這八個技巧，你不只能夠節省你本身的時間，還能節省將來接手你代碼的開發者的時間。
你採起哪個建議來精簡你的 CSS 代碼？請在下方評論，讓我知道你的選擇。
推薦閱讀：
關注『編程互聯』公衆號，讓咱們一塊兒成長
長按關注公衆號
本文分享自微信公衆號 - 程序員開源社區（jkjishuzhan）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。