Эффективная разработка фронтенда на Drupal

Главные вкладки

gun_dose 3 декабря 2016 в 23:48
6

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

Сразу оговорюсь, что имеется в виду разработка коммерческих сайтов с уникальным дизайном, т.е. по макетам, нарисованным профессиональным дизайнером, не лишённым навыков и чувства вкуса. Под словом "эффективность" понимается простота и скорость самого процесса разработки. Изложенная ниже информация почерпнута не из умных книжек, а из жизненного опыта. Итак, начнём.
1. Выучи уже наконец-то CSS!
Звучит глуповато? Но не настолько глупо, как вопросы разработчиков с почти 10-летним стажем о том, как увеличить кнопку при наведении. Нормальные люди в помощью CSS рисуют попугаев и даже создают игры, а ты даже не знаешь, как приделать треугольничек к всплывающей подсказке, не вводя новых html-элементов. Изучи каскады, специфичность, анимации через transition и keyframes, гадиенты там всякие, особенности разных position, псевдоклассы, псевдоэлементы. И не мучай людей дурацкими вопросами - всё давно написано в гугле.

2. Используй препроцессоры.
SASS или LESS - это по вкусу, но ни в коем случае не копайся в богомерзком CSS! Недавно слышал мнение одного признанного специалиста, что ему препроцессоры не нужны, т.к. в его проектах обычно поверх базовой темы порядка 200 строк оверрайда CSS. Ну если ты делаешь сайты для гиков вроде себя или меня, то бутстрап с другим логотипом вполне сойдёт, а нормальным людям такое не интересно, поэтому и денег тебе за такое никто не даст. В любом коммерческом сайте будет от 3000-5000 строк CSS и выше, потому используй препроцессоры, чтобы не копипастить куски длинных селекторов и не насиловать скролл в поисках нужного цвета. Что касается сборщика (компилятора), сейчас в моде gulp. Хотя можно использовать и что-нибудь другое, более того, при должном умении тебя не будет смущать, что проект до тебя скомпилировали чем-то другим, если он попал к тебе на доработку, можешь перекопилировать тем, чем тебе удобно, главное, предварительно изучить старый конфиг, чтобы не упустить ничего, например автопрефиксер. А некоторые вообще компилят LESS и SASS саблаймом или PHPStorm-ом, что, должно быть удобно, но не так гибко настраиваемо.

3. Используй CSS-фреймворки.

Благо их полно на любой вкус. Никто не сомневается в твоих способностях задавать ширину колонкам, но фреймворки принято использовать лишь потому, что многие вещи там сделаны до тебя. Вопреки распространённому мнению, CSS-фреймворки не делают сайты похожими друг на друга. Любой вменяемый дизайн можно сделать одинаково хорошо на любом фреймворке, либо без него, внешне различий не будет, но будут различия в затраченном времени. Не забываем предыдущий пункт, поэтому должно быть ясно, что под CSS-фреймворком понимается его SASS или LESS-версия. Раньше я использовал Zen-grids, сейчас использую Bootstrap. Бутстрап, конечно, будет помощнее. Бутстрап - это не только сетка и менюшка-гамбургер. Там полно совершенно потрясающих вещей, таких, как bootstrap-modal, с помощью которого достаточно обернуть блок в нужный класс и сделать ссылку с нужным классом, по клику на которую блок будет всплывать в модульном окне, а по умолчанию он будет скрыт. Весьма удобно для небольших форм, например обратного звонка. А буквально на днях я узнал, что там есть даже карусель Smile Пусть и сильно простая, но иногда сойдёт. В общем, не поленись изучить документацию по используемому фреймворку и жить станет легче.
4. Наследуйся от базовых тем.
Под любой распространённый фреймворк есть базовая тема drupal. Благодаря использованию базовой темы, ты получишь уже сконфигурированный фреймворк, останется только навести красоту. Более того, я рекомендую использовать те темы, которые поддерживают создание субтем через drush, ибо взрослому дяде не подобает руками копаться в файлах, копируя и переименовывая их. Именно поэтому я использую не bootstrap, а Radix. Есть там правда один маленький косяк, я писал об этом здесь, но пока не пофиксили, т.к. надо будет немного переписать drush-команду. Обязательно изучи документацию по используемой теме, в первую очередь почитай, как там надо запускать Gulp. Некоторых смущает, что в базовых темах и генерируемых субтемах "много хлама". На самом деле это не так. Там отражён правильный и стандартизованный подход к темизации, а если ты привык всё валить в один файл - переучивайся.

