关于Skeleton的几个问题

Question

我最近发现了这个"样板"，并立即爱上了它，主要是因为它简单、非常轻量级，而且与其他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

不幸的是，我认为您对这里所显示的问题的理解有点错误。让我们试着补救一下。

什么是通用选择器

通用选择器是星号符号：（*）

通用选择器实际上是一个通配符。它将匹配上下文中的任何元素。通用选择器在嵌套时性能较差，在这种情况下应该避免使用。

您将看到的一个常见用例是box-sizing的全局重置。

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

---

选择器分组

前两组并不是通用选择器——它们只是标记/属性选择器，而且性能非常好。您会注意到，它们不能合并到一个选择器集中，因为第二个大组略有不同：它不针对<select>元素。

这是因为<select>元素是愚蠢的，应该留给UA来处理。

---

这个选择器集比前两个更广泛，考虑到您可能想要针对的<input>元素的所有类型都不在早期的分组中。

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

如果你不想混合你的风格，不想让错误的东西超载，那么差异就很重要。

---

Clearfix

最后是clearfix。

现在，您通常通过::after伪元素的方式，在需要的元素上直接包含一个microclearfix。非常棒。

然而，在它流行之前，您会看到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>