Аксиоматический CSS и современная вёрстка веб-страниц (часть 1)
Аксиоматический метод в науке берёт своё начало в глубокой древности. По умолчанию мы соотносим его с геометрией (Эвклид, Пифагор и другие), но использовался он и в других дисциплинах, например в логике Аристотеля. Поэтому в использовании такого метода при построении каскадных таблиц стилей нет ничего необычного.
Аксиома, это предложение, предлагаемое в данной теории без доказательств. Само слово «аксиоматический» обозначает - безусловный, истинный. Значит, мы с вами будем изучать истинный CSS!
Обычно аксиоматический метод в науке относят к дедуктивным, то есть из частного выводится общее. Но мы будем стремиться к краткости и логичности кода, поэтому на частности будем обращать внимание в последнюю очередь, а следовательно, сделаем этот метод индуктивным. Самые сложные конструкции основаны на элементарных правилах! Кроме того мы вернём «Каскадным Стилевым Таблицам» (Cascading Style Sheets) их каскадность, потоковость.
Раньше других на аксиоматический метод обратил внимание Хейдон Пиккеринг в своём докладе упомянувший «лоботомированную сову» и который ещё называет такой метод работы с CSS, как «непринуждённый стиль». Что из себя представляет «лоботомированная сова»? Это просто кусок кода в файле CSS:
* + *
Внешне это напоминает отупевшую сову, но на самом деле сочетание этих операторов в CSS обозначает выражение «все объекты, кроме первого». И если мы дадим описание такой группе селекторов, например:
* + * {
margin-top: 1.5em;
}
то все объекты будут иметь интерлиньяж (отступ сверху) в 1.5em, кроме первого! Именно таким образом и создаётся аксиома - «все объекты в потоке, следующие за первым, имеют отступ сверху размером в 1.5em». Если вы надумаете изменить размер кегля шрифта, то и для отступов на ВСЕЙ странице (и даже на всём сайте) достаточно изменить только одно это правило.
RESET.CSS
А теперь попробуем написать аксиоматический RESET.CSS. Можете взять за основу любой. Я обычно пользовался вариантом Эрика Мейера.
* {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; line-height: 1}
ol, ul {list-style: none}
table {border-collapse: collapse; border-spacing: 0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
Как ни странно – всё! RESET.CSS готов. Вместо длинного перечисления частностей мы задали общие правила для всех элементов потока.
Знак «звёздочки» (астерикса) имеет огромную силу, надо только научиться им пользоваться. Например, рассмотрим такой синтаксис выражения:
[class*=block-80] {width: 80%;}
Оно обозначает, что ВСЕ классы, в имени которых есть слова «block-80», имеют ширину 80%. Таким образом под действие такой аксиомы попадают классы: .block-80 .block-80-color .block-80-bordered .block-80-color-bordered и даже .big-group-block-80… Далее всё зависит от вашей фантазии.
Теперь объединим классы, используя этот же синтаксис:
[class*=block-][class*=-offset-010] {margin-left: 10%; margin-right: 10%;}
Это выражение описывает стили классов, в именовании которых используются слова «block» и «offset-10». В обыденном, рутинном CSS мы бы написали:
.block-offset-010 { margin-left: 10%; margin-right: 10%;}
Но в таком случае это правило бы не относилось к блоку с классом «block-80-offset-10». Аксиоматический CSS позволяет сократить код без ущерба гибкости и функциональности. Мы просто описываем сначала общие правила для классов, а в HTML файле просто перечисляем свойства, которые мы подключаем к объекту.
CSS
[class*=block] {display: block; box-sizing: border-box; float: left; margin: 0; padding: 0;}
[class*=block-80] {width: 80%;}
[class*=block-][class*=-offset-010] {margin-left: 10%; margin-right: 10%;}
HTML
<div class=”block-80-offset-010”>
…Содержание блока…
</div>
Далее мы можем фантазировать, сколько захотим. Добавив, в соответствии с макетом, или планом макета, необходимые классы, в HTML файле мы просто будем их группировать. Ведь отступ может быть только с одной стороны, ширина блока может быть другой и так далее. Такой метод работы с каскадными таблицами стилей придаёт необходимую лёгкость и непринуждённость, ведь вы же веб-художники, чёрт побери, а не «юзеры с мышкой»!
Опубликовал Administrator - 24 марта 2016, 15:53 - 183 просмотра
Похожие записи: Разновидности логотипов и их стили.
Любовь и ненависть в CSS
Ручная сортировка публикаций в Ruxe Engine
Аксиоматический CSS. Часть 3. Синтаксис.
Аксиоматический CSS. Часть 2