“А что это вы тут делаете?”
Сегодня в чате скайпа джентльмены вели задушевную беседу, размышляли о смысле жизни и, конечно же, говорили о погоде. В одном из сообщений этой душевной беседы проскочила ссылка на мобильный фреймворк jquery. Немного походив по сайту фреймворка для общего развития, поискав что нибудь интересное, я наткнулся на такой вот демо пример:
<div data-role="header">
<a href="#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a>
<h1>My App</h1>
<button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save
</button></div>Этот пример создает кнопки Cancel и Save. Для поклонников фреймворков, например, популярного в последние пару лет Bootstrap, данный код выглядит нормально. Для меня же это выглядит адом и вот почему.
(картинка для привлечения внимания)
Много лет тому назад люди верстали таблицами, а стили для элементов часто оставляли в самих тегах, а не файлах стилей. И это является моветоном. Таблицы созданы для таблиц, а верстать рекомендуется блоками. Стили стоит выносить в файлы, как говорится: “мухи отдельно, котлеты отдельно”, т.е. верстка должна быть отдельно от дизайна. Об этом много уже писали и много холиварили на просторах необъятной сети. И вроде сейчас всё реже можно увидеть стили внутри тегов (внутри верстки). Но благодаря фреймворкам, особенно Bootstrap, мало того что все сайты стали на одно “лицо”, так и верстка опять возвращается в прошлый век.
Повторение — мать ученья
Попробую перефразировать и объяснить выше написанное про стили. Зачем надо было выносить стили их верстки? Это необходимо:
- чтобы стили можно было удобно применять многократно;
- чтобы при изменении дизайна/элемента не вмешиваться в верстку;
- чтобы код был семантический и чистый (выше два пункта входят в этот пункт) ;
- чтобы уменьшить HTML код/страницу (ну да, это смешной пункт в наше время);
- что-то ещё.
На помощь всему вышеописанному пришел CSS3 с его возможностями. Но об этом чуть позже.
А что делают фреймворки? Конечно основное — это упрощают жизнь. Но в остальном:
- стили вынесены в отдельный файл, но сколько этих стилей?!
- чтобы изменить макет, надо лезть не в стили, а верстку;
- код семантичный, но избыточный чаще всего;
- все сайты становятся однотипными (ну это беда фреймворков в целом)
- что-то ещё.
Дубль 3
И так, третий раз перефразирую, уже на примерах
Раньше мы писали так:
<button style="text-align:right; font-weight:bold; display:inline; font-size:12pt; border-radius:1em; backgrund-image: url("..")">Сегодня так:
<button class="ui-btn-right ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right">Обратите внимание, что я не все классы сохранил, а только часть.
Также, если вы будете разбирать CSS этой кнопки — вы увидите, что там много дублирующих и переназначающихся атрибутов.
Итак, всё, к чему стремились буквально пару лет, так сказать к этике и эстетике верстки, кануло в лету. Опять вернулись в прошлый век. И это стало меймстримом. На фриланс-биржах или биржах работы в 90% требуется Bootstrap и другие фреймворки. Чтобы сверстать макет, надо знать кучу названий классов и какой класс за что отвечает, вместо основ верстки. Теперь не надо знать как работает тот или иной атрибут и как сделать на Vanilla CSS какую нибудь фишку. И это напоминает какой-то DW (визуальный режим) или Artisteer… Ну да ладно, немного отвлекся.
Главное, я считаю, тут стало то, что если надо изменить верстку — надо править не CSS, а HTML. Я считаю это трагедией нашего времени. А ведь нам даны невиданные доселе возможности CSS3 в паре с HTML5 — это CSS Grid Layout (на Хабре), flexbox (на Хабре), замечательные селекторы (сестринский, дочерний, обобщенный (жаль нет ещё родительского(parent))) и много другого. Конечно не всё работает и не во всех браузерах, но на этот случай придуман Graceful Degradation.
WTF?
Разумный вопрос у тебя, уважаемый %username%, имеется: “что же я предлагаю, к чему веду?”
Сейчас, ещё один абзац, и перейду к ближе делу.
Если понаблюдать за дизайном в вебе, то можно увидеть некую шаблонность. Да не то чтоб увидеть, а многое является нормой. Обязательно шапка (header) и подвал (footer). В полиграфии их называют колонтитулами. Навигация. Есть один или два сайдбара. И, конечно же, контент. С приходом фреймворков, в частности Bootstrap’а от сайдбаров как таковых отказались, в том виде что они были. Теперь они не side, а top или footer bar'ы :-)
Я предлагаю в первую очередь поразмышлять над идеей, наверняка не новой. Над новым видом фреймворков, когда верстка остается неизменной, а меняются только стили, которые должны быть универсальными. Некое подобие reset.css и normalize.css, только для других целей.
Чтобы было понятно — покажу на примере:
90% каркасов сайтов выглядит примерно так на HTML5
…
<body>
<header>Название/лого</header>
<nav>Навигация</nav>
<article>Контент</article>
<aside>Сайдбар</aside>
<footer>Подвал</footer>
</body>
...Особенно хотелось бы заметить, что HTML5 подарил нам эти замечательные теги. Теперь не надо писать class=”header”.
И теперь мы можем обратиться к любому элементу без классов и id (id вообще оставим как и положено для JS). Простой CSS для наглядности:
body > header, body > footer {
width: 100%;
text-align: center;
background-color: #efe;
}
body > nav {
width: 80%;
margin: 0 auto;
text-align: center;
}
body > article {
float:left;
width: 60%;
background-color: #eef;
}
body > aside {
float: right;
width: 40%;
background-color: #fee;
}Тоже самое на jsfiddle
Если надо добавить ещё сайдбар, то можно применить псевдокласс типа :nth-child или его “братиков”. Учитывая, что элемент может быть, а может и не быть. Кнопки и инпуты, например, можно оформлять через атрибуты input[type=”button”].
Таким образом, сверстав один раз страницу и натянув её на движок — мы можем менять только шкурки. При чем они должны получаться универсальными для всех движков и статических сайтов. Ну или с минимальными изменениями. И разве не к этому стремился изначально CSS и стремятся нововведения CSS3?
Конечно полностью от классов отказаться не удастся. Но я в этом направление работал и верстал макеты с минимум классов.
Какие я вижу преимущества?
Это перечисленные в начале пункты:
— при изменении дизайна/элемента не надо вмешиваться в верстку;
— код семантический, чистый и минималистичный;
А так же, весьма весомые:
— шаблоны можно клепать сразу под сотни сгенерированых CMS
— надоел шаблон? Заменил стили. Надоела CMS? Поставил другую и старые стили.
— ещё что-то.
Минусы:
— избыточный CSS, как во всех фреймворках;
— кроссбраузерности не будет, хотя для неё есть Graceful Degradation
— ещё что-то.
Всем и вся не угодишь конечно, но ведь имеющиеся решения не всем подходят.
В плане разработки и поддержки подобного чуда ничего нового в голову не пришло. Те же модульность и компиляция, как у всех фреймворков. Т.е. типа такого и такого вместе взятые. Только, повторюсь, на одном HTML каркасе.
PS Уверен, что идея не новая и её кто-то уже высказывал. Сам я над данной темой задумываюсь уже давно, но пока
PSS Да будет холивар: “Аффтар ты жжошь и не понимаешь
UPDATE
Ещё раз попробую сказать, а то в комментариях многие смотрят в другую сторону
Я предлагаю поразмышлять на тему, почему бы не создать универсальный модульный HTML каркас, для которого уже и писать свои многочисленные шаблоны на чистом CSS.
Возьмем для примера любую CMS. Создаем универсальную тему UniTheme (верстку).
И потом для неё уже верстальщики просто делают свои CSS. Разумеется за основу беря какую сгенерированую макетную сетку.
Если в админке, допустим, включаем или отключаем сайдбар/виджеты — это ни как не влияет на верстку. Разумеется, что если на странице появиться какой-то элемент, для которого нет стилей — придется поработать руками, как в общем и в любом фреймворке.
Любителям Bootstrap также можно предоставить готовые UI элементы в каком то стиле.
Но опять же — они будут уже готовы к использованию без вмешательства в верстку.
И повторю — разумеется от полного отказа от классов я не предлагаю, а предлагаю минимизировать их использование.
UPDATE 2
Спасибо alekciy за ссылки на уже реализованный пример того, о чем я размышлял в статье: CSS Zen Garden и демо
