作為Web開發人員應避免的10種css做法!
有人認為CSS很難學習，沒有什么邏輯可言，而且還坑很多，可能是大家對CSS還不是很了解，因為我提出了五個我不喜歡的開發者習慣，并向大家展示如何避免它們。
1. 設置邊距或填充，然后將其重置
- 我經常看到有人為所有元素設置邊距或填充，然后又將第一個或最后一個元素的值重置。
.item {
margin-right: 1.6rem;
}
.item:last-child {
margin-right: 0;
}
復制代碼
- 對于更簡單，更簡潔的CSS，請使用以下選項之一：nth-child / nth-of-type選擇器，：not（）偽類或相鄰的兄弟組合器，而后者又被稱為+。
.item:not(:last-child) {
margin-right: 1.6rem;
}
復制代碼
.item:nth-child(n+2) {
margin-left: 1.6rem;
}
復制代碼
.item + .item {
margin-left: 1.6rem;
}
復制代碼
2. 為position:absolute/fixed的元素添加display:block
.button::before {
content: "";
position: absolute;
display: block;
}
復制代碼
.button::before {
content: "";
position: fixed;
display: block;
}
復制代碼
- 你知道嗎？當你為一個element設置position: absolute 或 position: fixed的時候，默認就有display: block這個屬性！
- 因此，在這種情況下，如果你設置display:inline-*的時候，將會做如下的轉換inline或inline-block將轉換成block，inline-flex轉換成flex，inlone-grid轉換成grid，inline-table轉換成table
我們可以改成這樣：
.button::before {
content: "";
position: absolute;
}
復制代碼
.button::before {
content: "";
position: flxed;
}
復制代碼
3. 使用transform: translate (-50%, -50%)居中
- 讓一個element水平垂直居中，其中的一種解決方案是結合使用position: absolute和使用transform屬性。但是，這個技術在基于Chromium的瀏覽器中引起了模糊的文本問題。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
復制代碼
- 在引入flexbox之后，我認為該技術已不再適用。 問題是它不能解決文本模糊的問題。
- 而且，它使用了五個屬性。 因此，我想分享一個技巧，可以將代碼減少為兩個屬性。
- 我們可以使用margin:auto在flex容器內自動放置，瀏覽器將元素居中。 只有兩個屬性，僅此而已。
.parent {
display: flex;
}
.child {
margin: auto;
}
復制代碼
4. 在塊級元素上設置 width: 100%
- 我們經常使用flexbox創建一個多列網格，該網格逐漸轉換為單列。
- 為了將網格轉換為一列，開發人員使用寬度：100％。我不明白他們為什么這么做。網格元素是塊元素，默認情況下可以執行此操作，而無需使用其他屬性。
<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%;
}
}
復制代碼
- 因此，我們不需要使用width：100％，而是應該編寫媒體查詢，以便flexbox僅用于創建多列網格。
@media (min-width: 1024px) {
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
width: 25%;
}
}
復制代碼
5. 為Flex布局下的子元素，設置display: block
.parent {
display: flex;
}
.child {
display: block;
}
復制代碼
- 使用flexbox時，請務必記住，創建Flex容器（添加顯示：flex）時，所有子項（flex項）都會被阻塞。
- 這意味著子元素被設置為display：block，并且只能具有block。因此，如果你設置了inline或inline-block，它將更改為block，inline-flex=> flex，inline-grid=> grid和inline-table=> table。
- 因此，不需要為flex的子項元素添加display：block，瀏覽器默認就會添加。
6. 不需要使用px?的時候使用了
.parent {
padding: 0px;
}
復制代碼
- 您是否知道,要將一個值設置為0時,不需要加上px：
.parent {
padding: 0;
}
復制代碼
7. 重復相同的代碼?
.parent {
padding: 10px;
margin: 20px;
}
.child {
padding: 10px;
margin: 20px
}
復制代碼
- 始終牢記DRY規則。 不要重復自己。 代碼的數量將使你在應用程序的性能和加載時間方面付出代價。
.parent .child {
padding: 10px;
margin: 20px;
}
復制代碼
8. 使用顏色名稱
.parent {
color: red
}
復制代碼
- 使用顏色代碼更好：
.parent {
color: #fb0100;
}
復制代碼
9. 不用屬性簡寫的方式
.parent {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
復制代碼
- 當您可以用一行執行相同的操作時，請避免使用多行代碼：
.parent {
margin: 10px;
}
復制代碼
10. 沒有備用字體font fallback?
.parent {
font-family: Georgia;
}
復制代碼
- 那么在什么情況下瀏覽器將沒有您想要的字體？這很普遍。只有少數幾種字體被認為是“網絡安全”的-這意味著大多數訪問您網站的計算機都已安裝了該字體，因此瀏覽器可以使用該字體。
.parent {
font-family: Georgia, Arial, sans-serif;
}
復制代碼
