關於骷髏的幾個問題

Question

我最近發現this「樣板」，並立即愛上它，基本上是因爲它簡單，很輕巧，不像其他css框架，不會影響你的設計。

看着它的源代碼，但是，它提出了一些問題，例如像這部分在這裏

input[type="email"], 
input[type="number"], 
input[type="search"], 
input[type="text"], 
input[type="tel"], 
input[type="url"], 
input[type="password"], 
textarea, 
select { 
    height: 38px; 
    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 
    background-color: #fff; 
    border: 1px solid #D1D1D1; 
    border-radius: 4px; 
    box-shadow: none; 
    box-sizing: border-box; } 
/* Removes awkward default styles on some inputs for iOS */ 
input[type="email"], 
input[type="number"], 
input[type="search"], 
input[type="text"], 
input[type="tel"], 
input[type="url"], 
input[type="password"], 
textarea { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
      appearance: none; } 
textarea { 
    min-height: 65px; 
    padding-top: 6px; 
    padding-bottom: 6px; } 

喜歡的話是不夠壞，他們使用帶屬性的普遍選擇，但他們做兩次？

我下面幾行看到這部分

input, 
textarea, 
select, 
fieldset { 
    margin-bottom: 1.5rem; } 

這可能是插入我提到以前的規則集，並避免雙（或三）普遍選擇。

這裏的另一個

.container:after, 
.row:after, 
.u-cf { 
    content: ""; 
    display: table; 
    clear: both; } 

的clearfix實用類缺少:after。

看着他們的github頁面，最近的更新大約是7個月前，所以我想他們不會發布任何修復。

雖然我不是CSS大師，但是我想問一下，如果我的懷疑是正確的，並且最終可以給我一些其他CSS框架的名稱，但是其工作方式相同，但寫得不好嗎？

Answer 1

不幸的是，我相信你對你對這裏顯示的問題的理解有點誤導。讓我們試着補救。

什麼是通用選擇器？

的universal selector是星號（* ）

通用選擇是一個通配符，真的。它將在其上下文中匹配任何元素。通用選擇器嵌套時性能較差，在這種情況下應避免使用。

你會看到的一個常見用例是全球重置box-sizing。

*, 
*::before, 
*::after { 
    box-sizing: border-box; 
} 

---

選擇分組

那些前兩組是不是普遍選擇 - 他們只是標籤/屬性選擇，他們是完全高性能。您會注意到它們不能合併到一個選擇器集合中，因爲第二個大集合稍有不同：它不是針對<select>元素。

這是因爲<select>元素很蠢，應該留給UA去處理。

---

此選擇集比前兩種更廣泛，考慮到有all types of <input> elements，你可能想用這個目標，那是不是在較早的分組。

input, 
textarea, 
select, 
fieldset { 
    margin-bottom: 1.5rem; } 

如果你不想混合你的風格，並重載錯誤的東西，差異很重要。

---

Clearfix

最後，clearfix。

現在，您通常通過::after僞元素直接在需要它的元素上包含一個micro clearfix。這非常棒。

但是，在此流行之前，您會看到clearfix元素。這就是.u-cf班，content變得毫無意義。

body > div { 
 
    background-color: #555; 
 
} 
 

 
.myFloat { 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    
 
    background-color: #aaa; 
 
} 
 

 
.u-cf { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
}

<div> 
 
    <div class="myFloat"></div> 
 
    <div class="myFloat"></div> 
 
    <div class="myFloat"></div> 
 
    <div class="u-cf"></div> 
 
</div>