Pull to refresh

Как верстать красиво или чем плохи css-фреймворки

Reading time 8 min
Views 33K
Преимущества дивной вёрстки, семантичной разметки и разделения содержимого и дизайна описаны десятки, сотни раз, но все-равно находятся люди, которые не понимают самой идеи html и css, пишут в коде такие ужасные вещи, как
<span style="color:blue">

, когда хотят расскасить текст в синий цвет и искренне считают, что эта запись чем-то лучше, чем
<font color="blue">

, наивно веря в этом деле валидатору. А ведь правильный подход в написании html и css лежит на поверхности. Достаточно просто посмотреть историю развития этого языка, почитать статьи десятилетней давности и проанализировать. Я, при поддержке theshock, постаралась в этот статье упорядоченно и коротко изложить наше видение этого вопроса.



Краткая историческая справка


html создавался академиками, как средство описания данных для обмена по сети на базе языка SGML. Изначально никто не думал, что он будет использоваться для чего-то большего, чем обычный текст. Если посмотреть на большинство современных книг, то можно увидеть каким эти люди представляли себе будущий интернет. Из сорока тегов первого стандарта предназначением только трёх было изменения внешнего вида текста, остальные описывали что этот текст значит и не было возможности отобразить текст так, как вы хотели. Согласно стандарту некоторые теги могли делать текст курсивным или жирным, но такое поведение было только в рамках рекомендаций. Но по-другому развитие интернета видели разработчики Netscape. Они понимали, что сАйтИКи доЛжнЫ быТь пРивлЕКаТЕльНЫМи для того, чтобы в интернете сидели не только суровые профессора, но и блондинки.
Netscape ввёл достаточно много тегов, которые изменяли внешний вид текста, но не несли за собой никакой логической нагрузки. В статьях тех лет можно прочитать, что идеологам html категорически не нравился такой вектор развития. На самом деле W3C вели себя очень по-старпёрски и не далекоглядно, а Netscape тем временем слишком увлёкся раскрашиванием. Обе компании впали в крайности и не могли прийти к консенсусу.
Помощь пришла неожиданно в лице компании Microsoft. Она практически выкупила W3C, инвестировав в него кучу денег и человеческих ресурсов, удалила устаревшую ещё до выхода спецификацию html 3.0 и по-быстренькому выпустила более приближённую к жизни спецификацию html 3.2, которая принесла с собой css. IE 3 и NN 4 уже более-менее поддерживали возможности стилевого оформления.
Ну, потом осёл быстро вытеснил Netscape и, как только занял монопольное положение, заснул на 6-й версии лет, эдак, десять назад. Потом возродился Netscape в лице Firefox, отвоевал значительную часть рынка у IE за счёт кучи преимуществ и, в итоге, всё пришло к тому, что мы сейчас имеем.
Разработчикам браузеров на заметку: в лидеры выбивался тот браузер, который поддерживал стандарты лучше всего.

А имеем мы сейчас вполне неплохую ситуацию. Хотя, перспективы css 3 очень радостные и приятные и мы с нетерпением ждём его прихода, даже то, что даёт шестой ослик вполне достаточно для красивого и расширяемого кода.

Почему оформлять лучше в css, чем в html


В истории очень показателен период сложного оформления сайтов при помощи одного html. Верстальщики тех годов использовали огромное количество тегов <font>, <b>, <i>, вложенных друг в друга таблиц для задания таких границ и разметки, как они хотели и много чего такого, что в итоге приводило к коду, который очень тяжело поддерживать. Очень интересный цикл статтей перевода «A List Apart» на html+css. Посмотрите пример оттуда:
<!-- Dress left -->
<table border="0" cellpadding="0" cellspacing="0">
<!-- Your variable left margin -->
<tr valign="top"><td width="15%" 
bgcolor="#ffffcc"> </td>
<td width="75%" bgcolor="#ffffcc" 
valign="top">
<!-- Your actual content -->

Сейчас с современными возможностями этот участок выглядел бы так:
<div id="content">

Такое изящество принёс нам язык css. Так в чём же основной принцип подхода html+css? В html-файле мы описываем только логическую часть документа и ничего из оформления (да-да, это именно то, о чём мечтали те старые пердуны из W3C). Оформление ложится полностью на плечи css. Какие преимущества нам это принесёт:
1. Как видно на примере выше, html-код теперь не загромождён, а логичен и понятен.
2. Мы не повторяем описание внешнего вида каждый раз, когда встречается html-елемент. Например, если мы хотим заголовок сделать подчёркнутым и зелёным — достаточно описать это в css-файле, а не указывать соответствующие параметры каждый раз, когда встречается заголовок. Принцип «don't repeat yourself» показал себя очень эффективным не только в разметке, но и в программировании. На самом деле, очень тяжело найти противников этого принципа среди профессионалов.
3. За счёт этого мы можем давать нашим пользователям возможность к оформлению своих сообщений, не выходя за рамки дизайна сайта (посмотрите на хабр и его оформление заголовкамив статьях). Автор просто указывает тег, например, &lth2> там, где хочет выделить заголовок раздела статьи и он выделяется так, как лучше всего подходит для даного сайта.
4. Вес html-файлов уменьшается очень значительно, а сss-файлы кешируются браузерами и загружаются только один раз, отчего у пользователей значительно ускоряется загрузка страниц, а на сервере уменьшается нагрузка.
5. То, что мы вынесли всё оформление в css-файл позволяет с лёгкостью его изменять при необходимости. Достаточно в одном месте css-файла подправить значение и новый стиль применится ко всем html-страницам, которые его используют
6. Можно полностью поменять оформление сайта просто подключив другой css-файл на сервере администратором или на клиенте пользователем (с помощью user-css). Например, как сделано на ibash.org.ru.
7. Для устройств с маленьким экраном достаточно просто подключить другой файл стилей.

