Несколько вопросов о Skeleton

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; 
} 

---

Selector группировки

Эти первые две группы не являются универсальными селекторы - они просто селекторы тега/атрибутов, и они совершенно производительный. Вы заметите, что они не могут быть объединены в один селекторный набор, потому что вторая большая группа несколько отличается: она не нацелена на <select> элементов.

Это потому, что элементы <select> являются глупыми и должны быть оставлены UA, с которыми нужно иметь дело.

---

Этот набор селектор является более широким, чем первые два, учитывая есть all types of <input> elements, что вы могли бы хотеть предназначаться с этим, что не было в предыдущей группировке.

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

Различия имеют значение, если вы не хотите смешивать свои стили и перегружать неправильные вещи.

---

Clearfix

Наконец, clearfix.

В настоящее время вы обычно включаете micro 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>