关于骷髅的几个问题

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>