Так почему же плоха запись <font color="red">? Не потому что так сказал валидатор, или написали умные мужчинки на Хабре. Причина отказа от этой записи содержится очень близко к идеологии html. А именно в том, что тут смешивается контент и дизайн! И предпочитаемая многими(валидная, но ужасная) запись <span style="color:red"> — это возврат к тому, от чего с ужасом бежали «A List Apart» 10 лет назад. Каждый раз, когда вы в html-файле задаёте оформление css или в названии класса содержится эпитет, который хоть как-то намекает на внешний вид элемента — вы что-то делаете не так. Просто подумайте, почему вы решили делать его таким. Если вы хотите сделать красный цвет, то, наверное, это обозначает ошибку и ему больше подойдёт <span class="error">. А если вы решили выделить жирным, то этот текст важнее, чем тот, что по-соседству и тут больше подойдёт <span class="important"> или даже <strong>. А html5 принесет еще серию актуальных логических тегов, которые помогут отказатся даже от классов.

Верстаем по-порядку


Так как же добится изящного кода? Надо полностью отделить содержимое от представления. Подумайте, какие логические блоки будут на странице и опишите их в html. Не описывайте то, как они будут выглядеть. Представте, что у вас будет два совершенно разных дизайна на базе одного и того же html, но разных css. Возьмем, к примеру, Хабр. Представим, что один дизайн будет очень похож на тот, что есть, а другой будет с навигацией слева, а правая боковая панель уйдёт вниз. И он будет в тёмных цветах, а не светлых, как сейчас. Начнём с html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Habrahabr</title>
	</head>
	<body>
		<header>
			<img src="logo.png" alt="Habrahabr logo" />
			<ul>
				<li>Nutochka</li>
				<li>выйти</li>
				<li>настройки</li>
				<li>личная почта</li>
				<li>хабралента</li>
				<li>избранное</li>
			</ul>
		</header>
		<nav>
			<ul>
				<li><span>посты</span></li>
				<li><a href="#">q&a</a></li>
				<li><a href="#">блоги</a></li>
				<li><a href="#">люди</a></li>
				<li><a href="#">компании</a></li>
			</ul>
		</nav>
		<section>
			<article>
				<h1><a href="#">{Article.title}</a></h1>
				<div class="content">{Article.content}</div>
				<div class="tags">{Article.tags}</div>
				<div class="footer">{Article.footer}</div>
			</article>
		</section>
		<aside>
			<div class="best">
				<ul>
					<li>
						<a href="#" class="blog">{Best.blogname}</a>
						» <a href="#" class="article">{Best.article}</a>
					</li>
					<li>
						<a href="#" class="blog">{Best.blogname}</a>
						» <a href="#" class="article">{Best.article}</a>
					</li>
					<li>
						<a href="#" class="blog">{Best.blogname}</a>
						» <a href="#" class="article">{Best.article}</a>
					</li>
				</ul>
			</div>
			<!-- Other blocks -->
		</aside>
		<footer>
			© 2006–2010 «Тематические Медиа»
		</footer>
	</body>
</html>

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

css-фреймворки


Последнее время некоторой(к счастью, небольшой) популярностью пользуются css-фреймворки. Например, 960 grid system
<div class="container_24"> 
	<h2> 
		24 Column Grid
	</h2> 
	<div class="grid_24"> 
		<p> 
			950
		</p> 
	</div> 
	<!-- end .grid_24 --> 
	<div class="clear"></div> 
	<div class="grid_1"> 
		<p> 
			30
		</p> 
	</div> 
	<!-- end .grid_1 --> 
	<div class="grid_23"> 
		<p> 
			910
		</p> 
	</div> 
	<!-- end .grid_23 -->

и blueprint:
    <div class="container showgrid"> 
      <h1>Blueprint Tests: grid.css</h1> 
      <div class="span-8"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div class="span-8"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div class="span-8 last"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div class="span-6 append-1"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div class="span-6 append-2"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 

Основной проблемой есть то, что эти фреймоворки нарушают основной принцип разделения содержимого и представления и пропагандируют принципы, которые использовались до изобретения html3.2. Вместо внятного и очевидного описания, что каждый из блоков значит мы видим в html-коде то, как эти блоки выглядят и сколько места занимают. Все преимущества css, описанные выше, разрушаются при таком подходе. Css-фреймворки в том виде, котором они сейчас есть — зло и уход в прошлое.
Какие есть альтернативы? Оставить html языком разметки, а дизайн оставить полностью на совести css, как оно и должно быть. Но как сделать фреймворк на CSS? Для этого можно воспользоватся одним из препроцессоров, которые сейчас набираюсь популярность и вводят в css много вещей, которых там очень не хватает — переменных, математических выражений, изящной вложенности. Например, LessCss и SASS. С их помощью можно организовывать красивые и удобные фреймворки и полностью на стороне css. Подход к созданию такого фреймворка можно почитать в зарубежной статье «Introducing the LESS CSS Grid».

Верстайте красиво и не выливайте компот в борщ, пусть даже кажется, что это будет быстрее и ничего страшного не случится!
Tags:
Hubs:
+132
Comments 174
Comments Comments 174

Articles