Цвета в CSS
Свойство color
Итак, свойство color позволяет задать основной цвет элемента. При настройке этого свойства можно использовать различные значения:
Именованные цвета
CSS поддерживает стандартные наименования цветов, которые можно использовать, просто указывая в качестве значения свойства color имя нужного цвета. Вот как это выглядит:
Вот, если интересно, полный список имён цветов. Тут стоит сказать о том, что некоторые имена цветов поддерживаются не во всех браузерах.
Здесь я использую красный цвет ( red ) для того чтобы быстро показать обводку всех элементов страницы. Цвет red популярен в подобных ситуациях, мне даже доводилось видеть мемы об этом.
Шестнадцатеричные цветовые значения
Шестнадцатеричный код цвета состоит из шести символов. Например, значение #ffffff представляет белый цвет. При описании цветов с использованием шестнадцатеричных значений есть одна особенность, позволяющая, в определённых ситуациях, использовать сокращённую запись кода цвета.
Дело в том, что если пара значений в описании одного компонента цвета идентична, одно из таких значений можно убрать. Каждая пара значений представляет собой описание одного из компонентов цвета. Это, соответственно, компоненты Red (красный), Green (зелёный) и Blue (Синий). Рассмотрим следующий пример:
Сокращение шестнадцатеричных кодов цветов
Цвета, задаваемые в формате RGB/RGBA
При использовании цветовой модели RGB (Red, Green, Blue — красный, зелёный, синий) цвета представляют тремя значениями, описывающими цветовые каналы — соответственно — красный, зелёный и синий канал. Каждое из значений можно представить числом, находящимся в диапазоне от 0 до 255, или процентным значением — от 0 до 100%.
Если три значения равны 0, то получится чёрный цвет. А если все три цветовых компонента установлены в значение 255, то получится белый. То же самое справедливо и при использовании процентных значений.
При описании цветов с использованием цветовой модели RGB можно, помимо цветовых компонентов, указывать и значение, соответствующее альфа-каналу, которое позволяет управлять прозрачностью цвета. Это помогает в работе с насыщенностью цветов, что весьма полезно. Ниже мы рассмотрим некоторые варианты использования цветов, при описании которых используется альфа-канал. Для работы с такими цветами применяется функция rgba() :
Если значение, соответствующее альфа-каналу, равно нулю, тогда основной или фоновый цвет элемента окажется полностью прозрачным, то есть — невидимым.
Цвета, задаваемые в формате HSL
Я редко вижу использование цветовой модели HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота), но в последнее время эта цветовая модель стала привлекать к себе всё больше внимания со стороны дизайнеров и разработчиков.
На цветовом круге каждому цвету соответствует определённый угол, описывающий цветовой тон (hue). Для описания HSL-цвета, помимо тона, нужно указать значения, отвечающие за насыщенность и светлоту цвета.
Разберём процесс описания HSL-цветов. Представим, что нас интересует цветовой тон, показанный на следующем рисунке.
Выбор цветового тона
Для выбора насыщенности и светлоты можно воспользоваться удобным инструментом, который находится здесь. А именно, после выбора тона, насыщенность и светлоту цвета можно представить так, как показано ниже.
Выбор насыщенности и светлоты
Шкала насыщенности, в начале, представлена серым цветом, а в конце — цветом, который мы выбрали на цветовом круге. Шкала светлоты начинается с чёрного цвета, доходит до выбранного цветового тона и заканчивается белым цветом.
Эта гибкость может оказаться очень кстати. Например, можно выбрать цветовой тон, а потом подстроить насыщенность и светлоту в соответствии со своими нуждами. Такой подход позволяет создавать динамичные и лёгкие в использовании цветовые палитры.
Ключевое слово currentColor
Интересной особенностью currentColor является тот факт, что это ключевое слово можно использовать и на уровне родительского элемента, и для дочерних элементов.
В этом примере currentColor можно использовать и для элемента
, и для элемента :
Использование инструментов разработчика для исследования цветов
При проведении экспериментов с CSS-цветами можно воспользоваться одной полезной возможностью инструментов разработчика Chrome. Для вызова этой возможности нужно выбрать некий элемент, цвета которого заданы в шестнадцатеричном формате, и переключиться в режим его исследования. Затем нужно щёлкнуть по маленькому квадратику, который представляет цвет, используемый элементом в данный момент.
Этот приём подходит только для шестнадцатеричных цветов и для свойств, при настройке которых используются CSS-переменные:
Тут надо сказать о том, что при использовании HSL-цветов в комбинации с CSS-переменными всё ещё можно столкнуться с неоднородным поведением браузеров. Например, вывод вышеприведённого примера в Firefox не приведёт к показу цветного квадратика. Вот как это выглядит в разных браузерах.
Браузеры по-разному работают с переменными
Синий квадратик, выводимый в Safari, демонстрирует вычисленное значение используемого CSS-свойства. Это лучше, чем ничего.
Возможно, вы сейчас задаётесь вопросом о том, зачем нам вообще нужен этот квадратик, представляющий вычисленный цвет и выводимый около CSS-свойства? Дело в том, что без него мы не сможем открыть средства инструментов разработчика для работы с цветом, которые помогают исследовать доступность используемого цветового решения.
Цветовые значения, разделённые пробелами
Обычно функции rgb() и hsl() вызывают, передавая им значения, разделённые запятыми. Существует и другой способ вызова таких функций, достаточно новый, но пользующийся отличной браузерной поддержкой. При его использовании значения, передаваемые функциям, разделяют пробелами.
Учитывайте то, что отделение сведений о прозрачности с помощью косой черты — это лишь дополнительная возможность. Ей стоит пользоваться только тогда, когда нужно настроить прозрачность цвета.
Хочу отметить, что хотя я и порекомендовал пользоваться в функциях цветовыми значениями, разделёнными пробелами, я не применял их в статье, так как это — достаточно новая возможность CSS. А мне не хотелось бы запутывать читателей.
Глобальные значения (inherit, initial, unset)
▍Ключевое слово inherit
Вот HTML-код верхней части страницы, в которой имеется заголовок, описание и ссылка:
Цвет ссылок, используемый по умолчанию, выглядит так:
▍Ключевое слово unset
На MDN можно узнать о том, что ключевое слово unset позволяет сбросить значение свойства до унаследованного значения в том случае, если свойство естественным образом наследует это значение от родительского элемента. В противном случае значение сбрасывается до его исходного значения.
Вернёмся к предыдущему примеру и сделаем так, чтобы ссылка унаследовала бы цвет от родительского элемента:
Здесь со всем этим можно поэкспериментировать.
Сценарии использования и практические примеры
Пожалуй, теории на сегодня хватит. Поэтому предлагаю рассмотреть практические примеры работы с цветами в CSS.
▍Полупрозрачный RGBA-цвет
Мне часто приходилось видеть, как функция rgba() используется в CSS для создания дизайна, вариант которого представлен на следующем рисунке.
Обратите внимание на то, что у окружностей имеются границы, которые темнее, чем фон этих окружностей. Как сделать это динамически? А сделать это можно, воспользовавшись границей, полупрозрачный цвет которой задан с применением функции rgba() :
Ту же идею можно использовать и при работе с элементами, у которых имеется фон, в случае, когда их дочерние элементы являются их более тёмными вариантами. Взгляните на следующий рисунок.
▍Использование HSL-цветов
Это может пригодиться в паре ситуаций. Например, тогда, когда нужно сделать так, чтобы светлота цвета кнопки становилась бы меньше при наведении на эту кнопку мыши.
Кнопка становится темнее при наведении на неё указателя мыши
Эту идею можно развить, скомбинировав функцию hsl() и CSS-переменные для создания цветовой палитры, которая легко поддаётся изменениям.
Указывая основной тон, мы можем использовать его, задавая цвета, позволяющие делать элементы светлее или темнее.
Особенно мне здесь нравится организация работы с оттенками серого цвета. Мне всегда было тяжело запоминать правильные шестнадцатеричные значения для оттенков серого. При использовании hsl() работа с такими цветами значительно упрощается.
Обратите внимание на то, как я создал цветовую палитру, основываясь лишь на одном цветовом тоне и меняя светлоту итогового цвета.
Цвет и изменение светлоты
Полагаю, никто не станет спорить с тем, что при таком подходе очень просто работать с оттенками серого. Мне это очень нравится, я планирую использовать этот приём в своих будущих проектах.
При работе над большими проектами я использовал бы следующий подход, подразумевающий применение CSS-переменных и задействующий изменение светлоты цвета:
Здесь можно найти рабочий пример.
▍Использование ключевого слова currentColor с SVG-иконками
Хороший сценарий использования ключевого слова currentColor представлен ситуациями, когда нужно управлять цветом SVG-иконок. Представим, что у нас имеется иконка, после которой идёт текст. Значок иконки и текст должны быть окрашены в один и тот же цвет.
Значок и текст должны быть одного цвета
Вот применяемый здесь стиль:
При таком подходе значок будет окрашен в цвет, назначенный родительскому элементу.
Настройка иконки, заключённой в цветной полупрозрачный прямоугольник
Вот соответствующий CSS-код:
Итоги
Сегодня мы обсудили некоторые особенности описания цветов в CSS, рассмотрели практические приёмы работы с цветами. Хочется надеяться, вам пригодится то, о чём вы сегодня узнали.
Какие CSS-механизмы вы обычно используете, настраивая цвета в своих проектах?
Ключевые слова CSS «Initial», «Inherit» и «Unset»
Дата публикации: 2020-02-24
От автора: в CSS есть ключевые слова для различных значений по умолчанию. В этой статье я буду рассматривать три из них: initial, inherit и относительно новое unset.
Есть большая вероятность того, что, хотя большинство веб-разработчиков сталкивались с ними, многие из них, даже самые опытные, не до конца их понимают.
Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? Какие именно различия между ними? Я решил глубоко изучить эти три ключевых слова, чтобы раз и навсегда понять различия между значениями этих трех ключевых слов.
Основные стили Интернета
Прежде чем мы начнем рассматривать ключевые слова CSS, важно понять, откуда мы получаем основные стили в браузере.
Начальное значение каждого свойства в CSS
Каждое свойство CSS имеет начальное значение. Это начальное значение не связано с типом HTML-элемента, к которому оно применяется. Пример исходного значения из MDN:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Начальным значением высоты строки является «normal»
Стили пользовательского агента
После применения начальных стилей всех свойств CSS браузер загружает их стили. Эти стили не имеют ничего общего с базовыми начальными значениями свойств CSS. Пример стиля пользовательского агента:
Стили элементов h1 из пользовательского агента браузера Chrome
Элементы HTML не имеют начальных значений стиля! Основные стили элемента HTML, такого как тег h1, например, взяты из таблицы стилей агента пользователя браузера, а не из исходного значения свойств CSS.
Теперь давайте начнем рассмотрение ключевых слов CSS!
Ключевое слово inherit
Значение ключевое слово inherit указывает браузеру искать значение ближайшего родительского элемента и позволить текущему элементу наследовать это значение. Если у ближайшего родителя тоже значение inherit, браузер продолжит подниматься по дереву DOM, пока не найдет какое-то значение. Если значения нет, браузер будет использовать свой стиль пользовательского агента, а если нет никакого стиля пользовательского агента, он будет использовать базовый стиль initial.
Ключевое слово CSS initial
Чтобы понять ключевое слово initial, мы должны помнить важный факт: каждое свойство в CSS имеет значение по умолчанию, которое не имеет ничего общего со значением по умолчанию пользовательского агента. Стили пользовательского агента — это основные стили, которые браузер применяет к элементам HTML в браузере. Мы склонны думать, что они вводятся автоматически с HTML, но это не так.
Ключевое слово initial указывает браузеру использовать значение по умолчанию данного свойства CSS. Например: значение initial свойства color всегда будет black.
Такое поведение может быть очень запутанным, потому что, как мы уже говорили, значение свойства CSS по умолчанию не обязательно является значением по умолчанию, которое браузер определяет для элемента. Например, значение initial свойства display — это inline для всех элементов. Поэтому, если элемент div получает значение initial в свойстве display, его отображение будет inline, а не block, что является его стилем пользовательского агента.
Значение свойства css inherit.
Давайте посмотрим, какой смысл и эффект дает это значение.
inherit с англ. переводится как наследовать. Свойства, которым будет присвоено это значение, будут наследовать значение того-же свойства его родителя.
В этом примере, хотя дочернему блоку не было задано никакого конкретного значения для свойства border, значение inherit заимствовало параметры этого свойства у своего родителя.
Но, в CSS есть также ряд свойств, которые автоматически заимствуют значения соответствующего свойства его родителя. Например, это свойство color:
Посмотрите, хотя дочернему блоку не было присвоено свойства color, тем не менее, текст в дочернем блоке тоже стал красным цветом.
Таким образом, в CSS есть ряд свойств, которые наследуют свойства своих родителей и есть такие свойства, которые не наследуют.
Чтобы узнать какие конкретно свойства наследуют, а какие нет, можете посмотреть на следующую таблицу:
Это официальный список всех свойств CSS, который представлен в спецификации.
Обратите внимание на графу Inherited
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Или зарегистрируйтесь через социальные сети:
Отключаем нежелательные HTML-элементы с помощью CSS
Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и «вечный» font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.
Есть несколько решений проблемы. Одно из них — вывод предупреждающего изображения с помощью CSS, когда изпользуются нежелательные тэги. Подробные обьяснения этого способа есть здесь и здесь. Второе решение — «вырезание» нежелательных тегов и атрибутов на стороне сервера. Этот способ является наиболее эффективным, другое дело что не всегда есть контроль за сервером где расположен сайт.
Идея состоит в том, чтобы сохранить естественный каскад и наследие стилей во всех браузерах, элегантно «отключая» HTML, нежелательный к использованию клиентом. И тогда клиент перестанет использовать его, потому что нежелательные тэги просто перестанут «работать». Элегантный и ненапрягающий клиента способ, который направит его по верному пути.
Нежелательные HTML-тэги и атрибуты:
Решение
В идеале мы могли бы просто откорректировать некоторые HTML-тэги, вставив значение inherit для эквивалентного CSS-свойства. Браузеры, работающие по стандартам, просто проигнорируют заданные в коде нежелательные атрибуты и будут использовать вместо них наследуемые значения в каскаде.
На пример этот CSS:
будет превалировать над этим кодом:
Соответственно цвет текста внутри тэга font будет цветом, наследуемым по каскаду, а не синим, как задано в коде. То что надо. Но как вы наверняка знаете — у Internet Explorer есть проблемы с наследуемыми значениями. И в седьмой версии тоже. Так что за работу:
Expressions и currentStyle в помощь:
Работает? Отлично, поехали дальше:
Все чудесно, кроме того что Opera 9 не наследует значение для font-family. К счастью font нас тоже устроит:
С этим разобрались. Перейдем к свойству font-size. Здесь нужна деликатность, так как значение размера шрифта наследуется по отношению к вычисляемому (computed) значению. Предыдушие expression‘ы здесь не сработают, так как если для body выставлено значение свойства font-size, равное 2em, то вычисление значения размера шрифта начнется от этой точки. Браузер проверит значение font-size для родительского элемента тэга font, которое равняется 2em и представит вычисляемое значение, равное 4em (2em от 2em). А это не то что нам нужно. Решение простое. Нужно использовать начальное значение font-size, равное 100% для всех браузеров. Давайте добавим несколько свойств нежелательному тэгу basefont, чтобы и его утихомирить. Вот полный список правил для «укрощения» тэгов font и basefont:
Двигаемся дальше. Давайте воспользуемся базовой техникой, чтобы отменить тэги center, s, strike и u:
Свершилось! Мы «отключили» большинство нежелательных тэгов, используя только CSS и expression’ы.
А как же атрибуты? HTML4 включает в себя некоторое количество нежелательных атрибутов, которые могут изрядно попортить нервы. Давайте их тоже «повыключаем». Начнем с align:
Все бы хорошо, но IE6 не поддерживает селекторы атрибутов. Посему, нам надо модифицировать expression, для того чтобы он проверял наличие атрибута align у тэга. Вот что получилось:
Далее на очереди атрибуты тэга img. Помимо атрибута align, мы хотим отключить атрибуты border, vspace и hspace. Так как значения margin и border не наследуются, то здесь применимо простое правило:
Вот здесь мы как раз сталкиваемся с неразрешимой проблемой для IE6. vspace и hspace не равнозначны свойству margin в нем, поэтому IE6 будет продолжать отображать их. Единственное решение, которое пришло мне в голову это написать маленький скриптик, который будет просто удалять эти атрибуты при загрузке документа:
Я бы предпочел не использовать javascript, но в данном случае я просто не вижу другой альтернативы. Так что пусть будет. Теперь добьем атрибут type в тэге ol:
А теперь атрибут bgcolor для body:
Таблицы. Финальный шаг. В таблицах, в HTML4/4.01, есть ряд нежелательных атрибутов, которые активно использовались для верстки страниц. Но мы же не хотим, чтобы клиент использовал таблицы для верстки? Поэтому давайте отключим атрибуты width, height, bgcolor, valign и border:
Подведем итоги:
Используя CSS-правила и минимальный javascript, нам удалось «отключить» большинство нежелательных тэгов и атрибутов, элегантно сохраняя естественное наследование. Нам не нужно «учить» клиента, он в любом случае должен будет использовать правильную разметку. С учетом одной, очень важной ремарки — очень важно предоставить клиенту достаточное количество описаных CSS-классов, чтобы он не был ограничен в работе с разметкой.
Все стили вместе:
Кастомный подход для нормализации и сброса стилей (custom-reset.css)
Здесь я поделюсь своими наработками для нормализации и сброса стилей.
За несколько лет у меня сформировался небольшой файл, за основу которого, изначально, был взят нормалайз.
Почему нормалайз, а не ресет. Он заточен именно под кросбраузерность, что очень важно. Но в чистом виде он меня вообще не устраивал, различные отступы, бордеры и т. д. только мешали, потому я немного подогнал его под свои потребности, поудаляв то, что мне было не нужно.
Со временем файл разрастался, лишнее из нормалайза удалялось, недостающее добавлялось.
Основной целью его создания было максимально подготовить основу для любого проэкта, что по-моему получилось, даже очень удачно. Файл получился довольно универсальный, но все же перед подготовкой проэкта в него нужно заглядывать и возможно что-то коректировать.
Надеюсь вы подчеркнете для себя что-то полезное, здесь вы можете ознакомиться с ним.
custom-reset.css
Краткое описание
Определение блочной модели
Базовые настройки
focus это важно, а outline нет
Состояние фокуса это очень важный момент для взаимодействия с интерективными элементами. (Как и почему здесь). Но outline зачастую не вписывается в дизайн. И сами дизайнеры редко прорисовывают это состоние, потому частой практикой стало дублирование стилей ховера.
Это ленивый способ.
Нормальные дизайнеры всегда прорисовывают состояние фокуса.
Три основных состояния должны всегда присутствовать на каждом интерактивном элементе ( :hover, :focus, :active ).
Отступы
Отступы обнулены, текстовые свойства наследуются.
Если вам нужны отступы для пользовательского контента (а они нужны), должен быть свой класс обертка и свой стайлгайд.
Текстовый контент тоже нужно уметь правильно верстать выставляя правильные отступы и высоту строки.
О том, каким может быть пользовательский контент:
Текстовые элементы
Полное наследование. Ссылки больше не синие, стронг не болд, ем не италик. Em, strong это семантические элементы, они используются не для оформления. Например для названиях товаров, в карточках. То что они имеют по дефолту стили не значит, что они будут нужны именно в том, месте где используется этот тег.
Цвет и подчеркивание ссылки мешает когда эта ссылка в виде кнопки или в виде большой кнопки с картинкой и текстом.
Элементы форм:
Удаляются полностью стили присвоенные кнопкам и инпутам, что может кому-то показаться спорным.
Бывает, возникают неудобства с кнопками при смене тегов, чаще всего это бывает с ссылки на кнопку и наоборот.
(Тег button нельзя использовать как флекс контейнер. На IOSах сломается.)
fieldset и legend
Часто встречал, что эти семантические элементы форм использовались в декоратиыных целях.
Никогда так не делайте, это пример худшей практики. Вот пару примров с нормальной реализацией:
(Тег fieldset нельзя использовать как флекс контейнер. Не работает просто.)
select
Отменяем стандартное отображение select’а
→ Оформляем select сами: codepen
placeholder
Плейсхолдер наслудует цвет. Исчезает при фокусе.
svg (работа с иконками)
Тег svg хоть и полноценный тег, который поддерживает любые свойства, я всегда использую для него обертку, которой и задаю размеры и цвет. Такой подход очень удобный для работы с спрайтами 2-х типов.
Расскажу, как мы работаем с иконками:
Иконочный шрифт мы не используем.
У нас есть 2 типа иконок:
— одноцветные
— цветные (иконки и мелкие изображения).
Все они в формате svg.
Для одноцветных используется svg спрайт, котрых хранится отдельно, и кешируется. Выглядит это так:
И инклюдится на страницу он так:
И стили для него: (этот код добавляется в файл)
Для цветных используется css спрайт:
Загружается css спрайт асинхронно
Генерируется это, понятное дело, галпом.
Что дает такой подход
Для иконки делается контейнер нужного размера и не зависимо от того, будет иконка цветной или нет, она в него отлично впишется.
hidden
Атрибут, который скрывает элемент. Пригодится.
:disabled
Правильный курсор. Так как задизейбленной кнопкой может быть ссылка, то псевдокласс уже не сработает, так как ссылка не элемент формы. Для этого добавляйте класс.
::-ms-clear
Псевдоэлемент в инпуте IE для очистки текста.
:-webkit-autofill
С помощью внутренней тени закрашиваем этот псевдоэлемент под нужный цвет. И наследует заданный цвет.
::selection
Классы
.clearfix
Хоть сейчас во всю используются флексы, не стоит забывать про флоаты, и тем более не стоит забывать про чистку потока для флоатов.
.visually-hidden
Для семантики: Когда надо спрятать заголовок, который должен быть, но его нет в дизайне. Скрытие этим способом не игнорируется скринридером.
Для кастомизация цекбоксов/радиобаттонов:
Скрывать с помощью display: none; или атрибута hidden плохая идея, так как инпут теряет способность получать фокус, а фокус (как мы знаем) это важно.
В работе с изображениями, а именно с тегом
есть некоторые сложности:
Но нельзя просто задать высоту обертке или изображению, потому что при ресайте страницы потеряются нужные пропорции.
И чтоб этого не происходило, высота задается за счет padding в % для псевдоэлемента обертки (:before). Как известно padding в % берет значение ширины родителя, не зависимо заданы вертикальные или горизонтальные значения.
(padding в % некоректно отображается в мозиле, если он задан флекс итему).
Само изображение нужно спозиционировать абсолютно относительно обертки. Когда необходимо, чтоб изображение занимало все пространство (на подобии background-size: cover;). Используется класс .cover-pic
Когда необходимо, чтоб изображение занимало не все пространство (на подобии background-size: contain;). Используется класс .contain-pic
В итоге получается:
Тем же методом сверстаны изображения в инстаграмме, только они нарезаются нужной формы и необходимость в object-fit отпадает.
→ Пример
Прижатие футера
Фикс при прижатии футера для IE. В блоке с min-height (которым в данном случае служит body) flex некоректно работает.
Выше показан один из самых оптимальных способов. Прижатие с помощью таблиц и гридов тоже не требует знать высоту футера, но табличный способ как-то не принято (и немного неудобно) использовать, а гриды не очень кросбраузерно.
Так почему не ресет или не нормалайз? Они не могут полноценно подготовить проект, в любом случае приходится немало дописывать, и потому практически у каждого верстальщика есть свои наработки.
Спасибо, что прочитали мою статью, надеюсь она будет вам полезна. Вопросы и предложения, идеи и замечания приветствуются.
P. S. Советую ознакомиться с публикацией Организация отступов в верстке (margin/padding). И советую использовать css линтеры. И кому интересно, может решить css задачку.
