olegkozlovskui / css-tutorial

CSS tutorail

• [Pseudo-classes & Pseudo-elements](#Pseudo-classes & Pseudo-elements)
• [CSS cascade](#CSS cascade)
• [Dimension units](#Dimension units)
• Box-model
• Progressive Enhancement
• Graceful degradation
• Transform
• SCSS
• Methodologies
• CSS-Modules

CSS — спеціальна мова, що використовується для опису зовнішнього вигляду сторінок, написаних мовами розмітки даних.

Pseudo-classes & Pseudo-elements

Pseudo-classes Псевдоклас CSS являє собою ключове слово, яке додається в кінці інших селекторів, щоб показати, що стиль до відповідних елементів слід застосовувати тільки якщо вони знаходяться в певному стані. Наприклад, ви можливо хочете застосувати стиль лише до тих елементів, на які містяться під вказівником миші, або до чек-боксу, коли він обраний або не активний, або до першого нащадку деякого елемента в дереві DOM.

:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

Pseudo-elements Псевдоелементи дуже схожі на псевдокласи, але є і відмінності. Вони являють собою ключові слова - на цей раз передують двокрапкою (: :) - які можна додавати до селекторам, щоб виділити певну частину елемента.

::after
::before
::first-letter
::first-line
::selection
::backdrop

CSS cascade

Для спрощення визначення стилів в CSS застосовується механізм наслідування стилів. Цей механізм передбачає, що вкладені елементи можуть наслідувати стилі своїх елементів-контейнерів. Однак не до всіх властивостей CSS застосовується наслідування стилів. Наприклад, властивості, які представляють відступи (margin, padding) і рамки (border) елементів, не наслідуються. Крім того, браузери за замовчуванням також застосовують ряд попередньо встановлених стилів до елементів. Наприклад, заголовки мають певну висоту і т.д.

В CSS діє механізм каскадності, яку можна визначити як набір правил, що визначають послідовність застосування безлічі стилів до одного і того ж елементу. Якщо до елементу веб-сторінки застосовується кілька стилів, які не конфліктують між собою, то браузер об'єднує їх в один стиль. Якщо ж стилі конфліктують між собою, наприклад, визначають різний колір тексту, то в цьому випадку застосовується складна система правил для обчислення значущості кожного стилю. Всі ці правила описані в специфікації по CSS: Calculating a selectors specificity.

Для визначення стилю до елементу можуть застосовуватися різні селектори, і важливість кожного селектора оцінюється в балах. Чим більше у селектора пунктів, тим він важливіше, і тим більший пріоритет його стилі мають над стилями інших селекторів.

• Селектори тегів мають важливість, оцінювану в 1 бал
• Селектори класів, атрибутів і псевдокласів оцінюються в 10 балів
• Селектори ідентифікаторів оцінюються в 100 балів
• Вбудовані inline-стилі (задаються через атрибут style) оцінюються в 1000 балів

Типи стилів Розрізняють декілька типів стилів, які можуть спільно застосовуватися до одного документу. Це стиль браузера, стиль автора і стиль користувача.

Стиль браузера Оформлення, яке за замовчуванням застосовується до елементів веб-сторінки браузером. Це оформлення можна побачити в разі «голого» HTML, коли до документу не додається ніяких стилів.

Стиль автора Стиль, який додає до документа його розробник.

Стиль користувача Це стиль, який може включити користувач сайту через настройки браузера. Такий стиль має більш високий пріоритет і перевизначає вихідне оформлення документа.

Нижче наведені пріоритети браузерів, якими вони керуються при обробці стильових правил. Чим вище в списку знаходиться пункт, тим нижче його пріоритет, і навпаки.

1. Стиль браузера.
2. Стиль автора.
3. Стиль користувача.
4. Стиль автора з додаванням! Important.
5. Стиль користувача з додаванням! Important.

Якщо до одного елементу одночасно застосовуються суперечливі стильові правила, то вищий пріоритет має правило, у якого значення специфічності селектора більше. Специфічність це деяка умовна величина, що обчислюється в такий спосіб. За кожен ідентифікатор (надалі будемо позначати їх кількість через a) нараховується 100, за кожен клас і псевдоклас (b) нараховується 10, за кожен селектор тега і псевдоелемент (c) нараховується 1. Складаючи вказані значення в певному порядку, отримаємо значення специфічності для даного селектора.

*              {} /* a=0 b=0 c=0 -> специфичность = 0   */
li             {} /* a=0 b=0 c=1 -> специфичность = 1   */
li:first-line  {} /* a=0 b=0 c=2 -> специфичность = 2   */
ul li          {} /* a=0 b=0 c=2 -> специфичность = 2   */
ul ol+li       {} /* a=0 b=0 c=3 -> специфичность = 3   */
ul li.red      {} /* a=0 b=1 c=2 -> специфичность = 12  */
li.red.level   {} /* a=0 b=2 c=1 -> специфичность = 21  */
#t34           {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

Вбудований стиль, який додається до тегу через атрибут style, має специфічність 1000, тому завжди перекриває пов'язані і глобальні стилі. Однак додавання! Important перекриває в тому числі і вбудовані стилі. Якщо два селектора мають однакову специфічність, то застосовуватися буде той стиль, що зазначений в коді нижче. При цьому псевдоклас: not на відміну від інших псевдокдассів не враховується, проте враховується той селектор, який передається в псевдоклас not.

** !important** CSS надає можливість повністю скасувати значимість стилів. Для цього в кінці стилю вказується значення! Important.

Dimension units

• px - абсолютні пікселі, використовується для максимально конкретного і точного завдання розмірів.

• em - задає розмір щодо шрифту батька, можна відносно конкретних символів: "x" (ex) і "0" (ch), використовується там, де потрібно спростити масштабування компоненти.

• rem - задає розмір щодо шрифту , використовується для зручності глобального масштабу: елементи які планується масштабувати, задаються в rem, а JS змінює шрифт у html.

• % - щодо такого ж властивості батька (як правило, але не завжди), використовується для ширини, висот і так далі, без нього нікуди, але треба знати, щодо чого він вважає відсотки.

• vw, vh, vmin, vmax - щодо розміру екрана.

• vw - 1% ширини вікна

• vh - 1% висоти вікна

• vmin - найменше з (vw, vh), в IE9 позначається vm

• vmax - найбільше з (vw, vh)

Box-model

У HTML-документі кожному елементу на сторінці відповідає прямокутна область (бокс або блок). Двіжок рендеринга в браузері визначає розміри і положення боксів на сторінці, а також їх властивості на зразок кольору, фонової картинки для того, щоб відобразити їх на екрані.

У мові CSS є спеціальна боксова модель яка описує, з чого складається бокс і які властивості впливають на його розміри. У ній у кожного боксу є 4 області: margin (зовнішні відступи), border (рамка), padding (внутрішні поля), і content (контент або вміст).


Внутрішня область елемента (content area) містить текст та інші елементи, розташовані всередині (контент або вміст). У неї часто буває фон, колір або зображення (в такому порядку: фоновий колір ховається під непрозорим зображенням), і вона знаходиться всередині content edge; її розміри називаються ширина контенту (content width або content-box width), і висота контенту (content height або content-box height). Іноді ще говорять «внутрішня ширина / висота елемента»

За замовчуванням, якщо CSS-властивість box-sizing не задано, розмір внутрішньої області з вмістом задається властивостями width, min-width, max-width, height, min-height and max-height. Якщо ж властивість box-sizing задано, то воно визначає, для якої області вказані розміри.

Поля елемента (padding area) - це пуста область, оточуюча контент. Вона може бути залита якимось кольором, покрита фоновою картинкою, а її межі називаються padding edge.

Розміри полів задаються окремо з різних сторін властивостями padding-top, padding-right, padding-bottom, padding-left або загальною властивістю padding.

Область рамки (border area) оточує поля елемента, а її межа називається (border edge). Ширина рамки задається окремим властивістю border-width або в складі властивості border. Розміри елемента з урахуванням полів і рамки іноді називають зовнішньою шириною / висотою елемента.

Відступи (margin area) додають порожній простір навколо елемента і визначають відстань до сусідніх елементів.

Величина відступів задається окремо в різних напрямках властивостями margin-top, margin-right, margin-bottom, margin-left або загальною властивістю margin.

Відступи двох сусідніх елементів, розташованих один над одним або вкладених один в одного, можуть накладатися. Це називається схлопування кордонів (margin collapsing). Схлопиваются тільки вертикальні відступи.

Для елементів з display: inline (або inline-block, inline-table) на займане за висотою місце також впливає значення властивості line-height.

Progressive Enhancement

Прогресивне поліпшення передбачає, що веб-інтерфейси повинні створюватися поетапно, циклічно, від простого до складного. На кожному з етапів повинен виходити закінчений веб-інтерфейс, який буде краще, красивіше і зручніше попереднього. Можна сказати, що зараз таких етапів чотири:

• «Старий-добрий-HTML» етап
• CSS етап
• CSS3 етап
• JavaScript етап

На першому етапі початковий зміст сторінки розмічається за допомогою HTML. На цьому етапі необхідно зробити логічну і семантично правильну розмітку. Ніякого додаткового оформлення не провадиться. В результаті виходить коректно розмічений HTML-документ, який браузер відображає так, як вважає за потрібне. Такий документ можна назвати «найменшим спільним знаменником», так як він буде коректно відображатися в будь-якому, навіть самому простому, браузері. Прогресивне поліпшення наполягає, що перший етап є найважливішим, тому що немає в інтернеті нічого важливішого, ніж зміст.

На другому етапі документ оформляється за допомогою старого доброго CSS і знаходить більш акуратний вигляд: з'являється сітка сторінки, задаються параметри шрифту елементів, фонові зображення і так далі.

На третьому етапі застосовуються нові можливості з сімейства специфікацій CSS3, і документ доводиться до блиску: напівпрозорі плашки, круглі куточки, тіні. Також за допомогою CSS3 можна додати різні анімаційний-декоративні фішечки: поступове згасання або зсув елементів, підсвічування полів форм і так далі.

На четвертому етапі до розуму доводиться процес взаємодії з інтерфейсом: різні AJAX рішення, динамічні елементи, ті ж календарики і так далі. Тут у всю використовується JavaScript. Цей етап відповідає за зручність.

Все ж відзначимо ключові відмінності Graceful degradation і Progressive Enhancement:

• Graceful degradation - більш широке поняття, ніж progressive enhancement, який обмежений тільки веб-інтерфейсами. Progressive enhancement - це наше, рідне, вебовское.

• Progressive enhancement задає вектор руху (починай з простого!), А для graceful degradation це не так важливо.

• Progressive enhancement наполягає на важливості змісту, а для graceful degradation воно на другому плані.

Graceful degradation

Це здатність системи продовжувати своє функціонування в разі відмови деяких її компонентів. І чим серйозніше відмова призводить до погіршення якості роботи системи і роботи з системою.

Ця замітка присвячена більш окремого випадку поступової деградації, а саме відмовостійкості динамічних веб-інтерфейсів і в ній розбирається приклад побудови і роботи такого інтерфейсу.

Основна ідея при проектуванні таких інтерфейсів полягає в наступному: «Користувач може повноцінно працювати з системою і з повністю відключеним JavaScript. Однак, з включеним JavaScript йому буде набагато зручніше ».

Веб-дизайн, який заснований на принципі graceful degradation, спочатку призначений для перегляду в сучасних браузерах, тоді як в старих браузерах він буде відображатися з тим же функціоналом і набором можливостей, але при цьому з меншою кількістю особливостей

Основна відмінність між принципами graceful degradation і progressive enhancement це те, звідки починається дизайн. Якщо починати верстку з найстарішого, але все ще общеіспользуемих браузера, а після додавати деякі особливості для новіших версій, то це - progressive enhancement. Якщо ж починати створення сайту під новітні браузери, а потім просто «урізати» деякі наріжні особливості для старіших - це і є принцип graceful degradation.

Transform

Трансформує елемент, зокрема, дозволяє його масштабувати, повертати, нахиляти, накладати, а також комбінувати види трансформацій.

• translate
• scale
• skewX
• skewY
• rotate

SCSS

Sass дає можливість використовувати змінні, вкладені правила, міксини, імпорт і багато іншого, все з повністю сумісним з CSS синтаксисом.

Міксини дозволяють визначати стилі, які можуть бути перевикористані протягом всієї таблиці стилів. Ви можете думати про Міксини, як про функції. Ви можете передавати змінні, також як у функціях будь-якої мови програмування. У SCSS міксини поп=вертають набір CSS правил. Ви можете використовувати міксини так @include ім'я-міксина, певне директивної @mixin.

Methodologies

BEM

БЕМ (Блок, Елемент, Модифікатор) - компонентний підхід в веб-розробці. В його основі лежить принцип поділу інтерфейсу на незалежні блоки. Він дозволяє легко і швидко розробляти інтерфейси будь-якої складності і повторно використовувати існуючий код, уникаючи «Copy-Paste».

Складові:

• блоки можуть використовуватися в декількох місцях сайту;
• елементи є частиною блоку і не мають функціонального сенсу поза блоком;
• модифікатори є властивості блоку або елементу, які змінюють його зовнішній вигляд або поведінку.

З цих складових будуються класи для безпосереднього використання в CSS. При цьому не слід використовувати селектори тегів (це потенційно може перешкодити використовувати блок / елемент в якомусь нестандартному місці на сайті, тобто прив’язує сутність до контексту); рекомендується також уникати каскадних селекторів, тому що отримана назва класу сама по собі досить точно (специфічно) вибирає відповідний елемент.

Такий підхід дозволяє позбутися від непередбачуваних наслідків каскаду і ізолює окремі модулі один від одного.

Мета методології БЕМ – «розробляти сайти, які необхідно швидко запустити і довго підтримувати. Методологія допомагає створювати розширюються та повторно використовувані компоненти інтерфейсу. »

Основна концепція – легка підтримка проектів з часом і повторне використання компонентів.

Головна стратегія БЕМ полягає в організації CSS-коду в повторно використовувані модулі за допомогою розумної системи іменування.

Плюси:

• ізольованість модулів один від одного і відсутність непередбачуваних каскадів селекторів;
• нові розробники можуть швидко зрозуміти зв’язок між компонентами в розмітці і CSS;
• методологія сприяє підвищенню продуктивності в команді. Переваги особливо помітні у великих проектах;
• система іменування знижує ризики колізій з класами і витік стилів;
• CSS несильно прив’язаний до розмітки в певному місці на сторінці;
• CSS стає повторно використовуваним.

Мінуси:

• не завжди довгі назви класів зручні для використання (для великих проектів є сенс використовувати інструменти, що автоматизують роботу з БЕМ-розміткою);
• високий поріг входження. Потрібно звикати до незвичного найменування класів; наявність символів __ і – в класах викликають у деяких естетів огиду.

Блок Функціонально незалежний компонент сторінки, який може бути повторно використаний. В HTML блоки представлені атрибутом class.

• Назва блоку характеризує сенс («що це?» - «меню»: menu, «кнопка»: button), а не стан («який, як виглядає?» - «червоний»: red, «великий»: big).
• Блок не повинен впливати на своє оточення, т. Е. Блоку не слід задавати зовнішню геометрію (у вигляді відступів, кордонів, що впливають на розміри) і позиціонування.
• В CSS по БЕМ також не рекомендується використовувати селектори за тегами або id.
• Блоки можна вкладати один в одного.
• Допустима будь-яка вкладеність блоків.

<!-- Верно. Семантически осмысленный блок `error` -->
<div class="error"></div>

<!-- Неверно. Описывается внешний вид -->
<div class="red-text"></div>

Елемент Складова частина блоку, яка не може використовуватися у відриві від нього.

• Назва елемента характеризує сенс («що це?» - «пункт»: item, «текст»: text), а не стан («який, як виглядає?» - «червоний»: red, «великий»: big).
• Структура повного імені елемента відповідає схемі: ім'я-блока__імя-елемента. Ім'я елемента відокремлюється від імені блоку двома підкресленнями (__).

<!-- Блок `search-form` -->
<form class="search-form">
    <!-- Элемент `input` блока `search-form` -->
    <input class="search-form__input">

    <!-- Элемент `button` блока `search-form` -->
    <button class="search-form__button">Найти</button>
</form>

• Елементи можна вкладати один в одного. -Допустима будь-яка вкладеність елементів.
• Елемент - завжди частина блоку, а не іншого елемента. Це означає, що в назві елементів не можна прописувати ієрархію виду block__elem1__elem2.

<!--
    Верно. Структура полного имени элементов соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input">
        <button class="search-form__button">Найти</button>
    </div>
</form>

<!--
    Неверно. Структура полного имени элементов не соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form class="search-form">
    <div class="search-form__content">
        <!--
            Рекомендуется:
            `search-form__input` или `search-form__content-input`
        -->
        <input class="search-form__content__input">

        <!--
            Рекомендуется:
            `search-form__button` или `search-form__content-button`
        -->
        <button class="search-form__content__button">Найти</button>
    </div>
</form>

• Ім'я блоку задає простір імен, яке гарантує залежність елементів від блоку (block__elem).
• Блок може мати вкладену структуру елементів в DOM-дереві:

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>

• Елемент - завжди частина блоку і не повинен використовуватися окремо від нього.

<!-- Верно. Элементы лежат внутри блока `search-form` -->
<!-- Блок `search-form` -->
<form class="search-form">
    <!-- Элемент `input` блока `search-form` -->
    <input class="search-form__input">

    <!-- Элемент `button` блока `search-form` -->
    <button class="search-form__button">Найти</button>
</form>

<!-- Неверно. Элементы лежат вне контекста блока `search-form` -->
<!-- Блок `search-form` -->
<form class="search-form">
</form>

<!-- Элемент `input` блока `search-form` -->
<input class="search-form__input">

<!-- Элемент `button` блока `search-form` -->
<button class="search-form__button">Найти</button>

Елемент - необов'язковий компонент блоку. Не у всіх блоків повинні бути елементи.

<!-- Блок `search-form` -->
<div class="search-form">
    <!-- Блок `input` -->
    <input class="input">

    <!-- Блок `button` -->
    <button class="button">Найти</button>
</div>

Створюйте блок Якщо фрагмент коду може використовуватися повторно і не залежить від реалізації інших компонентів сторінки.

Створюйте елемент Якщо фрагмент коду не може використовуватися самостійно, без батьківської сутності (блоку).

Виняток становлять елементи, реалізація яких для спрощення розробки вимагає поділу на більш дрібні частини - піделементи. У БЕМ-методології можна створювати елементи елементів. У подібному випадку замість елемента необхідно створювати службовий блок.

Модифікатор Сутність, яка визначає зовнішній вигляд, стан і поведінку блоку або елементу.

• Назва модифікатора характеризує зовнішній вигляд («який розмір?», «Яка тема?» І т. П. - «розмір»: size_s, «тема»: theme_islands), стан («чим відрізняється від інших?» - «відключений»: disabled, «сфокусований»: focused) і поведінку («як поводиться?», «як взаємодіє з користувачем?» - «напрям»: directions_left-top).
• Ім'я модифікатора відділяється від імені блоку або елементу одним підкресленням (_).

Типи модифікаторів

Булевий

• Використовують, коли важливо тільки наявність або відсутність модифікатора, а його значення несуттєво. Наприклад, «відключений»: disabled. Вважається, що при наявності булевого модифікатора у сутності його значення дорівнює true.
• Структура повного імені модифікатора відповідає схемі: ім'я-блока_імя-модифікатора; ім'я-блока__імя-елемента_імя-модифікатора.

<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- Элемент `button` имеет булевый модификатор `disabled` -->
    <button class="search-form__button search-form__button_disabled">Найти</button>
</form>

Ключ-значення

• Використовують, коли важливе значення модифікатора. Наприклад, «меню з темою оформлення islands»: menu_theme_islands.
• Структура повного імені модифікатора відповідає схемі: ім'я-блока_імя-модіфікатора_значеніе-модифікатора; ім'я-блока__імя-елемента_імя-модіфікатора_значеніе-модифікатора.

<!-- Блок `search-form` имеет модификатор `theme` со значением `islands` -->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <!-- Элемент `button` имеет модификатор `size` со значением `m` -->
    <button class="search-form__button search-form__button_size_m">Найти</button>
</form>

<!--
    Невозможно одновременно использовать два одинаковых модификатора
    с разными значениями
-->
<form class="search-form
             search-form_theme_islands
             search-form_theme_lite">

    <input class="search-form__input">

    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
        Найти
    </button>
</form>

З точки зору БЕМ-методології модифікатор не може використовуватися у відриві від модифікується блоку або елементу. Модифікатор повинен змінювати вид, поведінку або стан суті, а не заміняти її.

<!-- Верно. Блок `search-form` имеет модификатор `theme` со значением `islands`-->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <button class="search-form__button">Найти</button>
</form>

<!-- Неверно. Отсутствует модифицируемый класс `search-form` -->
<form class="search-form_theme_islands">
    <input class="search-form__input">

    <button class="search-form__button">Найти</button>
</form>

SMACSS

SMACSS розшифровується як «Швидка і модульна архітектура для CSS» (Scalable and Modular Architecture for CSS).

Основна мета підходу – зменшення кількості коду і на спрощення підтримки коду. Документація.

Стилі складаються з 5 частин (в порядку включення їх в документ):

• Base rules – базові стилі. Це стилі основних елементів сайту – body, input, button, ul, ol і т.п. У цій секції використовуються в основному селектори тегів і атрибутів, класи – в виняткових випадках (наприклад, якщо у вас стилізовані javascript’ом СЕЛЕКТА);

• Layout rules – стилі макета. Тут знаходяться стилі глобальних елементів розміри шапки, футера, сайдбара і т.п. Пропонується використовувати тут id в селекторах, так як ці елементи не будуть зустрічатися більше 1 разу на сторінці. Як на мене то використання id в CSS це впринципі погана ідея і цього потрібно уникати. Ідентифікатори лише для JS прив’язок. Використовуйте класи і буде вам щастя.

• Modules rules – стилі модулів, тобто блоків, які можуть використовуватися кілька разів на одній сторінці. Для класів модулів не рекомендується використовувати id і селектори тегів (для багаторазового використання та незалежності від контексту відповідно).

• State rules – стилі стану. В цьому розділі прописуються різноманітні стани модулів і скелета сайту. Це єдиний розділ, в якому допустимо використання ключового слова «! Important». На мою думку, використання !important – погана практика, і CSS методологія повинна забезпечити уникнення цього інструменту.

• Theme rules – оформлення. Тут описуються стилі оформлень, які з часом, можливо, потрібно буде замінити (так зручно робити, наприклад, новорічне оформлення; для html, виставлених на продаж такі стилі дозволяють перемикати колірну гамму і т.п.).

Також рекомендується вводити неймспейси для класів, що належать до певної групи, а також використовувати окремий неймспейс для класів, які використовуються в JavaScript.

Цей підхід дійсно дозволяє спростити написання і підтримку коду і останнім часом привертає чималу кількість розробників.

CSS-Modules

CSS-файли, в яких всі класи і анімації за замовчуванням знаходяться в локальній області видимості. CSS-модулі - це не офіційна специфікація, вони не імплементовані в браузери, скоріше, це завдання, що запускається на стадії складання проекту (наприклад, за допомогою Webpack або Browserify), в процесі виконання якої імена класів і селектори змінюються так, щоб утворилася свого роду локальна область видимості (щось на зразок простору імен).

CSS-модулі гарантують, що всі стилі одного компонента:

• Знаходяться в одному місці
• Застосовуються тільки до цього компоненту і ніякому іншому

Цей підхід був розроблений, щоб вирішити проблему глобальному контексті в CSS