編寫基本的CSS和HTML是我們作為Web開發人員學習的首要事情之一。然而，我遇到的很多應用程序顯然沒有人花時間真正考慮前端開發的長久性和可維護性。我認為這主要是因為許多開發人員對組織CSS / HTML和JavaScript的策略缺乏深刻的理解。在我和我們團隊的觀念中，編寫可維護的前端代碼非常重要。盡管我們有一些使用了多年的客戶端，但要記住你永遠不會是唯一一個工作于應用程序的人。僅僅因為你的一次性元素和配置對你有意義，并不意味著它們對下一個可能繼承應用程序的人有意義。為了防止這篇文章太長，我今天將主要討論CSS代碼。JavaScript代碼是另一個完全不同的棘手問題。這篇文章的目的不在于規則手冊，而在于你正在編寫CSS時的指南。希望能幫助大家找到自己的流程，而這篇文章的目標是讓你的CSS一致，簡單，易于使用。下面是8個保持CSS有條理和易于長期維護的秘訣：1、不要寫不需要的樣式定義例如：編寫display:block;時要注意，因為很多元素默認有這個樣式。另一個例子是在元素上定義字體大小，它將繼承你正在定義的正文字體大小。目標是雙重的：

• 減少CSS文件的長度，以便瀏覽。
• 明確你的CSS類需要做什么，而不是定義一堆已經產生的垃圾。

這里有一個常見問題是CSS沒有清理干凈，此時，為了簡潔起見，可以完全刪除。2、將CSS看作可重用組件不要將CSS元素視為每個單獨頁面上的特定表單或元素，如果你可以定義可重用的CSS實用程序和組件以供自己使用，則可以減少很多復雜性。編寫旨在重用的類的作用：

• 確保你的設計在不同的頁面之間保持一致。當你在很多頁面上共享CSS類時，你知道當你改變這個類時，它會在每一個出現的頁面發生改變。
• 這使得編寫CSS真的很快。首先，如果大多數樣式被定義為你所知道的實用程序和類，那么你就不必花費大量時間刷新和重新創建應用程序中已存在的樣式。

