Аксиоматический CSS. Часть 3. Синтаксис.
Перед тем, как мы займёмся написанием стилей для созданной нами страницы, изучим синтаксис, о котором я уже начинал писать. Я знаю, что вы в той или иной степени знаете синтаксис CSS. Но мы изучаем именно его аксиоматический вид, а он, в некоторых случаях, отличается от общепринятого. Естественно, я не призываю совсем отказаться от обычного синтаксиса. Его я использую в полной мере, но сначала я прописываю ОБЩИЕ правила и только потом – частные.
Аксиоматический CSS сближает каскадные таблицы стилей с программированием. Добавляются некие логические выражения. Например, мы можем написать такой стиль для блока:
.block-50 {width: 50%; margin-left: 25%; margin-right: 25%;}
Это правило будет применяться к блоку, которому присвоен именно такой класс.
<div class=”block-50”>
<p>Dolor ipsum</p>
</div>
<div class=”block-50-bordered”>
<p>Sit amet</p>
</div>
В этом примере на свойства первого блока он будет влиять, но никак не будет влиять на свойства второго. А ведь блоки по сути своей одинаковые. Поэтому мы можем записать их свойства по-другому. А именно:
[class*=block-50] { width: 50%; margin-left: 25%; margin-right: 25%;}
Тогда ВСЕ блоки, в названии которых есть слова block-50 будут иметь эти свойства. В этой записи знак звёздочки (астерикс) имеет значение «все». То есть, все блоки, в названии классов которых есть слова «block-50» будут подчиняться этому правилу. И первый, и второй, и последующие, сколько бы мы их не запланировали.
В этом кроется главное преимущество аксиоматического CSS. Сначала мы задаём общие правила. Мы даже создаём группу общих правил! Например:
[class*=block] {display: block; float: left;}
[class*=block-50] { width: 50%;}
[class*=offset-025] { margin-left: 25%; margin-right: 25%;}
[class*=bordered] {border: solid 1px #888;}
[class*=bordered] + [class*=bordered] {margin-top:-1px; margin-left: -1px;}
Построив такую каскадную таблицу стилей мы при написании HTML-кода просто варьируем сочетания классов в документе. Например:
<div class=”block-50-offset-025”>
<p>Dolor ipsum</p>
</div>
<div class=”block-50-bordered”>
<p>Sit amet</p>
</div>
<div class=”block-50-bordered”>
<p>Sit amet</p>
</div>
<div class=”block-50-bordered-offset-025”>
<p>Sit amet</p>
</div>
В этом примере первый блок будет занимать 50% ширины страницы , без обтекания другими блоками, два последующих выстроятся в ряд, как inline-block и будут иметь бордюр толщиной в один пиксель, а последний блок опять будет занимать 50% ширины, но с бордюром в 1 пиксель.
И таких сочетаний классов на странице может быть любое количество, да хоть сотни! И они будут подчиняться пяти коротким строчкам каскадной таблицы стилей! При написании кода HTML мы можем просто фантазировать. Мы будем работать, как обычные художники, варьируя классы, как краски и кисти. А ведь мы художники! Так ведь? Мы теперь можем, добавив в CSS одну-две строчки писать новую картину сайта, например:
<div class=”block-50-offset-025-bordered-big-size-bottom-black”>
<p>Dolor ipsum</p>
</div>
Это же просто супер-свобода!!! Это творчество.
И, как послесловие: «Краткость – сестра таланта»!
Ведь вместо тех пяти коротких строчек мы могли бы написать, используя правила обычного и привычного синтаксиса:
.block {display: block; float: left;}
.block-50 {display: block; float: left; width: 50%;}
.block-50-offset-025 {display: block; width: 50%; margin-left: 25%; margin-right: 25%;}
.block-bordered] {display: block; border: solid 1px #888;}
.block-50-bordered {display: block; float: left; width: 50%; border: solid 1px #888;}
.block-50-offset-025-bordered {display: block; width: 50%; margin-left: 25%; margin-right: 25%; border: solid 1px #888;}
.block-50-bordered + .block-50-bordered {margin-top:-1px; margin-left: -1px;}
И так далее... Мы бы вынуждены были прописывать свойства для каждого класса. Но аксиоматический CSS позволяет нам один раз написать общие правила, необходимые нам в данном проекте, а потом просто варьировать классы!
Кроме того, используя аксиоматический CSS, мы возвращаем таблицам стилей каскадность, потоковость! От общего к частному.
Примечание: в классах offset необходимо использовать значения другого разряда. Не «25», а «025», потому что при таком синтаксисе стили, содержащие одинаковые числа - «block-25» и «offset-25», будут подчиняться одинаковому правилу. Но это не является большой проблемой. Просто помните, что в названии класса кроме букв также учитываются и цифры.
Успехов в сайтостроении.
Опубликовал Administrator - 22 июля 2016, 16:27 - 104 просмотра
Похожие записи: Разновидности логотипов и их стили.
Любовь и ненависть в CSS
Ручная сортировка публикаций в Ruxe Engine
Аксиоматический CSS. Часть 2
Аксиоматический CSS и современная вёрстка веб-страниц (часть 1)