編寫CSS代碼的8個策略

1、編寫css代碼的8個策略編寫基本的css和html是我們作為web開發(fā)人員學習的首要事情之一。然而，我碰到的無數(shù)應用程序明顯沒有人花時光真正考慮前端開發(fā)的長期性和可維護性。我認為這主要是由于許多開發(fā)人員對組織css / html和javascript的策略缺乏深刻的理解。在我和我們團隊的觀念中，編寫可維護的前端代碼十分重要。盡管我們有一些用法了多年的客戶端，但要記住你永久不會是唯一一個工作于應用程序的人。僅僅由于你的一次性元素和配置對你故意義，并不意味著它們對下一個可能繼承應用程序的人故意義。為了防止這篇文章太長，我今日將主要研究css代碼。javascript代碼是另一個徹低不同的麻煩問題。

2、這篇文章的目的不在于規(guī)章手冊，而在于你正在編寫css時的指南。希翼能協(xié)助大家找到自己的流程，而這篇文章的目標是讓你的css全都，容易，易于用法。下面是8個保持css有條理和易于長久維護的秘訣。1.不要寫不需要的樣式定義例如：編寫display:block;時要注重，由于無數(shù)元素默認有這個樣式。另一個例子是在元素上定義字體大小，它將繼承你正在定義的正文字體大小。目標是雙重的：削減css文件的長度，以便掃瞄。明確你的css類需要做什么，而不是定義一堆已經(jīng)產(chǎn)生的垃圾。這里有一個常見問題是css沒有清理整潔，此時，為了簡潔起見，可以徹低刪除。2.將css看作可重用組件不要將css元素視為每個單獨頁面上

3、的特定表單或元素，假如你可以定義可重用的css有用程序和組件以供自己用法，則可以削減無數(shù)復雜性。編寫旨在重用的類的作用：確保你的設計在不同的頁面之間保持全都。當你在無數(shù)頁面上分享css類時，你知道當你轉(zhuǎn)變這個類時，它會在每一個浮現(xiàn)的頁面發(fā)生轉(zhuǎn)變。這使得編寫css真的很快。首先，假如大多數(shù)樣式被定義為你所知道的有用程序和類，那么你就不必花費大量時光刷新和重新創(chuàng)建應用程序中已存在的樣式。3.在css中定義有用工具來干你的css我們將’utilities’定義為一個css類，事實上它只用來做一件特定的事情，而不是封裝囫圇元素。你會看到這個策略常常用于流行的cs

4、s框架，如bootstrap和foundation。在這些流行的框架中你所看到的一些例子是：例如，用法。hide，就不必每次想要在頁面上躲藏元素時就得編寫一個新的類——你只需要在你的元素上加上。hide類，它會使元素display: none; 。我們寫了一些有用程序文件，這些文件在應用程序之間分享，用法一些常用的有用程序可以削減為每個元素編寫特定樣式的需求。一個很好的例子是我們?nèi)绾斡梅╩argin和padding有用程序。下面是padding有用程序的一個容易例子：通過結(jié)合用法這些工具，我們可以與我們間距的像素數(shù)保持全都，并且可以迅速標志頁面，而不必編

5、寫十分多的css。有用程序背后的理念是，你認為你可能會不止一次地用法它們。假如它是一次性樣式，或者假如你認為組合樣式會常常用法，那么可能它作為css類將可以更好地工作。4.除非肯定需要，否則避開嵌套假設有一些復選框的表單。在這個特定的狀況下，你需要復選框內(nèi)聯(lián)（并排）。所以你試圖像這樣寫樣式：然后在這過程中，你意識到你需要列表元素中的一個鏈接事實上是黑色的。所以你試圖為黑色的鏈接編寫一個工具類：此處。link–black鏈接將被css特別性所籠罩，并且將無法壓倒。my-form li a樣式?，F(xiàn)在你可能想要確保列表元素中的全部錨標志是紅色的，但是你不知道將來的元素會怎么樣以及

6、可能會對設計做出什么樣的更改。你可能會問，好的親，那么你怎么解決上面的問題呢？通過上面的例子，你應當明了錨標簽的色彩應當是一個遠離默認鏈接色彩的變體。所以，在這種狀況下，我會100確定一個額外的工具類來處理紅色鏈接。下面是實踐中可能的處理例子：然后將其添加到html中的每個li元素。我在這里作出的假設是：某一天，此紅色的鏈接將在應用程序的其他地方被用法。我不想把它嵌入到用戶表單中，由于那樣我就不得不在將來編寫另外一個樣式來解釋需要紅色鏈接的狀況。另外，由于我將自己的懸停定義在自己的錨點上，所以紅色鏈接將會變成黑色懸停，而不必然義任何其他樣式。5.利用bem防止嵌套能夠真正防止過度嵌套的一個策略

7、是名為bem（block element modifier）的命名策略。用法bem的一個很好的例子就是當你有一個真正詳細的樣式的組件時，假如用法有用程序會太棘手和復雜的話。這個例子看起來像這樣：你可以從這個例子中看到，我可以從我的樣式表中看到。profile_photo嵌套在。profile中，然而事實上并不需要嵌套這個類。這真的是bem最棒的地方，也是為什么我建議用法它的緣由。6.只用法！inportant作為最后的手段在一個類上放上！important定義會使得籠罩代碼變成一件令人頭痛的事情，特殊是當你試圖處理媒體查詢時。這是我在處理foundation的某個版本碰到的一個令人頭痛的問題，

8、由于他們打算對可見類打上！important。這對于移動設備也是一個疼痛的根源。例如，假如你希翼手機屏幕顯示某些內(nèi)容，則必需用法另一個！important類來重寫。hide類以顯示它。我向來找不到用法！important的有效借口，除了在別人錯誤用法！important定義的狀況下。7.重新發(fā)明輪子需要時光和精力，所以要慎重考慮比如說在客戶端項目中創(chuàng)建自己的網(wǎng)格css框架，可能就是一個重新發(fā)明輪子的例子。按照我的閱歷，除非你想知道它是如何工作的，否則自己寫這些東西其實并沒有多大的益處。有許許多多的邊緣狀況可以讓你自己動手編寫代碼，所以為什么不用法別人已經(jīng)寫好的免費又能工作良好的代碼呢？也就是說

9、，自己動手創(chuàng)建可能是一個很好的學習閱歷——但這很可能不屬于生產(chǎn)應用程序的過程。好的，那么javascript插件呢？在議論javascript或jquery插件時，我要說的是，對于任何你用法的具有很好集成選項的真正常見組件來說，狀況也是如此。其中的一些例子是照片輪播的javascript轉(zhuǎn)盤，或日期挑選器。這里的邊緣案例是用法一些帶有封裝組件規(guī)律的javascript框架的插件（react，ember，angular等）。假如你想要做的事情相對容易，有時可能將這些插件放到組件中會更棘手。例如，我會用法立刻可用的foundation或bootstrap模塊，假如我正工作于依靠jquery的項目，但是會在react中構(gòu)建我自己的模塊（只是由于編寫組件以便通過引入jquery插入到react組件中會更簡單）。8.關(guān)注前端代碼！