>Zina: /* Хорошо vs плохо */

2023-01-08T08:39:15Z

Хорошо vs плохо

Нова сторінка

== Хорошо vs плохо ==

=== REM вместо EM ===

[https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font-size/ Use Rems for Font Size to Respect User Preferences]

=== Чем меньше CSS «знает» про структуру HTML, тем лучше ===

''Источник: [http://web-standards.ru/articles/css-architecture/ Архитектура CSS — Веб-стандарты]''

CSS определяет, как выглядит ваш компонент, а HTML применяет этот вид к элементам на странице.

<source lang="css">
/* Граната */
#main-nav ul li ul { }

/* Снайперская винтовка */
.subnav { }
</source>

=== Задайте пространство имён ===

Мы уже выяснили, почему родительские селекторы не всегда на 100% эффективны для ограничения действия и пересечения стилей. Гораздо лучший подход — добавить пространство имён к самим классам. Если элемент является частью визуального компонента, то каждый из классов его вложенных элементов должен использовать имя класса базового компонента в качестве пространства имён.

<source lang="css">
/* Высокий риск пересечения имён классов */
.widget { }
.widget .title { }

/* Низкий риск пересечения имён классов */
.widget { }
.widget-title { }
</source>

Добавление пространства имён к классам делает ваши компоненты самодостаточными и модульными. Это также уменьшает вероятность конфликтов с уже существующими классами и снижает специфичность, необходимую для оформления дочерних элементов.

=== Расширяйте компоненты модификаторами классов ===

Когда существующий компонент должен выглядеть чуть иначе в некотором контексте, создайте модификатор класса, чтобы расширить его.

<source lang="css">
/* Плохо */
.widget { }
#sidebar .widget { }

/* Хорошо */
.widget { }
.widget-sidebar { }
</source>

Мы уже рассмотрели все недостатки изменения компонентов на основе их родительских элементов, но для закрепления: модификатор класса может использоваться где угодно, переопределение на основе вложенности — только в конкретной ситуации. Модификатор класса также может использоваться сколько угодно раз. Наконец, модификаторы класса очень ясно выражают намерения разработчика прямо в HTML. Классы, основанные на вложенности, напротив, полностью скрыты для разработчика, который смотрит только на HTML, что сильно увеличивает вероятность, что они от него ускользнут.

=== Сохраняйте селекторы короткими ===

''Источник: [https://webref.ru/layout/advanced-html-css/performance-organization Производительность и организация | WebReference]''

Есть несколько преимуществ, зачем сохранять селекторы CSS при возможности короткими. Они включают в себя минимизацию специфичности, что позволяет лучше наследоваться и переноситься, плюс повышение эффективности. Длинные, более точные селекторы снижают производительность, поскольку они заставляют браузер отображать каждый отдельный селектор типа справа налево. Это также накладывает бремя на все остальные селекторы, чтобы они стали более специфичными.

<source lang="css">
/* Плохо */
header nav ul li a {...}

/* Хорошо */
.primary-link {...}

/* Плохо */
button strong span {...}
button strong span .callout {...}

/* Хорошо */
button span {...}
button .callout {…}
</source>

В приведённом выше коде первый селектор весьма специфичен и может быть намного быстрее идентифицирован и показан с помощью класса. Кроме того, использование класса в этом случае значительно снижает необходимость определения родителей этого элемента, что позволяет элементу со временем менять своё местоположение без нарушения каких-либо стилей.

Второй пример включает в себя более короткие селекторы, чем в первом примере, но они могут быть улучшены путём обеспечения такого же уровня специфичности для каждого селектора. Избегайте применения чрезмерно конкретных селекторов, взамен это уменьшит шанс нарушения должного порядка элементов при их изменении. Удалив некоторые отдельные блоки селекторов и дав всем селекторам одинаковую силу, всё это позволит им лучше взаимодействовать.

Вообще, цель коротких селекторов — уменьшить специфичность, создать чистый, более отзывчивый код.

=== Предпочитайте классы ===

Классы это хорошо, потому что они отображаются быстро, позволяют повторно использовать стили и широко применяются при создании сайта. Существуют общие методы применения классов, которые позволяют увидеть, что классы работают должным образом.

Поскольку селекторы отображаются справа налево, важно следить за ключевым селектором. Это селектор в самом конце, крайний справа. Ключевой селектор имеет решающее значение, поскольку он определяет первый элемент, который браузер собирается найти. Плохой ключевой селектор может отправить браузер охотиться на диких гусей. Не бойтесь использовать класс, чтобы сделать элемент более уникальным, просто во благо производительности.

Кроме того, не предваряйте селектор класса элементом. Это запрещает стилям применяться к разным элементам и повышает общую специфичность селектора.

<source lang="css">
/* Плохо */
#container header nav {...}

/* Хорошо */
.primary-nav {...}

/* Плохо */
article.feat-post {...}

/* Хорошо */
.feat-post {…}
</source>

=== Повторное использование кода ===

Одно из самых больших падений производительности приходит с раздуванием размера файла и ненужным отображением в браузере. Одним из быстрых способов, который поможет во многом сократить размеры CSS-файла, является повторное, насколько это возможно, использование стилей. Любые повторяющиеся стили или шаблоны интерфейса должны быть объединены, задействуя общий код. Если два модуля используют одинаковый фон, закругленные уголки и тень у блока, нет причин явно указывать те же стили два раза. Вместо этого они могут быть объединены в одном классе, стили при этом пишутся один раз.

Повторно используемый код не должен работать за счёт семантики. Одним из методов может быть соединение селекторов вместе, разделяя их запятой и позволяя одинаковым стилям наследоваться сразу двум селекторам. Другой подход, который часто встречается в ранее упомянутых методологиях OOCSS и SMACSS, включает в себя привязывание стилей к одному классу, а затем использование нескольких классов в одном элементе.

<source lang="css">
/* Плохо */
.news {
background: #eee;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.social {
background: #eee;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

/* Хорошо */
.news,
.social {
background: #eee;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

/* Ещё лучше */
.modal {
background: #eee;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}</source>

Между этими применяемыми подходами нет большой разницы, так как код используется повторно, а общий размер файла уменьшается.

=== Тихие %placeholder ===

Лучше, чем mixin.

* https://youtu.be/vXW7w3ym8hg?t=23m42s
* http://codezona.com/css3-rules-oocss.html

[http://jsfiddle.net/m8tkdh5y/24/ Демо]

'''Плохо:'''

<source lang="html5">
<-- Чистый CSS -->
<div class="wrapper">
<a href="#" class="btn linkedin">Linkedin</a>
<a href="#" class="btn myspace">Myspace</a>
</div>
</source>
<source lang="css">
.btn {
border:2px solid gray;
padding:5px 15px;
border-radius:5px;
color:white;
font-weight:bold;
}

.linkedin {
background:blue;
}
</source>

'''Хорошо:'''

<source lang="html5">

<div class="wrapper">
<a href="#" class="blue">Linkedin</a>
<a href="#" class="red">Myspace</a>
</div>
</source>
<source lang="css">
/* SASS %placeholder selector. %button НЕ записывается в css */
%button {
border:2px solid gray;
padding:5px 15px;
border-radius:5px;
color:gray;
font-weight:bold;
}
.yellow {
@extend %button;
background:yellow;
}
.pink {
@extend %button;
background:pink;
}</source>

== Правила ==

''Источник: [http://web-standards.ru/articles/css-architecture/ Архитектура CSS — Веб-стандарты]''

=== Правила для Sass ===

* Никогда не вкладывайте правила только для организации кода. Вкладывайте только тогда, когда это нужно в CSS на выходе.
* Никогда не используйте примеси (<code>mixin</code>), если не передаёте аргумент. Примеси без аргументов гораздо лучше использовать в качестве шаблонов, которые можно расширить.
* Никогда не используйте <code>@extend</code> для селектора, который не является одиночным классом. Это не имеет смысла с точки зрения дизайна и раздувает скомпилированный CSS.
* Никогда не используйте <code>@extend</code> для компонентов интерфейса в модификаторе компонента, иначе вы нарушаете цепь наследования (подробнее об этом дальше).

=== Правила для CSS ===

* Не допускайте ID в своих селекторах.
* Не используйте несемантические типы селекторов (<code>div</code> и <code>span</code>, напр.) для любого неодиночного правила.
* Не используйте больше двух комбинаторов в селекторе.
* Не допускайте использование классов, начинающихся с <code>.js-</code>.
* Внимание, если раскладка и позиционирование применяются в правилах для элементов без префикса <code>.l-</code> в названии класса.
* Внимание, если класс, определённый сам по себе, позднее переопределяется как дочерний или иначе.

=== Правила для HTML ===

* Внимание, если один и тот же ID используется на странице два раза.
* Не используйте классы, не упомянутые ни в одном из файлов стилей или передайте список разрешённых (с префиксом <code>.js-</code>, например.)
* Классы модификаторов не должны использоваться без их базовых классов.
* Классы вложенных объектов не должны использоваться в отсутствие родительского базового класса.
* Простые элементы <code><nowiki><div></nowiki></code> и <code><nowiki><span></nowiki></code> не должны использоваться в HTML без назначенных классов.

== См. также ==

[https://github.com/necolas/idiomatic-css/tree/master/translations/ru-RU Принципы написания однородного CSS-кода] — github.com/necolas/idiomatic-css

[[Категория:CSS]]

Правила CSS и HTML - Історія редагувань

>Zina: /* Хорошо vs плохо */