5. Всегда начинай вёрстку с переопределения variables.
Есть в любой нормальной теме файл _variables.scss или _variables.less. В этом файле описаны все базовые переменные - брейкпоинты, цвета, размеры и типы шрифтов и т.д. Этот файл нужно обязательно изучить вдоль и поперёк и переопределить всё под текущий проект, ибо не зная этого, можно написать десятки строк кода, переопределяя, к примеру, цвет и размер инпутов вместо того, чтобы задать значения двум-трём переменным.

6. Сделай нормальную легенду цветов.
Легенда цветов должна быть по схеме "название цвета: код цвета; назначение цвета: название цвета". Почему? Расмотрим пример:

$gray: #ccc;
input {
  background-color: $gray
}
button {
  color: $gray;
}

Вроде бы всё круто. Если нам понадобится сменить оттенок серого, то мы можем сделать это в одном месте. А что будет, если нам для кнопок и инпутов вдруг понадобится два разных оттенка? Придётся лезть в код и выискивать, где мы применяли переменную $gray и менять её на другую. Но ведь можно сделать проще:

$gray: #ccc;
$input_bg: $gray;
$button_color: $gray;
input {
  background-color: $input_bg;
}
button {
  color: $button_color;
}

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

7. Используй классы фреймворка в шаблонах.

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

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

Кстати, во многих фреймворках есть миксины, имитирующие поведение стандартных классов, поэтому вовсе не обязательно писать на каждую мелочь шаблоны или препроцессы и уж тем более не обязательно вручную задавать все ширины и отступы, когда можно просто написать что-то вроде "include make-sm-column(3)" и элемент будет вести себя так же, как если бы у него был класс ".col-sm-3".

8. Структурируй код
Не вали весь свой код в один файл. Подключай импортом к одному файл много своих less или sass-файлов и компилируй их в один css. В большинстве распространённых тем в субтеме уже есть множество заготовок в виде пустых файлов.
scss-structure Если надо, создавай свои файлы, главное, чтобы стили в них были объединены тематически. Зачем так делать? Есть три причины:
1. Звук скролла твоей мышки раздражает окружающих.
2. От обильного пользования скроллом может развиться туннельный синдром
3. Преждевременно вышедшие из строя мышки загрязняют окружающую среду.
Если этих причин недостаточно, то поверь на слово, что навигация по коду становится намного более быстрой, порой можно даже не смотреть номер строки в фаербаге, ведь и так понятно, в каком файле текст, а в его 200 строках всё как на ладони.

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

nav > li {
  display: block;
  [user=include]include[/user] breakpoint(md) {
    display: inline-block;
  }
}

Например, как в примере выше. Тут мы использовали миксин breakpoint - довольно удобная штука, подобное есть во многих фреймворках, поэтому не лишним будет изучить, как пользоваться этим миксином. Как правило, breakpoint задаёт min-width, следовательно, правила по умолчанию пишутся под самый маленький экран и с увеличением экрана могут переопределяться. Однако по ситуации можно писать и более сложные запросы, например, с указанием максимальной и минимальной ширины одновременно. И конечно же, не забудь про media print {} ! В 21 веке только идиоты пишут какой-то отдельный функционал для версий для печати, а у нормальных людей под печать просто отдельные правила CSS.

10. Используй миксины
Любой фрагмент кода, состоящий из более, чем трёх строк, встречающийся в коде более двух раз, уже достоин того, чтобы стать миксином. Заверни в миксины всякие часто встречающиеся в проекте градиенты, тени и т.д.

11. Не используй монструозные модули для слайдеров

Взять к примеру тот же Slick - чтобы повесить его на вьюху, надо скачать библиотеку Slick, установить его модуль, а также отдельный модуль для вьюс и ещё чёрти что. И это для того, чтобы получить интерфейс с десятками настроек, которые надо настраивать отдельно под каждый слайдер на сайте. А потом ещё будешь, как дурак, переопределять его стандартные стили. Зачем? Можно же проще - берём slick.min.js, подключаем его к своей теме, а в скрипте темы инициализируем slick всего парой строчек js. При этом html-разметку вообще не надо переопределять.

Вангую вонь в комментах по поводу того, что нет смысла подключать скрипт, который, возможно, нужен не на всех страницах. Могу сразу ответить на это: slick.min.js месит 41 килобайт и при включенной агрегации js пусть лучше он загрузится на первой странице, закэшируется в браузере и не будет создавать при загрузке других страниц лишник http-запросов.

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

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

И традиционно в качестве пиара моего говнобложика ссылка на оригинал статьи: http://wellsolutions.by/article/effektivnaya-razrabotka-frontenda-na-drupal

Автор

Комментарии

