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

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

1、使用flex進(jìn)行布局

flex彈性布局的出現(xiàn)是有原因的。浮動(dòng)和inline-block雖然也能實(shí)現(xiàn)很多的布局效果，但它們本質(zhì)上是文本和塊元素布局的工具，而不是面向整個(gè)網(wǎng)頁的。flex可以很容易的按照我們預(yù)期的方式創(chuàng)建布局。

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

2、注意外邊距折疊

與其他大多數(shù)屬性不同，上下的垂直外邊距margin在同時(shí)存在時(shí)會(huì)發(fā)生外邊距折疊。這意味著當(dāng)一個(gè)元素的下邊緣接觸到另一個(gè)元素的上邊緣時(shí)，只會(huì)保留兩個(gè)margin值中較大的那個(gè)。

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

3、所有元素設(shè)置為Border-box

大多數(shù)初學(xué)者都不知道box-sizing這個(gè)屬性，但實(shí)際上它非常重要。box-sizing屬性有兩個(gè)值：

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

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

將所有元素都設(shè)置為border-box，可以更輕松的改變?cè)氐拇笮?，而不必?fù)?dān)心padding或者border值會(huì)將元素?fù)伍_變形或者換行顯示。

4、重置元素的CSS樣式

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

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

5、更友好的注釋

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

6、將圖片作為背景

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

background引入圖片的一個(gè)缺點(diǎn)是頁面的Web可訪問性會(huì)受到輕微的影響，因?yàn)槠聊婚喿x器和搜索引擎無法正確地獲取到圖像。這個(gè)問題可以通過CSS object-fit屬性解決，到目前為止除了IE瀏覽器其他的瀏覽器都可以使用object-fit。

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

CSS社區(qū)非常龐大，不斷有新的代碼庫出現(xiàn)。它們有各種用途，從微小的片段到構(gòu)建響應(yīng)式應(yīng)用程序的整體框架。其中大多數(shù)也是開源的。下一次當(dāng)你面對(duì)一個(gè)CSS問題時(shí)，在你試圖費(fèi)盡全力解決它之前，檢查一下Github或Codepen上是否已經(jīng)有了一個(gè)可用的解決方案。

8、使用AutoPrefixer達(dá)到更好的兼容性

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

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

在線工具：Autoprefixer

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

代碼庫：Autoprefixer (PostCSS)

9、壓縮CSS文件

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

在線工具：CSS Minifier、CSS Compressor

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

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

10、驗(yàn)證

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

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

在線工具：W3 Validator、CSS Lint

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

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

對(duì)于想要入行Web前端行業(yè)的人來說，就業(yè)是個(gè)大問題，也直接影響著各個(gè)的決定。因此，選擇專業(yè)的學(xué)習(xí)比較好，不僅理論基礎(chǔ)扎實(shí)，還有豐富的項(xiàng)目開發(fā)經(jīng)驗(yàn)，有明確的職業(yè)規(guī)劃和嫻熟的面試技巧，為自身的快速就業(yè)提供了可能。

自己是一個(gè)6年的前端開發(fā)工程師

這里推薦一下我的前端學(xué)習(xí)交流扣qun：784783012 ，里面都是學(xué)習(xí)前端的，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴。2019最新技術(shù)，從企業(yè)招聘人才需求 到怎么學(xué)習(xí)前端開發(fā)，和學(xué)習(xí)什么內(nèi)容都有免費(fèi)系統(tǒng)分享。好友都在里面學(xué)習(xí)交流，每天都會(huì)有大牛定時(shí)講解前端技術(shù)!

點(diǎn)擊： 加入