Урок 04 · 10 хв

@extend обережно

Групує селектори. Легко склеїти те, чого не хотів. Для кнопки частіше mixin або клас в HTML.

%btn { … } — тихий шаблон. .primary { @extend %btn; } збереться в групу селекторів без %. Звучить економно. Насправді extend тягне селектор в усі місця, де брав участь шаблон, і дифф CSS стає нечитабельним. Новачку: mixin або просто спільний клас .btn.

Краще клас у розмітці

Можна спитати про це правило«Extend не для медіазапитів наосліп»

%placeholder не потрапить у CSS, доки хтось не зробить extend.
Ланцюжок extend — пекло у великому файлі. Не будуй ієрархію «як в ООП».
Побачив у чужому коді @extend — прочитай вихідний CSS, а не лише вихідник.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. Для повтору padding безпечніше
2. %placeholder без extend
3. Чому extend часто не люблять?