Аватар пользователя negociant negociant 4 декабря 2016 в 12:27

gun_dose wrote:

Ни для кого не секрет, что html-код, выдаваемый друпалом по умолчанию избыточен и содержит множество обёрток.

gun_dose wrote:

сейчас использую Bootstrap

Избавляемся от друпал оберток и следом тянем тянем бутстрап обертки с их классами? Последовательно было бы использовать для той же сетки susy.

Аватар пользователя gun_dose gun_dose 4 декабря 2016 в 12:36
1

А что, в бутстрапе прямо много обёрток? contaner или его аналог будет в любой вёрстке - это ширина контентной части. Далее в бутстрапе нужен только row и col. А что даёт друпал по умолчанию? Рассмотрим на примере вьюхи, выводящей анонсы новостей у нас получится:
view - view-content - views-row - article - content

При использовании бутстрап во вьюхе в админке даём всей вьюхе класс row, класс строки задаём col-sm-3, а оставшиеся три обёртки (view-content - article - content) можем смело выпиливать.

А ведь ещё с филдов можно безболезненно выпилить как минимум половину обёрток.

Аватар пользователя deadie deadie 4 декабря 2016 в 16:33
1

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

Аватар пользователя gun_dose gun_dose 5 декабря 2016 в 14:25
1

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

Аватар пользователя gun_dose gun_dose 5 декабря 2016 в 16:02

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

Аватар пользователя gun_dose gun_dose 5 декабря 2016 в 23:54
1

А там обычный скрипт, который отслеживает попадание блока во вьюпорт и присваивает класс. И анимация в цсс сделана через keyframes. Наверное, лучше было бы через transition, но это всё делалось больше двух лет назад, когда я ещё многого не знал и не умел))

Аватар пользователя gun_dose gun_dose 6 декабря 2016 в 9:39

ХоолиGUN wrote:

В том то и дело, что для того, чтобы расположить колонки и "ничего не поехало" нужен лишний row. Извини, но бутстрап настолько убог, насколько избыточен

В контексте друпала он не такой уж и лишний. На примере вьюсов row можно привесить к views-content, а на примере полей к field-items. На всю страницу уже можно и добавить одну лишнюю обёртку: конструкция

<div class="row"></div>

весит целых 22 байта))

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

Один из минусов бутстрапа - его скомпиленный цсс будет порядка 10000 строк, что как бы совсем не мало. Хотя это не так грузит клиентскую машину, как 10МБ es6-скриптов, как это принято у некоторых))))

Аватар пользователя gun_dose gun_dose 6 декабря 2016 в 13:27

Ну так и zen-grids то же самое почти. Какая вообще разница? И то, и другое по-своему хорошо. Глобальная проблема же не в том, что у кого-то стили больше килобайт весят, а в том, что люди не знают, как им "расширить сайт" или как сделать, чтобы "блоки выезжали"))

Аватар пользователя bumble bumble 6 декабря 2016 в 14:03

Бутстрап - он повсюду.
Сейчас даже контент-менеджеры имеют навыки верстки статей на бутстрапе, не имея навыков верстки на HTML (не однократно приходилось подпиливать CKEditor для доступности в нем детища твиттера).
Только из-за этого его приходится использовать. В действительности он - да, избыточен, но функционален.

Это решение, что называется, "из коробки". И за это приходится платить.

Аватар пользователя sergeybelya sergeybelya 6 декабря 2016 в 14:39

Не совсем понял, но я хотел только сказать автору поста, что бутстрап и вообще css-фреймворки это не панацея и не так уже и подходят под большинство задач, вот еще хорошая статья https://habrahabr.ru/company/jugru/blog/316308/ как по мне.

Аватар пользователя bumble bumble 6 декабря 2016 в 14:48

Lol Ну о разном же! В препроцессорах ведь все равно CSS используется.
А имелось ввиду необходимость знания инструмента (CSS).

Аватар пользователя gun_dose gun_dose 6 декабря 2016 в 15:05
1

Любой CSS-документ с ходу является валидным LESS или SASS. Не зная CSS, никакие препроцессоры тебе не помогут. Не вижу никаких противоречий. CSS - это результат работы препроцессора, и CSS необходимо знать. Но писать CSS напрямую - полное извращение. Что непонятного то?

По поводу БЭМ против фреймворков всё очень спорно. Бывает дадут дизайн и сидишь думаешь, что же можно повторно заюзать - а ничего практически, кроме пары миксинов и сетки.

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

Аватар пользователя sergeybelya sergeybelya 6 декабря 2016 в 15:53

gun_dose wrote:

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

