如何能提高CSS編寫技巧 提高Web前端開發效率

如何能提高CSS編寫技巧？怎么學好Web前端開發？很多人在學習Web前端時，剛開始都會學習HTML和CSS，HTML用于文本內容，CSS用于樣式設計，掌握這兩部分知識就可以進行簡單的頁面制作。不過如果耗時過長作品一般未免有些得不償失，因此你需要掌握一些技巧，以提高CSS編寫效率。

1、使用flex進行布局

flex彈性布局的出現是有原因的。浮動和inline-block雖然也能實現很多的布局效果，但它們本質上是文本和塊元素布局的工具，而不是面向整個網頁的。flex可以很容易的按照我們預期的方式創建布局。

flex擁有一組面向“彈性容器”的屬性和一組面向“彈性項目”的屬性，一旦你學會了它們，做任何響應式布局都是小菜一碟。目前各類瀏覽器的最新版本對flex的支持性也是沒有任何問題的，所以你應該多多使用flex布局。

2、注意外邊距折疊

與其他大多數屬性不同，上下的垂直外邊距margin在同時存在時會發生外邊距折疊。這意味著當一個元素的下邊緣接觸到另一個元素的上邊緣時，只會保留兩個margin值中較大的那個。

解決外邊距折疊的方法有很多種，對于初學者來說最簡單的就是所有元素只使用一個方向上的margin，比如上下的外邊距我們統統使用margin-bottom。

3、所有元素設置為Border-box

大多數初學者都不知道box-sizing這個屬性，但實際上它非常重要。box-sizing屬性有兩個值：

1)content-box(默認)。當我們設置一個元素的寬度或高度時，就是設置它的內容的大小。所有的padding和邊框值都不包含。例如，一個div的寬度設置為100，padding為10，于是這個元素將占用120像素(100+2*10)。

2)border-box。padding與邊框包含在元素的寬度或高度中，一個設置為width: 100px和box-sizing:。border-box的div元素，它的總寬度就是100px，無論它的內邊距和邊框有多少。

將所有元素都設置為border-box，可以更輕松的改變元素的大小，而不必擔心padding或者border值會將元素撐開變形或者換行顯示。

4、重置元素的CSS樣式

不同瀏覽器對于各種元素的默認樣式存在很大的差異，解決這個問題的最佳辦法是在CSS開頭為所有的元素設置通用的CSS Reset重置代碼。這樣你是在沒有任何默認內外邊距的基礎上進行布局，產生的效果也就是統一的。

網絡上已經有成熟的CSS代碼庫為我們解決瀏覽器不一致問題，例如normalize.css、minireset和ress，你可以在你的項目中引用它們。

5、更友好的注釋

CSS也許不是一種編程語言，但其代碼仍然需要文檔化。添加一些簡單的注釋可以將代碼分類區分，方便自己和同事后期維護。需要注意的是，CSS中沒有//注釋，只有/**/注釋。

6、將圖片作為背景

當給頁面添加圖片時，尤其需要圖片是響應式的時候，最好使用background屬性來引入圖片，而不是標簽。這看起來使用圖片會更復雜，但實際上它會使設置圖片的樣式變得更加容易。有了background-size, background-position和其它的屬性，保持或改變圖片原始尺寸和寬高比會更方便。

background引入圖片的一個缺點是頁面的Web可訪問性會受到輕微的影響，因為屏幕閱讀器和搜索引擎無法正確地獲取到圖像。這個問題可以通過CSS object-fit屬性解決，到目前為止除了IE瀏覽器其他的瀏覽器都可以使用object-fit。

7、不要DIY，多使用代碼庫

CSS社區非常龐大，不斷有新的代碼庫出現。它們有各種用途，從微小的片段到構建響應式應用程序的整體框架。其中大多數也是開源的。下一次當你面對一個CSS問題時，在你試圖費盡全力解決它之前，檢查一下Github或Codepen上是否已經有了一個可用的解決方案。

8、使用AutoPrefixer達到更好的兼容性

瀏覽器前綴是CSS中最煩人的事情之一，每個屬性需要的前綴是不一致的，你永遠不知道到底需要哪一個，如果真的要把它一個一個手動添加到樣式表中，那無疑是一個無聊的噩夢。

值得慶幸的是，有工具可以自動為我們提供添加瀏覽器前綴的功能，甚至可以決定需要支持哪些瀏覽器：

在線工具：Autoprefixer

文本編輯器插件：Sublime Text、Atom

代碼庫：Autoprefixer (PostCSS)

9、壓縮CSS文件

為了提高網站和應用程序的加載速度和頁面負載，應該使用壓縮后的資源。壓縮版本的文件將刪除所有空白和重復，從而減少總文件的體積。當然，這個過程也會使樣式表完全不可讀，所以要在生產環境中使用.min版本，同時為開發保留常規版本。市場上有許多不同的方法來壓縮CSS代碼：

在線工具：CSS Minifier、CSS Compressor

文本編輯器插件：Sublime Text、Atom

代碼庫：Minfiy (PHP)、CSSO、CSSNano(PostCSS、Grunt、Gulp)

10、驗證

驗證CSS可能不像驗證HTML或JavaScript代碼那么重要，但是通過工具運行一下你的代碼仍然非常有用。它會告訴你是否犯了任何錯誤，警告錯誤的用法，并為您提供改進代碼的提示。

就像壓縮和Autoprefixer一樣，有免費的工具可以利用：

在線工具：W3 Validator、CSS Lint

文本編輯器插件：Sublime Text、Atom

代碼庫：stylelint(Node.js、PostCSS)、css-validator(Node.js)

對于想要入行Web前端行業的人來說，就業是個大問題，也直接影響著各個的決定。因此，選擇專業的學習比較好，不僅理論基礎扎實，還有豐富的項目開發經驗，有明確的職業規劃和嫻熟的面試技巧，為自身的快速就業提供了可能。

自己是一個6年的前端開發工程師

這里推薦一下我的前端學習交流扣qun：784783012 ，里面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小伙伴。2019最新技術，從企業招聘人才需求 到怎么學習前端開發，和學習什么內容都有免費系統分享。好友都在里面學習交流，每天都會有大牛定時講解前端技術!

點擊： 加入