can3p (can3p) wrote,
can3p
can3p

Category:

Про программирование, выпуск 3

CSS / Шаблонизаторы

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

Второй момент - чем менее локализованно работают те или иные технологии, тем сложнее с ними что-либо сделать. Клинический случай - это CSS.

Почему? Как известно, CSS - это язык декларативный. Файл стилей - это набор правил, каждое правило определяет элементы, к которым оно относится, с помощью селектора, некоторые правила наследуются некоторыми дочерними элементами. Все, ядерная смесь перед глазами. Самая популярная проблема с CSS - его очень сложно чистить или рефакторить, потому как в общем случае вообще невозможно понять, к каким элементам правило относится, и что случится, если правило удалить. Для ясности я тут не говорю о домашней страничке, а о большом сайте с кучей страниц и логики. Вы можете возразить, но тут я вам скажу div div span a, и каждый фронтенд разработчик сразу перенесется в то старое доброе время, когда из-за этого селектора переопределять стили для каждого элемента на страницу и, прости господи, рассыпать !important то тут то там, заражая кодовую базу еще больше.

Кроме этого каждый может вспомнить, как из-за какого-нибудь класса в одном из элементов вверху страницы (body или рядом) и опять таки россыпи общих селекторов, от него отталкивающихся, что-то рефакторить опять невозможно, а из-за стилей, определенных на нем, некоторую верстку просто не сделать. В мою бытность в букинге таким был #bodyconstraint, но до сих пор в разметке еще есть. Для него определена максимальная ширина, а также определен разный джаваскрипт, из-за которого тело страницы должно сидеть внутри тега. Как результат - любые дизайны, которые выходили за эту ширину, реализовывались огромной болью и загаживали код самыми разными хаками.

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

Прочитав это, сразу становится понятно, откуда растут ноги у техник типа BEM. Эти ребята уже наелись. Суть подхода - использовать только самые простые селекторы .class, которые будут применяться к минимально возможному количеству тегов. Грубо говоря, стили применяются только к элементам с классами, если класс больше нигде не встречается, стили можно спокойно грохать. Чтобы было проще, классы еще называли не .menu, а что-нибудь монструозное вроде .top-header-main-menu с целью снизить шанс того, что стили применятся где-то еще. Мало того, почти все хитрые css селекторы (nth-element или что там еще) совсем не нужны, достаточно классов в нужных местах раскидать.

Как видите, разница между двумя подходами в локализации изменений.

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

HTML

Сейчас время уже не то, и никто не стесняется из реакта получать бороду из div тегов с произвольными стилями, и это правильно. Все, что имеет значение - отзывчивость интерфейса для пользователя, ну еще SEO, на остальное можно положить. Лет десять назад было много разговоров про семантику, где header использовать, а где список, и много людей, включая меня, серьезно на это велось, даже в стандарт все эту дурь затащили. А эти чудные дискуссии - h4 или h5 поставить в этом маленьком блочке, чтобы структура документа сохранялась? Даже инструменты были, которые строили outline документа.

Как же я рад, что все это закончилось. По мне так в html должно быть не больше десятка тегов - html, body, head, meta, script, link, div, span, a, style, все остальное выбросить и забыть. Для пользователя нет никакой разницы, для программиста только меньше проблем.

Tags: coding
Subscribe

  • В Москве

    Первые дни в Москве вызвали довольно странное впечатление. Как-то так получилось, что в России опять теория разошлась с реальностью, где-то слегка,…

  • Временной аспект

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

  • Из прочитанного^Wнедочитанного. Выпуск 58

    Решил протись по новой и не очень русской литературе 1) Третий роман писателя Абрикосова, Денис Драгунский 4 / 5 Если бы я открыл книгу…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments