Как правильнее писать css код?

Question

[Антон Арестенко]

Учусь верстать, смотрю ролики от "Специалиста", а именно Сергея Алмазова. Рассказывает хорошо, все нравиться, так же задевалась тема препроцессора, в частности SCSS, он же SASS насколько я понял. В связи, с чем возник вопрос сначала о миксинах, например:

@mixin button() {
display: inline-block;
width: 100px;
height: 50px;
}

.attention-button {
@include button();
background: red;
}

danger-button {
@include button();
background: lime;
}

Насколько я понимаю что ширина и высота будет дублироваться в каждом из классов к который я подмешиваю данный миксин. В этом примере всего два свойства, но если будет идти речь о 10? и он будет подмешиваться еще порядка 10 кнопок, не проще ли создать отдельный класс? Возможно я не правильно понимаю назначение миксинов, и экстентов, насколько я понял это тоже самое только проще.
Второй вопрос по поводу разбития всего css кода на маленькие модули, например header это один файл .scss, а footer соответственно другой, а потом их склеивать при помощи коалы? Это вообще целесообразно? Или таким стоит пользоваться только в больших проектах?
И третий вопрос по поводу зависимостей. Как лучше писать?

header {
background: red;
height: 75px;
}

header nav ul li {
display: inline-block;
}

Или же лучше каждому элементу присвоить свой класс, к которому можно обратиться, не создавая сильной зависимости, что бы после того как в структуре html внесли изменения, у меня не поплыло все. То есть примерно:

header {
background: red;
height: 75px;
}

.menu-item {
display: inline-block;
}

или же правильно будет все таки:

header .menu-item {
display: inline-block;
}

Вопрос получился длинным, к сожалению, не получилось сформулировать проще...

Answer 1

[devstudent]

1. Миксины полезнее для свойств с префиксами и параметрами. В вашем примере в миксине нет параметров, просто набор свойств. Для списка свойств можно просто создать класс, а потом его вписать так: @extend .classname; в нужном месте. Или прописать этот класс элементу в разметке.
2.не стоит создавать излишней конкретики вложенности , если этого не требуется. в будущем, если понадобится, можно обертку добавить. Это к тому же лишит возможности использовать классы повторно в других элементах.
3.Лучше присвойте классы каждому элементу, хотя кажется, что header nav ul li писать быстрее, классы придуманы для стилизации, а теги для структуры документа. Вы сможете потом использовать их повторно, поставив другому элементу.

Comments

[Danila]

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

а миксины действительно стоит использовать тогда, когда нужно иметь возможность изменять параметры свойств, например, только в этом случае свойства будут дублироваться в цсс.

насчет разбиения файлов, конечно стоит использовать модульность, даже на маленьких проектах, гораздо легче управлять маленькими модулями, нежели одним файлом на 1к строк. Обычно создают main.scss который предназначен исключительно для импортов всех модулей проекта.

[Danila]

и экстенду не обязательно присваивать класс когда это не нужно, можно использовать плейсхолдер
%btn {
....
}

.button {
@extend %btn;
}

Answer 2

[Сергей delphinpro]

В вашем случае это должен быть extend
Миксин примерно для таких задач

%button {
  display: inline-block;
  width: 100px;
  height: 50px;
}
@mixin button-color($color, $text) {
  background: $color:
  color: $text;
  border: 1px solid $text;
}
.attention-button {
  @extend %button;
  @include button-color(red, white);
}

danger-button {
  @extend %button;
  @include button-color(lime, white);
}

Comments

[Nikolay Talanov]

Кстати, я раньше тоже всегда юзал экстенды, ибо они логичнее подходят для такого + кажется что перформанс лучше. А потом это прочел csswizardry.com/2016/02/mixins-better-for-performance
Так что можно смело все на миксинах делать, даже меньше по размеру все получится.