英文 | https://betterprogramming.pub/5-css-practices-to-avoid-as-a-web-developer-1b7553c05131

翻譯 | 楊小二

1、設(shè)置邊距或填充，然后將其重置

我經(jīng)?？吹饺藗?yōu)樗性卦O(shè)置邊距或填充，然后將其重置為第一個(gè)或最后一個(gè)元素。我不知道為什么您只能通過(guò)一條規(guī)則就使用兩條規(guī)則。一次為所有必需的元素設(shè)置邊距和內(nèi)邊距要容易得多。

對(duì)于更簡(jiǎn)單，更簡(jiǎn)潔的CSS，請(qǐng)使用以下選項(xiàng)之一：nth-child / nth-of-type選擇器，：not（）偽類或相鄰的兄弟組合器，而后者又被稱為+。

不要這樣做：

.item {  margin-right: 1.6rem;}
.item:last-child {  margin-right: 0;}

你可以這樣使用：

.item:not(:last-child) {  margin-right: 1.6rem;}

或者：

.item:nth-child(n+2) {  margin-left: 1.6rem;}

或者：

.item + .item {  margin-left: 1.6rem;}

2、添加顯示位置為：絕對(duì)或位置為固定的元素的塊

你是否知道不需要為display: block添加帶有position: absolute或position: fixed的元素，因?yàn)槟J(rèn)情況下會(huì)添加？

另外，如果你使用inline-*值，它們將按以下方式更改：inline或inline-block將更改為block，inline-flex-> flex，inline-grid->grid和inline-table-> table。

因此，只需編寫position：absolute或position：fixed并僅在需要flex或grid值時(shí)添加顯示。

不要這樣做：

.button::before {  content: "";  position: absolute;  display: block;}

或者：

.button::before {  content: "";  position: fixed;  display: block;}

你可以使用：

.button::before {  content: "";  position: absolute;}

或者：

.button::before {  content: "";  position: fixed;}

3、使用轉(zhuǎn)換：將（-50％，-50％）轉(zhuǎn)換為居中

有一個(gè)流行的問(wèn)題曾經(jīng)引起很多麻煩。這一直持續(xù)到2015年，其所有解決方案都帶來(lái)了某種困難。我說(shuō)的是沿兩個(gè)軸將任意高度的元素居中。

特別地，一種解決方案是結(jié)合使用絕對(duì)定位和transform屬性。此技術(shù)在基于Chromium的瀏覽器中引起了模糊的文本問(wèn)題。

但是在引入flexbox之后，我認(rèn)為該技術(shù)已不再適用。問(wèn)題是它不能解決文本模糊的問(wèn)題。而且，它使您可以使用五個(gè)屬性。因此，我想分享一個(gè)技巧，可以將代碼減少為兩個(gè)屬性。

我們可以margin: auto在flex容器內(nèi)使用，瀏覽器將元素居中。只有兩個(gè)屬性，僅此而已。

不要這樣做：

3、使用轉(zhuǎn)換：將（-50％，-50％）轉(zhuǎn)換為居中

有一個(gè)流行的問(wèn)題曾經(jīng)引起很多麻煩。這一直持續(xù)到2015年，其所有解決方案都帶來(lái)了某種困難。我說(shuō)的是沿兩個(gè)軸將任意高度的元素居中。

特別地，一種解決方案是結(jié)合使用絕對(duì)定位和變換屬性。此技術(shù)在基于Chromium的瀏覽器中引起了模糊的文本問(wèn)題。

但是在引入flexbox之后，我認(rèn)為該技術(shù)已不再適用。問(wèn)題是它不能解決文本模糊的問(wèn)題。而且，它使你可以使用五個(gè)屬性。因此，我想分享一個(gè)技巧，可以將代碼減少為兩個(gè)屬性。

我們可以使用margin：在flex容器內(nèi)自動(dòng)放置，瀏覽器將元素居中。只有兩個(gè)屬性，僅此而已。

不要這樣做：

.parent {  position: relative;}
.child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

你可以使用：

.parent {  display: flex;}
.child {  margin: auto;}

4、使用width：100％用于塊元素

我們經(jīng)常使用flexbox創(chuàng)建一個(gè)多列網(wǎng)格，該網(wǎng)格逐漸轉(zhuǎn)換為單列。

為了將網(wǎng)格轉(zhuǎn)換為一列，開發(fā)人員使用width: 100%。我不明白他們?yōu)槭裁催@么做。網(wǎng)格元素是塊元素，默認(rèn)情況下可以執(zhí)行此操作，而無(wú)需使用其他屬性。

因此，我們不需要使用width：100％，而是應(yīng)該編寫媒體查詢，以便flexbox僅用于創(chuàng)建多列網(wǎng)格。

不要這樣做：

<div class="parent">  <div class="child">Item 1</div>  <div class="child">Item 2</div>  <div class="child">Item 3</div>  <div class="child">Item 4</div></div>

.parent {  display: flex;  flex-wrap: wrap;}
.child {  width: 100%;}
@media (min-width: 1024px) {  .child {    width: 25%;  }}

你可以使用：

<div class="parent">  <div class="child">Item 1</div>  <div class="child">Item 2</div>  <div class="child">Item 3</div>  <div class="child">Item 4</div></div>

@media (min-width: 1024px) {  .parent {    display: flex;    flex-wrap: wrap;  }
  .child {    width: 25%;  }}

5、設(shè)置顯示：Flex項(xiàng)目的塊

使用flexbox時(shí)，請(qǐng)務(wù)必記住，創(chuàng)建Flex容器（添加display: flex）時(shí)，所有子項(xiàng)（flex項(xiàng)）都會(huì)被阻塞。

這意味著元素被設(shè)置為顯示，并且只能具有塊值。因此，如果你設(shè)置了inline或inline-block，它將更改為block，inline-flex-> flex，inline-grid-> grid和inline-table-> table。

因此，請(qǐng)勿添加display: block到flex項(xiàng)目。瀏覽器將為你完成此操作。

不要這樣做：

.parent {  display: flex;}
.child {  display: block;}

你可以使用：

.parent {  display: flex;}

結(jié)論

希望我向你介紹的這5種如何避免簡(jiǎn)單錯(cuò)誤的方法對(duì)你有用，并且你也愿意接受我的建議。

謝謝你的閱讀！編程愉快！

來(lái)個(gè)【分享、點(diǎn)贊、在看】三連支持一下吧