В который раз этот класс?

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

Сегодня в чате скайпа джентльмены вели задушевную беседу, размышляли о смысле жизни и, конечно же, говорили о погоде. В одном из сообщений этой душевной беседы проскочила ссылка на мобильный фреймворк 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 код/страницу (ну да, это смешной пункт в наше время);
• что-то ещё.