Тогда корректнее было бы вам написать - копайся в .scss-файлах, а не в .css.
gun_dose wrote:

Бывает дадут дизайн и сидишь думаешь, что же можно повторно заюзать - а ничего практически, кроме пары миксинов и сетки.

Так с бутстрапом-то та же история на самом деле, а зачастую он совершенно не подходит. Вы предлагаете использовать его (или другой фреймворк) во всех проектах, я считаю, что это неверно.
gun_dose wrote:

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

Ну Амазон там был лишь один из примеров, те же лендинги там тоже вполне уместно были рассмотрены как тип проектов, для которых бутстрап скорее помеха. По поводу половины (может даже и не половины, а процентов 80-90) здешних юзеров согласен с вами, но это не имеет отношения к теме вашей статьи.

Аватар пользователя sergeybelya sergeybelya 6 декабря 2016 в 16:39

Предлагаю действовать по ситуации) Кстати, если вы успели заметить, базовая тема classy в восьмерке использует БЭМ, хорошо это или плохо - не знаю.

Аватар пользователя gun_dose gun_dose 6 декабря 2016 в 16:42

Хз, я первым делом на восьмёрку радикс накатил )))

Что касается БЭМ - знаю, что это очень круто, но не использую и не знаю никого, кто использует)))

Аватар пользователя VasyOK VasyOK 4 июля 2017 в 23:32

Можно вопрос.
Зачем это все:

$gray: #ccc;
$input_bg: $gray;
$button_color: $gray;
input {
  background-color: $input_bg;
}
button {
  color: $button_color;
}

Если можно просто:

.white-text {
  color: white;
}
.black-bg {
  background-color: black;
}

<div class="white-text  black-bg">Hello!</div>

Аватар пользователя Mihail.space Mihail.space 4 июля 2017 в 23:46

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

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

Аватар пользователя VasyOK VasyOK 5 июля 2017 в 0:00

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

И классы нужны для того же самого. Для использования одного и того же значения в разных местах. Разве нет?

Т.е. эти переменные нужно использовать только когда нет возможности использовать классы?

Аватар пользователя VasyOK VasyOK 4 июля 2017 в 23:57

Имхо преимущество Друпала, что можно добавить классы практически как всему. Блокам, регионам, вьюхам, менюхам.

Аватар пользователя gun_dose gun_dose 5 июля 2017 в 7:47

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

Аватар пользователя VasyOK VasyOK 5 июля 2017 в 1:21

"Итак что проще, в одном месте поменять переменные цветов или искать все классы red и проставлять им background: green?"
А зачем их искать? Класс на то и класс чтобы его вешать на все элементы. Т.е.

.red {
  background-color: green;
}

Но это же меняется один раз и необязательно же класс должен говорить о цвете. Ну будет не .red , а .tcvetastaya_zalivka

Аватар пользователя VasyOK VasyOK 5 июля 2017 в 2:35

background: darken($basecolor, 20%)
color: invert($basecolor) - такие конструции - верю, будут легче. Только это к дизеру больше.

"По твоей схеме приходится менять все значения." - не придется. Класс то всего один раз прописан:

.basecolor {
 background: #332288;
}
.basecolor:hover {
  background: #332200;
}
<div class="panel basecolor">Hello!</div>

и не zalivka2, zalivka3, а zalivka_temnee, zalivka_svetlee, zalivka_ectcho_svetlee

Или профит, достигается тем, что все нужные классы идут под переменной $basecolor в препроцессоре, а не раскиданы по всему сайту в tpl.php файлах, блоках, вьюхах?

Аватар пользователя VasyOK VasyOK 5 июля 2017 в 3:37

Нет, для одного класса столько разных свойств указать. Lol

Хорошо, допустим вы c gun_dose-ом сделали сайт, потом этот сайт попал мне. Каким образом мне понять что на сайте используется препроцессор?
В firebug (или в чем то другом) можно выловить этот код и файл в котором он находится (?):

$basecolor = #332288
.btn
  background: $basecolor
Аватар пользователя gun_dose gun_dose 5 июля 2017 в 7:51

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

Аватар пользователя VasyOK VasyOK 6 июля 2017 в 1:27

Хорошо, вот тема оформления с scss https://www.drupal.org/project/gratis

Тестовый сайт: http://test.u5154.ph.vps-private.net/

Как мне узнать что для правки цветов нужно править именно этот файл: http://test.u5154.ph.vps-private.net/sites/all/themes/gratis/css-source/...
?

Файл map нашел только один: http://test.u5154.ph.vps-private.net/sites/all/themes/gratis/css-source/... это как-то поможет?