3、在CSS中定義實用工具來干你的CSS我們將’utilities’定義為一個CSS類，實際上它只用來做一件特定的事情，而不是封裝整個元素。你會看到這個策略經常用于流行的CSS框架，如Bootstrap和Foundation。在這些流行的框架中你所看到的一些例子是：.hide { display: none; }.text-center { text-align: center; }例如，使用.hide，就不必每次想要在頁面上隱藏元素時就得編寫一個新的類——你只需要在你的元素上加上.hide類，它會使元素display: none; )我們寫了一些實用程序文件，這些文件在應用程序之間共享，使用一些常用的實用程序可以減少為每個元素編寫特定樣式的需求。一個很好的例子是我們如何使用margin和padding實用程序。下面是padding實用程序的一個簡單例子：.padding-0 { padding: 0; }.padding-xxs { padding: 5px; }.padding-xs { padding: 10px; }.padding-sm { padding: 20px; }.padding-md { padding: 30px; }.padding-lg { padding: 40px; }.padding-xl { padding: 50px; }.padding-xxl { padding: 60px; }通過結合使用這些工具，我們可以與我們間距的像素數保持一致，并且可以快速標記頁面，而不必編寫非常多的CSS。實用程序背后的理念是，你認為你可能會不止一次地使用它們。如果它是一次性樣式，或者如果你認為組合樣式會經常使用，那么可能它作為CSS類將可以更好地工作。4、除非絕對需要，否則避免嵌套假設有一些復選框的表單。在這個特定的情況下，你需要復選框內聯(并排)。所以你試圖像這樣寫樣式：.user-form li a { color: red; }然后在這過程中，你意識到你需要列表元素中的一個鏈接實際上是黑色的。所以你試圖為黑色的鏈接編寫一個工具類：.link--black { color: black; }此處.link–black鏈接將被CSS特殊性所覆蓋，并且將無法壓倒.my-form li a樣式。現在你可能想要確保列表元素中的所有錨標記是紅色的，但是你不知道未來的元素會怎么樣以及可能會對設計做出什么樣的更改。你可能會問，“好的親，那么你怎么解決上面的問題呢？”通過上面的例子，你應該明白錨標簽的顏色應該是一個遠離默認鏈接顏色的變體。所以，在這種情況下，我會100％確定一個額外的工具類來處理紅色鏈接。下面是實踐中可能的處理例子：a { color: blue; &:hover { color: black; }}.link--red { color: red; }然后將其添加到HTML中的每個li元素。我在這里作出的假設是：某一天，此紅色的鏈接將在應用程序的其他地方被使用。我不想把它嵌入到用戶表單中，因為那樣我就不得不在未來編寫另外一個樣式來說明需要紅色鏈接的情況。另外，因為我將自己的懸停定義在自己的錨點上，所以紅色鏈接將會變成黑色懸停，而不必定義任何其他樣式。5、利用BEM防止嵌套能夠真正防止過度嵌套的一個策略是名為BEM(Block Element Modifier)的命名策略。使用BEM的一個很好的例子就是當你有一個真正具體的樣式的組件時，如果使用實用程序會太麻煩和復雜的話。這個例子看起來像這樣：// HTML snippet // BEM CSS.profile { background-color: white; border: 1px solid #ccc;}.profile__photo { border-radius: 50%; border: 1px solid #000;}你可以從這個例子中看到，我可以從我的樣式表中看到.profile__photo嵌套在.profile中，然而實際上并不需要嵌套這個類。這真的是BEM最棒的地方，也是為什么我建議使用它的原因。6、只使用!inportant作為最后的手段在一個類上放上!important定義會使得覆蓋代碼變成一件令人頭痛的事情，特別是當你試圖處理媒體查詢時。這是我在處理Foundation的某個版本遇到的一個令人頭痛的問題，因為他們決定對可見類打上!important。這對于移動設備也是一個痛苦的根源。例如，如果你希望手機屏幕顯示某些內容，則必須使用另一個!important類來重寫.hide類以顯示它。我一直找不到使用!important的有效借口，除了在別人錯誤使用!important定義的情況下。7、重新發明輪子需要時間和精力，所以要慎重考慮比如說在客戶端項目中創建自己的網格CSS框架，可能就是一個重新發明輪子的例子。根據我的經驗，除非你想知道它是如何工作的，否則自己寫這些東西其實并沒有多大的好處。有許許多多的邊緣情況可以讓你自己動手編寫代碼，所以為什么不使用別人已經寫好的免費又能工作良好的代碼呢？也就是說，自己動手創建可能是一個很好的學習經驗——但這很可能不屬于生產應用程序的過程。好的，那么JavaScript插件呢？在談論JavaScript或jQuery插件時，我要說的是，對于任何你使用的具有很好集成選項的真正常見組件來說，情況也是如此。其中的一些例子是照片輪播的JavaScript轉盤，或日期選擇器。這里的邊緣案例是使用一些帶有封裝組件邏輯的JavaScript框架的插件(React，Ember，Angular等)。如果你想要做的事情相對簡單，有時可能將這些插件放到組件中會更麻煩。例如，我會使用立即可用的Foundation或Bootstrap模塊，如果我正工作于依賴jQuery的項目，但是會在React中構建我自己的模塊(只是因為編寫組件以便通過引入jQuery插入到React組件中會更容易)。8、關注前端代碼！最后，我要向你建議的最重要的事情是，你得關注你為前端編寫的代碼，掌握它，并持之以恒地改進它(統計提高自己！)。我相信這是長期可維護的應用程序與難以處理的應用程序之間最大的區別因素之一。通過遵循編寫CSS的八個技巧，你將為自己和未來繼承你的代碼的開發人員節省時間和精力。你遵循什么準則來組織和精簡你的CSS？文章來自：慕課手記作者：前端啟航

總結

以上是生活随笔為你收集整理的react 改变css样式_web前端入门到实战：编写CSS代码的8个策略，资深开发工程师总结...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。