x
 
Ксения
6 апреля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Руст, какую систему именования выбрать для небольшого проекта — БЭМ, SMACSS или что-то другое?


Выбирайте ту, которая вам больше нравится или придумайте свою :-)

Мне не нравилось ничего, поэтому я придумал свой способ именования. Через несколько лет я узнал, что всё это время пользовался системой из БЭМа с некоторыми отклонениями.

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

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


/* form.css */
.form-button {
  border-radius: 3px;
  height: 30px;
  padding: 0 10px;
}

/* section.css */
.section-button {
  border-radius: 3px;
  height: 40px;
  padding: 0 10px;
}
С дублированием

/* button.css */
.button {
  border-radius: 3px;
  padding: 0 10px;
  height: 30px;
}

.button.is__large {
  height: 40px;
}



Без дублирования

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

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


.card {
	flex-grow: 1;
}
.boldtitle {
	font-weight: bold;
}
.bottom_string {
	color: red;
}
Чтобы понять, что описывают эти классы, придётся найти их в разметке

.bookCover {
	flex-grow: 1;
}
.bookCover-title {
	font-weight: bold;
}
.bookCover-author {
	color: red;
}
Сразу понятно, что описана обложка книги

Модульность задаёт чёткую и понятную систему, в которой легко разобраться. Она упрощает поддержку проекта и делает возможной его передачу в другие руки.

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

P. S. Я ищу фронтендера в издательство.

P. P. S. В среду 12 апреля в Коворкафе буду отвечать на вопросы о фронтенд-разработке. Приходите.

P. P. P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Рецепт: бегущая строка на сайте без Яваскрипта 2 Как правильно работать с начертаниями подключаемого шрифта в ЦСС? Что дизайнеру стоит знать о якорных ссылках? Чем дизайнеру могут помочь инструменты разработчика? Анализ сетевых запросов




Недавно всплыло

Интерфейс штор, как оценить навыки сотрудника, не владея ими и как улучшить объявление 1 5 1 Диаграмма футбольных трансферов. Результат 5