[recovery mode] В который раз этот класс?
«А что это вы тут делаете?» Сегодня в чате скайпа джентльмены вели задушевную беседу, размышляли о смысле жизни и, конечно же, говорили о погоде. В одном из сообщений этой душевной беседы проскочила ссылка на мобильный фреймворк jquery. Немного походив по сайту фреймворка для общего развития, поискав что нибудь интересное, я наткнулся на такой вот демо пример:
My App
(картинка для привлечения внимания)Много лет тому назад люди верстали таблицами, а стили для элементов часто оставляли в самих тегах, а не файлах стилей. И это является моветоном. Таблицы созданы для таблиц, а верстать рекомендуется блоками. Стили стоит выносить в файлы, как говорится: «мухи отдельно, котлеты отдельно», т.е. верстка должна быть отдельно от дизайна. Об этом много уже писали и много холиварили на просторах необъятной сети. И вроде сейчас всё реже можно увидеть стили внутри тегов (внутри верстки). Но благодаря фреймворкам, особенно Bootstrap, мало того что все сайты стали на одно «лицо», так и верстка опять возвращается в прошлый век.
Повторенье — мать ученья Попробую перефразировать и объяснить выше написанное про стили. Зачем надо было выносить стили их верстки? Это необходимо: чтобы стили можно было удобно применять многократно; чтобы при изменении дизайна/элемента не вмешиваться в верстку; чтобы код был семантический и чистый (выше два пункта входят в этот пункт) ; чтобы уменьшить HTML код/страницу (ну да, это смешной пункт в наше время); что-то ещё. На помощь всему вышеописанному пришел CSS3 с его возможностями. Но об этом чуть позже.
А что делают фреймворки? Конечно основное — это упрощают жизнь. Но в остальном:
стили выносены в отдельный файл, но сколько этих стилей?! чтобы изменить макет, надо лезть не в стили, а верстку; код семантичный, но избыточный чаще всего; все сайты становятся однотипными (ну это беда фреймворков в целом) что-то ещё. Дубль 3 И так, третий раз перефразирую, уже на примерахРаньше мы писали так:
Итак, всё, к чему стремились буквально пару лет, так сказать к этике и эстетике верстки, кануло в лету. Опять вернулись в прошлый век. И это стало меймстримом. На фриланс-биржах или биржах работы в 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
…
И теперь мы можем обратиться к любому элементу без классов и 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».
