关于骷髅的几个问题

Question

我最近发现 this "boilerplate" 并立即爱上了它，主要是因为它简单、非常轻巧，并且与其他 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 实用程序 class :after。

查看他们的 github 页面，最后一次更新是大约 7 个月前，所以我想他们不会发布任何修复程序。

虽然我不是 CSS 大师，所以我想问一下我的怀疑是否正确，最后，你能给我一些以相同方式工作的其他 CSS 框架的名称吗但不是写得那么糟糕吗？

Answer 1

不幸的是，我认为您对此处显示的几乎所有问题的理解都有点误入歧途。让我们尝试解决这个问题。

什么是通用选择器？

中的 universal selector是星号：(*)

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

您将看到的一个常见用例是 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 伪元素直接在需要它的元素上包含一个微型 clearfix。还不错。

然而，在它流行之前，您会看到 clearfix 元素。这就是 .u-cf class 的用途，尽管 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>

关于骷髅的几个问题

A few questions about Skeleton

css

skeleton-css-boilerplate

什么是通用选择器？

选择器分组

Clearfix