http://habrahabr.ru/post/221063/

“А что это вы тут делаете?”

Сегодня в чате скайпа джентльмены вели задушевную беседу, размышляли о смысле жизни и, конечно же, говорили о погоде. В одном из сообщений этой душевной беседы проскочила ссылка на мобильный фреймворк 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 Да будет холивар: “Аффтар ты жжошь и не понимаешь ни чего в колбасных обрезках в фреймворках и моём любимом Bootstrap”.

UPDATE

Ещё раз попробую сказать, а то в комментариях многие смотрят в другую сторону

Я предлагаю поразмышлять на тему, почему бы не создать универсальный модульный HTML каркас, для которого уже и писать свои многочисленные шаблоны на чистом CSS.

Возьмем для примера любую CMS. Создаем универсальную тему UniTheme (верстку).
И потом для неё уже верстальщики просто делают свои CSS. Разумеется за основу беря какую сгенерированую макетную сетку.
Если в админке, допустим, включаем или отключаем сайдбар/виджеты — это ни как не влияет на верстку. Разумеется, что если на странице появиться какой-то элемент, для которого нет стилей — придется поработать руками, как в общем и в любом фреймворке.

Любителям Bootstrap также можно предоставить готовые UI элементы в каком то стиле.
Но опять же — они будут уже готовы к использованию без вмешательства в верстку.

И повторю — разумеется от полного отказа от классов я не предлагаю, а предлагаю минимизировать их использование.

UPDATE 2

Спасибо alekciy за ссылки на уже реализованный пример того, о чем я размышлял в статье: CSS Zen Garden и демо