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

В ЦСС и ХТМЛ осмыс­лен­ное и после­до­ва­тель­ное име­но­ва­ние пере­мен­ных, селек­то­ров и клас­сов зна­чи­тельно упро­щает под­держку ста­рого и напи­са­ние нового кода, и помо­гает выстро­ить систему ком­по­нен­тов для их после­ду­ю­щего переиспользования.

Селек­торы в ЦСС имеют две осо­бен­но­сти, кото­рые вли­яют в том числе на именование.

Глобальная область видимости

Атомы — неделимые смысловые единицы, кирпичики, из которых строится страница. Например: кнопка, ссылка, изображение

В язы­ках про­грам­ми­ро­ва­ния у пере­мен­ных есть обла­сти види­мо­сти. Селек­торы ЦСС можно рас­смат­ри­вать как ана­лог гло­баль­ных пере­мен­ных в язы­ках про­грам­ми­ро­ва­ния. Они доступны на всех стра­ни­цах и это одно­вре­менно плюс и минус, потому что селек­торы с общими назва­ни­ями, вроде .button можно исполь­зо­вать гло­бально для опи­са­ния базо­вых эле­мен­тов — ато­мов. Но селек­торы эле­мен­тов, пред­на­зна­чен­ных только для кон­крет­ных ком­по­нен­тов ино­гда бывает трудно надежно изолировать.

Атомы — неделимые смысловые единицы, кирпичики, из которых строится страница. Например: кнопка, ссылка, изображение

Каскадность

Селек­торы можно пере­опре­де­лять в любом месте, чтобы насла­и­вать одни пра­вила на дру­гие. Набор пра­вил для эле­мента, вло­жен­ного в цепочку дру­гих роди­тель­ских эле­мен­тов может сильно отли­чаться от началь­ного набора, не учи­ты­ва­ю­щего вложенность.

Здесь и далее специфичными модулями я называю элементы, которые выполняют какую‑либо конкретную функцию в конкретном месте страницы, в противопоставление атомам. Например: банер, список товаров в корзине, плашка с текстом на полях

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

Здесь и далее специфичными модулями я называю элементы, которые выполняют какую‑либо конкретную функцию в конкретном месте страницы, в противопоставление атомам. Например: банер, список товаров в корзине, плашка с текстом на полях

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

При­меры неудач­ного именования:

Селек­торПро­блемы
.text (у абзаца),
.link (у ссылки)
Слиш­ком общие назва­ния для базо­вых эле­мен­тов в боль­шин­стве слу­чаев не имеют смысла и можно обой­тись без них путём сти­ли­за­ции базо­вых эле­мен­тов напря­мую. Если эле­мент спе­ци­фич­ный, то и класс у него дол­жен быть спе­ци­фич­ный только для него.
.text1
(у абзаца)
Непо­нятно, что зна­чит text1. Пер­вый абзац? «Пер­вый» раз­мер кегля? Един­ствен­ный экзем­пляр этого тек­ста? Если это стиль для пер­вого абзаца в тек­сте, селек­тор выбран неверно — спе­ци­фич­ный класс для базо­вого эле­мента (абзаца). Лучше исполь­зо­вать класс‑моди­фи­ка­тор, кото­рый изме­няет свой­ства базо­вого эле­мента — p.first.
.our-favourite
(у абзаца)
Класс опи­сы­вает смысл содер­жи­мого базо­вого эле­мента. Пере­ис­поль­зо­вать такой селек­тор в этом слу­чае очень трудно. Выход — снова класс‑моди­фи­ка­тор, изме­ня­ю­щий свой­ства базо­вого эле­мента — .uppercased. Если же стиль абзаца нужен только внутри какого‑то модуля, то лучше опи­сать его как базо­вый эле­мент этого модуля. Как‑нибудь так: .our-favourite-banner p.
.sjf-1-xlВ назва­нии явно что‑то зако­ди­ро­вано. Но понять это смо­жет только автор кода (если хоро­шая память). Так лучше не делать, если только вы не стро­ите ЦСС‑фрейм­ворк, вроде Бут­страпа.
.big_button
(у кнопки)
Опи­сы­ва­ется кнопка боль­шого раз­мера. Сущ­ность здесь кнопка, а её раз­мер — моди­фи­ка­тор. Лучше раз­де­лить и опи­сать их по‑отдель­но­сти, как .button и .button.big. В .button опи­сать общие пра­вила для всех кно­пок, а в .button.big — осо­бен­но­сти именно боль­шой кнопки. Если появится ещё один раз­мер кно­пок, его будет проще доба­вить.

В сле­ду­ю­щем совете раз­бе­рём мето­до­ло­гии и инстру­менты, помо­га­ю­щие снять или суще­ственно облег­чить вопросы име­но­ва­ния селекторов.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

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

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

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

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

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

Как объяснить значимость фичи разработчику? 1 Расскажите об обязанностях технического директора в бюро. Вторая часть: встречи один на один Как быть, если твой руководитель некомпетентнее или незаинтересованнее тебя? Насколько уместно использование ЦСС-стилей cursor: default и user-select: none 2




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

1 Какой фотоаппарат выбрать для путешествий? 2 Как улучшить запись автоответчика? 4 Трудно найти вдохновение на текст 2