編寫現代 CSS 的 20 個技巧
在這篇文章中，我們想與您分享 CSS 社區推薦的 20 個有用的約定和最佳實踐的集合。有些是為初學者量身定做的，有些是有點高級的，但我們希望每個人都能找到一個他們不知道的很酷的技巧。享受吧！
1。謹防保證金崩潰
與大多數其他屬性不同，垂直邊距在相遇時會塌陷。這意味著當一個元素的下邊距接觸到另一個元素的上邊距時，只有兩者中較大的那個會存活下來。這是一個簡單的例子：
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
} <div class="square red"></div> <div class="square blue"></div>
而不是紅色和藍色方塊之間的 70px，我們只有 40px，藍色方塊的邊距根本沒有考慮在內。有辦法對抗這種行為，但最好只使用它並只使用一個方向的邊距，最好是 margin-bottom .
2。使用 Flexbox 進行佈局
彈性盒模型的存在是有原因的。浮動和內聯塊可以工作，但它們本質上都是用於樣式化文檔的工具，而不是網站。另一方面，Flexbox 經過專門設計，可以輕鬆地按照設想的方式創建任何佈局。
flexbox 模型附帶的一組屬性為開發人員提供了很大的靈活性（不是雙關語），一旦你習慣了它們，做任何響應式佈局都是小菜一碟。現在的瀏覽器支持幾乎是完美的，所以應該沒有什麼能阻止你使用完整的 flexbox。
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
} 之前在 Tutorialzine 上，我們已經介紹了許多使用 flexbox 的技巧和竅門。您可以在此處查看它們：您需要了解的 5 種 Flexbox 技術。
3。進行 CSS 重置
儘管這些年來情況已經有了很大的改善，但不同瀏覽器的行為方式仍然存在很大差異。解決此問題的最佳方法是應用 CSS 重置，為所有元素設置通用默認值，讓您開始處理將在任何地方產生相同結果的干淨樣式表。
像 normalize.css、minireset 和 ress 這樣的庫可以很好地做到這一點，糾正所有可以想像的瀏覽器不一致。如果你不想使用庫，你可以用這些樣式自己做一個非常基本的 CSS 重置：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
這可能看起來有點苛刻，但取消邊距和填充實際上使佈局元素更容易，因為它們之間沒有默認空間需要考慮。 box-sizing: border-box; 屬性是另一個很好的默認值，我們將在下一個技巧中詳細討論。
4。所有人的邊框
大多數初學者不知道 box-sizing 屬性，但它實際上非常重要。了解它的作用的最好方法是查看它的兩個可能值：
content-box（默認） - 當我們為元素設置寬度/高度時，這就是它的內容的大小。所有填充和邊框都在此之上。例如。一個<div>寬度為 100，內邊距為 10，我們的元素將佔用 120 像素 (100 + 2*10)。border-box- 填充和邊框包含在寬度/高度中。<div>與width: 100px;和box-sizing: border-box;無論添加什麼填充或邊框，寬度都是 100 像素。
為所有元素設置邊框框可以更輕鬆地為所有元素設置樣式，因為您不必一直進行數學運算。
5。圖片作為背景
在您的設計中添加圖像時，特別是如果它是響應式的，請使用 <div> 帶有 background 的標籤 CSS 屬性而不是 <img> 元素。
這似乎是徒勞無功，但實際上它使正確設置圖像樣式變得更加容易，保持其原始大小和縱橫比，這要歸功於 background-size , background-position , 和其他屬性。
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
} <section>
<p>Img element</p>
<img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section> 這種技術的一個缺點是您頁面的 Web 可訪問性會受到輕微影響，因為屏幕閱讀器和搜索引擎無法正確抓取圖像。這個問題可以通過很棒的對象匹配來解決，但它還沒有完整的瀏覽器支持。
6。更好的表格邊框
HTML 中的表格並不有趣。它們很古怪，幾乎不可能做出響應，並且總體上難以設計。例如，如果您想為表格及其單元格添加簡單的邊框，您很可能會得到以下結果：
table {
width: 600px;
border: 1px solid #505050;
margin-bottom: 15px;
color:#505050;
}
td{
border: 1px solid #505050;
padding: 10px;
} <table>
<thead>
<tr>
<th >Title</th>
<th >Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://tutorialzine.com/2016/07/take-a-selfie-with-js/" target="_blank">Take a Selfie With JavaScript</a></td>
<td>A quick tutorial that covers a pure-JavaScript way to take photos directly in the browser using various native APIs and interesting JS techniques.</td>
</tr>
<tr>
<td><a href="https://tutorialzine.com/2016/08/20-awesome-php-libraries-for-summer-2016/" target="_blank">20 Awesome PHP Libraries</a></td>
<td>A handcrafted collection of 20 open-source libraries containing some of the most useful and top-quality PHP resources.</td>
</tr>
</tbody>
</table>
如您所見，到處都有很多重複的邊界，看起來不太好。這是一種快速、無需破解的方法來刪除所有雙邊框：只需添加 border-collapse: collapse; 到桌子上。
table {
width: 600px;
border: 1px solid #505050;
margin-bottom: 15px;
color: #505050;
border-collapse: collapse;
}
td{
border: 1px solid #505050;
padding: 10px;
} <table>
<thead>
<tr>
<th >Title</th>
<th >Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://tutorialzine.com/2016/07/take-a-selfie-with-js/" target="_blank">Take a Selfie With JavaScript</a></td>
<td>A quick tutorial that covers a pure-JavaScript way to take photos directly in the browser using various native APIs and interesting JS techniques.</td>
</tr>
<tr>
<td><a href="https://tutorialzine.com/2016/08/20-awesome-php-libraries-for-summer-2016/" target="_blank">20 Awesome PHP Libraries</a></td>
<td>A handcrafted collection of 20 open-source libraries containing some of the most useful and top-quality PHP resources.</td>
</tr>
</tbody>
</table> 好多了！
7。寫出更好的評論
CSS 可能不是一種編程語言，但它的代碼仍然需要記錄。只需一些簡單的註釋即可組織樣式表並使您的同事或未來的自己更容易訪問它。
對於 CSS 的較大部分，例如主要組件或媒體查詢，請使用風格化的註釋並在後面添加幾行新行：
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
設計中的細節或不太重要的組件可以用單行註釋進行標記。
/* Footer Buttons */
.footer button { }
.footer button:hover { }
另外，請記住 CSS 沒有單行 // 註釋，所以在註釋掉某些內容時，您仍然需要使用 / / 語法。
/* Do */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* Don't */
p {
padding: 15px;
// border: 1px solid #222;
} 8。每個人都喜歡烤肉串盒
類名和 id 在包含多個單詞時應使用連字符 (-)。 CSS 不區分大小寫，因此不能選擇 camelCase。很久以前，不支持下劃線（現在支持），這使得破折號成為默認約定。
/* Do */
.footer-column-left { }
/* Don't */
.footerColumnLeft { }
.footer_column_left { }
在命名方面，您還可以考慮 BEM，它遵循一組增加一致性並提供基於組件的開發方法的原則。您可以在這篇出色的 CSS-Tricks 文章中了解更多相關信息。
9。不要重複自己
大多數 CSS 屬性的值都繼承自 DOM 樹中上一級的元素，因此命名為 Cascading 樣式表。讓我們以 font 例如屬性 - 它幾乎總是從父級繼承，您不必為頁面上的每個元素單獨設置它。
只需將設計中最流行的字體樣式添加到 <html> 或 <body> 元素並讓它們涓涓細流。以下是一些不錯的默認設置：
html {
font: normal 16px/1.4 sans-serif;
} 稍後您可以隨時更改任何給定元素的樣式。我們說的只是避免重複，盡量使用繼承。
10. transform 的 CSS 動畫
不要通過直接更改元素的 width 來為元素設置動畫 和 height , 或 left/top/bottom/right .最好使用 transform() 屬性，因為它提供了更平滑的過渡，讓您在閱讀代碼時更容易理解您的意圖。
這是一個例子。我們想要為一個球設置動畫並將其向右滑動。而不是更改 left 的值 ，最好使用translateX():
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Not Cool*/
.ball.slide-out {
left: 500px;
}
/* Cool*/
.ball.slide-out {
transform: translateX(450px);
}
變換，以及它的所有許多功能（translate , rotate , scale 等）具有幾乎通用的瀏覽器兼容性，可以自由使用。
11.不要DIY，使用圖書館
CSS 社區非常龐大，並且不斷有新的庫問世。它們服務於各種目的，從微小的片段到用於構建響應式應用程序的成熟框架。其中大部分也是開源的。
下次遇到 CSS 問題時，在嘗試全力以赴解決它之前，請檢查 GitHub 或 CodePen 上是否還沒有可用的解決方案。
12.保持低選擇器特異性
並非所有 CSS 選擇器都是一樣的。當新手開發人員編寫 CSS 時，他們通常期望選擇器總是覆蓋它們上面的所有內容。但是，情況並非總是如此，正如我們在以下示例中所說明的那樣：
a{
color: #fff;
padding: 15px;
}
a#blue-btn {
background-color: blue;
}
a.active {
background-color: red;
} <a href='#' id='blue-btn' class="active">Active Button </a>
我們希望能夠添加 .active 類到任何按鈕並使其變為紅色。這在這裡不起作用，因為我們的按鈕是 background-color 使用 ID 選擇器設置，該選擇器具有更高的選擇器特異性。規則是這樣的：
ID (#id )> 類 (.class )> 類型（例如 header )
特異性也可以疊加，所以 a#button.active 排名高於 a#button .使用具有高特異性的選擇器會導致你不斷地用更高的選擇器勝過舊的選擇器，最終導致 !important .這將引導我們進入下一個提示：
13.不要使用 !important
說真的，不要。現在的快速修復可能最終會在未來導致大量重寫。相反，找出您的 CSS 選擇器不起作用的原因並進行更改。
!important 唯一可以接受的時候 CSS 規則是當您想要覆蓋 HTML 中的內聯樣式時，這本身就是另一個需要避免的壞習慣。
14.大寫鎖定含義，text-transform 對於風格
在 HTML 中，當您想將大寫字母用於其預期的語義含義時，例如當您想強調一個單詞的重要性時。
<h3>Employees MUST wear a helmet!</h3>
如果出於文體原因需要將某些文本全部大寫，請在 HTML 中正常編寫文本，並使用 CSS 將其轉換為全部大寫。它看起來是一樣的，但如果脫離上下文，你的內容會更有意義。
<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
text-transform: uppercase;
} 小寫和大寫字符串也是如此 - text-transform 也可以處理這些。
15. Em、Rem 和像素
人們是否應該使用 em 存在很多爭論 , rem , 或 px 用於設置元素和文本大小的值。事實上，這三個選項都是可行的，並且各有利弊。
所有的開發者和項目都是不同的，所以對於何時使用哪個沒有任何嚴格的規定。但是，以下是每個單元的一些提示和一般良好做法：
- em - 1 em 的值是相對於
font-size的直接父母。常用於媒體查詢，em 是 非常適合響應速度，但是將 em 的交換率追溯到每個元素的像素（1.25em 和 1.4em 的 16px =?）會讓人非常困惑。 - rem - 相對於
<html>的字體大小 元素，rem 使縮放頁面上的所有標題和段落變得非常容易。離開<html>使用它的默認字體大小並使用 rem 設置其他所有內容 在可訪問性方面是一種很好的方法。 - px - 像素為您提供最高的精度，但在用於響應式設計時不提供任何縮放。它們可靠、易於理解，並且在價值和實際結果之間呈現出良好的視覺聯繫（15 像素很接近，可能只有一兩個像素）。
底線是，不要害怕嘗試，嘗試所有這些，看看你最喜歡什麼。有時em 和 rem 可以為您節省大量工作，尤其是在構建響應式頁面時。
16.在大型項目中使用預處理器
你聽說過它們——Sass、Less、PostCSS、Stylus。預處理器是 CSS 發展的下一步。它們提供了變量、CSS 函數、選擇器嵌套和許多其他很酷的東西等特性，使 CSS 代碼更易於管理，尤其是在大型項目中。
舉個簡單的例子，下面是使用 Sass 在樣式表中直接使用 CSS 變量和函數的片段：
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
} 預處理器唯一真正的缺點是它們需要編譯成原生 CSS，但如果您已經在項目中使用構建腳本，這應該不會太麻煩。
要了解有關預處理器的更多信息，請查看我們關於兩個最流行的系統 - Sass 和 Less 的教程。
17.自動前綴以獲得更好的兼容性
編寫特定於瀏覽器的前綴是 CSS 中最煩人的事情之一。它們並不一致，你永遠不知道你需要哪些，如果你把它們放在你的樣式表中的實際過程是一個無聊的噩夢。
值得慶幸的是，有一些工具可以自動為您執行此操作，甚至可以讓您決定需要支持哪些瀏覽器：
- 在線工具：Autoprefixer
- 文本編輯器插件：Sublime Text、Atom
- 庫：自動前綴 (PostCSS)
18.在生產中使用精簡代碼
為了改善您的網站和應用程序的頁面負載，您應該始終使用縮小的資源。代碼的縮小版本將刪除所有空格和重複項，從而減少總文件大小。當然，這個過程也會使樣式表完全不可讀，因此請始終保留 .min 版本用於生產，而將常規版本用於開發。
有很多不同的方法可以縮小 CSS 代碼：
- 在線工具 - CSS Minifier（包括 API）、CSS Compressor
- 文本編輯器插件：Sublime Text、Atom
- 庫：Minfiy (PHP)、CSSO 和 CSSNano（PostCSS、Grunt、Gulp）
根據您的工作流程，可以使用上述任何選項，但建議以一種或另一種方式自動化流程。
19. Caniuse 是你的朋友
不同的網絡瀏覽器仍然有很多兼容性不一致的地方。使用 caniuse 或類似服務來檢查您使用的內容是否得到廣泛支持，是否需要前綴，或者是否會導致某個平台出現任何錯誤。
僅僅檢查 caniuse 是不夠的。您還需要進行測試（手動或通過服務），因為有時佈局會因為沒有明顯原因而中斷。了解用戶群的首選瀏覽器也有很大幫助，因為您可以看到良好的支持在哪些方面最為重要。
20。驗證
驗證 CSS 可能不如驗證 HTML 或 JavaScript 代碼重要，但通過 CSS Linter 運行代碼仍然很有幫助。它會告訴您是否犯了任何錯誤，警告您不良做法，並為您提供改進代碼的一般提示。
就像 minfiers 和 autoprefixer 一樣，有很多免費的驗證器可用：
- 在線工具：W3 Validator、CSS Lint
- 文本編輯器插件：Sublime Text、Atom
- 庫：stylelint（Node.js、PostCSS）、css-validator (Node.js)
