关于骷髅的一些问题

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伪元素直接在需要它的元素上包含一个微清除.这太棒了.

但是,在此之前,你会看到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>