К делу. Сразу скажу, что идея благополучно подсмотрена на знаменитом сайте smashingmagazine.com, но на хабре еще не светилась. Поэтому беру на себя ответственность поведать хабравчанам об этой простой, но в то же время полезной фиче, которую можно применять при работе с каскадными таблицами стилей или кратко CSS.
Вне зависимости от структуры страницы и ее содержания, вероятность 99%, что вы будете использовать стили, названия которых надолго и крепко засели в наших головах. За примерами далеко ходить не надо. Открываем исходный код хабра и видим привычные назнавания классов: header, navigation, title, content и т.д. Знакомо, неправда ли?
И тут возникает вопрос: если мы постоянно при верстке используем одни и те же названия классов, почему бы не использовать для обозначения значки-символы вместо обычного текста?
Работает это точно также как и обычные текстовые названия классов, только вместо них мы будем использовать специальные utf-символы. Начнем с простейшего.
Копирайт неотъемлемая часть любого уважающего себя ресурса. Тогда давайте выделим его и защитим контент от воровства.
Теперь слева сделаем блок шириной в четверть страницы, а справа блок, который занимает остальную ширину. В правом блоке выравним текст по правому краю.
Использовать этот метод повсеместно, конечно, не имеет никакого смысла, но он вполне способен упростить ваш код и придать ему изюминку.
Ко всему вышесказанному добавлю, что при использовании utf-символов ни один из всемирно используемых браузеров (в том числе и IE6) не впадет в уныние и не «завалится», а валидацию такой код пройдет, словно маслом намазанный.
Так что если вы любите покреативить, то такой подход к оформлению CSS-классов вас безусловно заинтересует, благо количество мест и способов применения ограничиваются лишь вашей фантазией.
Вне зависимости от структуры страницы и ее содержания, вероятность 99%, что вы будете использовать стили, названия которых надолго и крепко засели в наших головах. За примерами далеко ходить не надо. Открываем исходный код хабра и видим привычные назнавания классов: header, navigation, title, content и т.д. Знакомо, неправда ли?
И тут возникает вопрос: если мы постоянно при верстке используем одни и те же названия классов, почему бы не использовать для обозначения значки-символы вместо обычного текста?
Как это работает
Работает это точно также как и обычные текстовые названия классов, только вместо них мы будем использовать специальные utf-символы. Начнем с простейшего.
Копирайт неотъемлемая часть любого уважающего себя ресурса. Тогда давайте выделим его и защитим контент от воровства.
.© {color: red;}
...
Copyright HalfD0nkey. Все права защищены.
Теперь слева сделаем блок шириной в четверть страницы, а справа блок, который занимает остальную ширину. В правом блоке выравним текст по правому краю.
.¼ {
float: left;
width: 25%;
}
.¾ {
margin-left: 25%;
}
.⇉ {text-align: right;}
...
Блок в 1/4 ширины страницы
Блок в 3/4 ширины страницы
Преимущества
- по символьному обозначению класса легче понять, что он описывает
- символы выделяются в тексте, поэтому их легче обнаружить
- символьное обозначение занимает меньше места, чем текстовое название класса и в нем невозможно сделать опечатку
Недостатки
- вставлять символы в код не очень удобно
- кодировка страницы должна быть обязательно utf-8
- при использовании поиска по документу, могут возникнуть трудности
Использовать этот метод повсеместно, конечно, не имеет никакого смысла, но он вполне способен упростить ваш код и придать ему изюминку.
Ко всему вышесказанному добавлю, что при использовании utf-символов ни один из всемирно используемых браузеров (в том числе и IE6) не впадет в уныние и не «завалится», а валидацию такой код пройдет, словно маслом намазанный.
Так что если вы любите покреативить, то такой подход к оформлению CSS-классов вас безусловно заинтересует, благо количество мест и способов применения ограничиваются лишь вашей фантазией.