Препроцесор

Поточна версія сторінки поки що не перевірялася досвідченими учасниками та може значно відрізнятися від версії, перевіреної 12 квітня 2022 року; перевірки вимагають 2 редагування.

Препроцесор — комп'ютерна програма, яка приймає дані на вході та видає дані, призначені для входу іншої програми (наприклад компілятора). Про дані на виході препроцесора говорять, що вони знаходяться в препроцесованою формі, придатної обробки наступними програмами (компілятор). Результат та вид обробки залежать від виду препроцесора; так, деякі препроцесори можуть лише виконати просту текстову підстановку, інші здатні за можливостями зрівнятися з мовами програмування. Найчастіший випадок використання препроцесора - обробка вихідного коду перед передачею його наступний крок компіляції. Мови програмування C/C++ та система комп'ютерної верстки TeX використовують препроцесори, які значно розширюють їх можливості.

У деяких мовах програмування етап компіляції та трансляції отримали назву «препроцесинг».

Лексичні препроцесори

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

Препроцесинг C/C++

Найбільш широке поширення серед лексичних препроцесорів отримав препроцесор мови Сі, використовуваний у мовах програмування Сі та її нащадку — C++. Препроцесор видаляє з коду коментарі, перетворює код відповідно до макросів і виконує інші директиви, що починаються з символу "#" (такі як #include, #define, різноманітні директиви типу #pragma).

Мова програмування PHP

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

Приклад тексту сторінки, що містить поточний час:

html>
head>
title>Поточний часtitle>
head>
body>
h1>Поточний часh1>

print strftime('Зараз %H годин, %M хвилин %S секунд');
?>
body>
html>

Препроцесор PHP замінить виділений рядок на:

html>
head>
title>Поточний часtitle>
head>
body>
h1>Поточний часh1> Зараз 10 годин, 15 хвилин 20 секунд body>
html>

Інші лексичні препроцесори

Інші лексичні препроцесори підтримують універсальну мову m4, яка зазвичай використовується в крос-платформних системах складання, таких як autoconf, і GEMA — обробник макросів з відкритим вихідним кодом, робота якого заснована на контекстних шаблонах.

Синтаксичні препроцесори

Синтаксичні препроцесори вперше були представлені у сімействі мов Лісп. Їхня роль полягала в обробці синтаксичних дерев згідно з набором правил, визначених користувачем. Для деяких мов програмування правила писалися тією ж мовою, що і сама програма (симетрія компіляції). Прикладами можуть бути Лісп і OCaml.У деяких мовах використовується повністю незалежна мова для опису перетворень, наприклад, XSLT препроцесор для XML або аналог зі статичними типами CDuce.

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

Модифікація синтаксису

Хороший приклад модифікації синтаксису - існування двох різних варіантів синтаксису [1] у мові програмування Objective Caml. звичайний синтаксис або виправлений синтаксис, у своїй вибір залежить від бажання програміста.

Аналогічно, набір програм, написаних на OCaml, має можливість налаштування синтаксису мови шляхом додавання нових операторів.

Розширення мови

Відмінними прикладами розширення мови за допомогою макросів може служити їх використання в сімействі мов програмування Лисп. Типи. Майже всі ці властивості реалізовані синтаксичними препроцесорами, хоча це несе у собі відбиток етапу компіляції «розширення макросами», керованої компілятором Лисп.

Аналогічно, типобезпечні регулярні вирази або генерація коду можуть бути додані до синтаксису та семантики OCaml за допомогою макросів, наприклад, мікронитки (також відомі як співпрограми або волокна), монади або прозора обробка XML.

Спеціалізована мова

Однією з незвичайних особливостей сімейства мов Лісп є можливість використання макросів для створення вбудованого предметно-орієнтованого програмування. Зазвичай, у великій кількості проектів, написаних мовою Лісп, модуль може бути написаний на безлічі подібних мініязиків, тобто один може використовувати SQL-діалект мови Лісп, а інший може бути написаний на діалекті, орієнтованому на графічний інтерфейс користувача або виведення на принтер і таке інше. Стандартна бібліотека Common Lisp містить приклад такого рівня синтаксичної абстракції у вигляді макросу LOOP, який реалізує мінімові мови, подібні до мови Алгол, для опису комплексної ітерації, при збереженні можливості використовувати стандартні оператори Лісп.

Препроцесор/мова MetaOCaml забезпечує схожі можливості і для зовнішньої предметно-орієнтованої мови програмування. Цей препроцесор, отримуючи опис семантики мови (так звана інтерпретація) і комбінуючи інтерпретацію під час компіляції та генерації коду, передає це визначення компілятору мови OCaml, а той на основі цієї мови створює байт-код або природний код.

Макропроцесор загального призначення

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

Макропроцесор m4 ймовірно найбільш відомий приклад такого макропроцесора загального призначення.

Приклади

• Застосування препроцесора Сі для препроцессингу JavaScript-коду [2].
• Застосування M4(Див. приклад у статті) або препроцесора Сі як движок шаблонів для генерації HTML. [3]
• imake (від interface make) використовує препроцесор Сі. Застосовувався у проекті X Window System до переходу на automake.
• grompp — це макропроцесор для файлів моделей проекту GROMACS (вільні програми з відкритим кодом для вирішення проблем обчислювальної хімії). За промовчанням використовує препроцесор Сі, але у файлі моделі можна вказати будь-який інший препроцесор. Використовується для перевірки розмітки. Використовує директиви #define та #include.
• Sass і LESS - це препроцесори CSS.

Цікаві факти

• Назва широко поширеного препроцесора PHP є рекурсивним акронімом: PHP -php: hypertext preprocessor».

Див. також

CSS-препроцесори в 2024 році.

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

Одне з важливих завдань препроцесорів - спростити та прискорити процес розробки та підтримку стилів у проекті. В огляді розглянемо найбільш популярні препроцесори у 2024 році та розповімо, як вибрати відповідний.

Препроцесор Sass

Sass (Syntactically Awesome Style Sheets) - один із перших CSS-препроцесорів, створений у 2007 році і має велику спільноту розробників. На github.com у Sass 3500 зірок, щотижня препроцесор завантажує понад одинадцять мільйонів розробників:

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

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

Серед CSS-властивостей є різні простори імен, наприклад, font . Щоб щоразу не вводити простір імен при вказівці властивості, за допомогою Sass можна вказати простір один раз, а потім додавати потрібні властивості:

Крім того, Sass надає можливість використовувати оператори та функції, що дуже спрощує написання та підтримку CSS.

Це самостійний препроцесор, який не потребує встановлення додаткових інструментів. Його можна використовувати з будь-яким проектом, який застосовує CSS, та компілювати за допомогою інструменту Sass CLI або плагінів для збирання.

Препроцесор має два окремі синтаксиси - Sass і SCSS.

Sass (Syntactically Awesome Style Sheets) - Спрощений синтаксис CSS, вважається застарілим. Він використовує відступи замість фігурних дужок, вони вказують на вкладення селекторів. Нові рядки замінюють крапки з комою для розділення властивостей:

@mixin button-base() @include typography(button) @include ripple-surface cursor: pointer &:disabled color: $mdc-button-disabled-ink-color cursor: default pointer-events: none

SCSS (Sassy CSS) - заснований на стандартному для CSS синтаксисі.

@mixin button-base() < @include typography(button); @include ripple-surface; @include ripple-radius-bounded; display: inline-flex; position: relative; height: $button-height; border: none; vertical-align: middle; &:hover < cursor: pointer; >&:disabled < color: $mdc-button-disabled-ink-color; cursor: default; pointer-events: none; >>

Сьогодні SCSS є більш використовуваною версією, але і синтаксис Sass залишає своїх прихильників. SCSS — стабільний препроцесор, що широко підтримується, часто використовується в проектах, для нього створюють безліч плагінів і розширень для поліпшення функціональності.

Препроцесор LESS

LESS - це також поширений препроцесор, у нього 16 900 зірок на github.com і близько 5 мільйонів завантажень на тиждень на npmjs.com.

LESS був випущений у 2009 році, підтримує змінні, вкладені правила та міксини. Але він має менш складний синтаксис, ніж Sass, що робить його простим для вивчення та використання.

Подібно до Sass, LESS є самостійним препроцесором, його код компілюється в звичайний CSS. Для компіляції використовують LESS CLI або плагіни, інтегровані в систему збирання проекту.

Препроцесор має схожі на Sass базові функції. Але LESS має додаткові можливості - в ньому можна піднімати змінні, витягувати певні компоненти з кольору, наприклад, відтінок, насиченість, яскравість і контрастність.

У коді те саме властивість може повторюватися безліч разів. Змінні полегшують підтримку коду, надаючи можливість керувати властивостями одного місця. Будь-яка змінна LESS ініціалізується як директива, з використанням символу @ на початку.

Змінні можна використовувати, наприклад, в іменах селекторів або властивостей, URL-адресах та операторах @import .

За допомогою LESS цей приклад компілюється в CSS:

LESS використовують безліч розробників, він має широкий набір функцій, швидкий та ефективний у використанні.

Препроцесор Stylus

Stylus - CSS-препроцесор, написаний на Node.js, створений у 2010 році. Використовує синтаксис, подібний до Python.

font-size = 14px font-stack = "Lucida Grande", Arial, sans-serif body font font-size font-stack // Компілюється в CSS: body

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

У Stylus не така велика база користувачів, як у LESS та Sass. Він має 11 100 зірок на github.com і більше 3 мільйонів завантажень на тиждень.

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

textarea, input border 1px solid #eee

Також не потрібні фігурні дужки для визначення блоків, натомість використовуються відступи. Для змінних, як і в Sass, застосовується знак $.

Ці особливості дозволяють розробнику скорочувати час написання та створювати чистий код. Але в такій гнучкості є недолік — при роботі над великим проектом код стає складним для сприйняття, тому що немає чітких роздільників та ідентифікаторів.

Інструмент PostCSS

PostCSS - це інструмент, який дозволяє перетворювати CSS за допомогою плагінів.Його випустили у 2013 році, і зараз він існує у 7 версії. Він не додає нового синтаксису, як Sass або LESS, але надає можливість модифікувати CSS за допомогою JavaScript-плагінів.

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

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

Який препроцесор вибрати

Вибір препроцесора ґрунтується на конкретних вимогах проекту, особистих уподобаннях та досвіді розробника, а також на можливостях інтеграції з іншими інструментами та CMS.

Якщо ви новачок, краще почати з простих препроцесорів, таких як Sass або LESS. Ці препроцесори мають простіший синтаксис, ніж чистий CSS, велика спільнота, яка може допомогти зі складними питаннями. Якщо ви досвідчений розробник, то PostCSS - хороший вибір, оскільки він надає більш широкі можливості налаштування та оптимізації.

? Новачкам - Sass або LESS, досвідченим - PostCSS

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

? Для великого проекту – Sass або LESS, для маленького – PostCSS

Якщо вам потрібно оптимізувати CSS-код, то PostCSS може бути найкращим вибором, оскільки він надає безліч плагінів для оптимізації CSS.

? Для оптимізації коду - PostCSS

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

? Якщо потрібний більш гнучкий інструмент — PostCSS

Важливо враховувати, що не всі препроцесори підтримуються інструментами збирання проектів та CMS. Наприклад, якщо ви працюєте з WordPress, то зручніше використовувати препроцесори, які легко інтегруються з цією CMS Sass або LESS.

? Якщо працюєте з WordPress - Sass або LESS

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

? При роботі в команді - вибір узгоджується з усіма

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

"Доктайп" - журнал про фронтенд. Читайте, слухайте та навчайтеся з нами.

Читати далі

Псевдоклас

Псевдоклас :link CSS призначений для стилізації посилань, які ще не були відвідані користувачем. Цей псевдоклас дозволяє розробникам задавати зовнішній вигляд для невідвіданих посилань окремо від тих, за якими користувач вже переходив, що допомагає краще орієнтуватися на сторінці та підвищує зручність використання сайту.

Приклад використання псевдокласу :link для стилізації невідвіданих посилань:

У цьому прикладі для всіх невідвіданих посилань встановлюється синій колір ( #007bff ) і забирається підкреслення. Це робить зовнішній вигляд посилань акуратнішим і одночасно інформативним, оскільки користувач може легко відрізнити їх від вже відвіданих ( :visited ) посилань.

При роботі з :link важливо пам'ятати, що цей псевдоклас повинен використовуватися в поєднанні з псевдокласом :visited для повної стилізації станів посилань. Також рекомендується визначати стилі для псевдокласів :hover та :active , щоб забезпечити інтерактивний та чуйний інтерфейс.

Приклад повного набору стилів для посилань:

a:link < color: #007bff; text-decoration: none; >a:visited < color: #666; >a:hover < color: #0056b3; text-decoration: underline; >a:active

У цьому прикладі задаються різні стилі для всіх можливих станів посилань: :link для невідвідених, :visited для відвіданих, :hover при наведенні курсору та :active у момент натискання на посилання. Такий підхід дозволяє створити більш динамічний та інтуїтивно зрозумілий інтерфейс веб-сторінки.

Селектор нащадків (пробіл)

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

Приклад використання селектора нащадків:

У цьому прикладі всі абзаци (

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

Селектор нащадків особливо корисний у таких випадках:

1. Структурування контенту: Допомагає стилізувати елементи всередині певних секцій або компонентів, не торкаючись схожих елементів в інших частинах сторінки.
2. Тематичне оформлення: Використовується для застосування унікальних стилів до елементів, які розташовані всередині певних контейнерів, наприклад, для статей, сайдбарів або футерів.
3. Ізоляція стилів: Забезпечує локальне застосування стилів, запобігаючи їх випадковому розповсюдженню на інші елементи документа.

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

Однак, важливо дотримуватися балансу і уникати занадто глибокої вкладеності селекторів, оскільки це може ускладнити підтримку та оптимізацію коду. Рекомендується використовувати селектор нащадків з розумом, орієнтуючись на підтримку чистоти та простоти структури CSS.

Псевдоклас

Псевдоклас :focus CSS використовується для стилізації елементів, які отримали фокус. Це може бути, наприклад, текстове поле у ​​формі, до якого користувач перемістив курсор для введення або посилання, вибране через клавіатурне введення. Псевдоклас :focus дозволяє створити більш інтерактивний і доступний інтерфейс користувача, підсвічуючи активні або вибрані елементи.

Приклад використання :focus :

У цьому прикладі для всіх текстових полів (input) при отриманні фокусу змінюватиметься колір кордону на синій та фоновий колір на світло-синій. Це забезпечує наочний зворотний зв'язок користувачеві про те, який елемент форми активний в даний момент, покращуючи загальну доступність користувача і зручність використання інтерфейсу.

Псевдоклас :focus особливо важливий для:

1. Поліпшення доступності: Він допомагає користувачам з обмеженими можливостями або тими, хто використовує клавіатурне введення замість миші, розуміти, який елемент керування в даний момент активний.
2. Підвищення інтерактивності: Візуальна відмінність активних елементів робить інтерфейс більш дружнім та зрозумілим для користувача.
3. Створення стилістичних акцентів: Дозволяє додавати унікальні стилістичні особливості інтерактивних елементів інтерфейсу, підкреслюючи їх функціональність.

Застосування :focus у поєднанні з іншими псевдокласами, такими як :hover та :active , дозволяє створити комплексне візуальне уявлення різних станів елементів управління, роблячи інтерфейс більш інтуїтивно зрозумілим та приємним у використанні.

Однак, важливо пам'ятати, що стилізація елементів за допомогою :focus повинна бути досить помітною, щоб користувач міг легко ідентифікувати фокусований елемент, але при цьому не повинна бути надто нав'язливою, щоб не відволікати від загального сприйняття інтерфейсу.

Селектор з id

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

Селектор id позначається знаком решітки ( # ) перед ім'ям ідентифікатора. Ідентифікатори HTML повинні бути унікальними в межах документа, що робить селектор по id потужним інструментом для стилізації конкретних елементів.

Приклад використання селектора по id:

У цьому прикладі елементу з id="uniqueElement" надаються стилі, що роблять текст зеленим і збільшують розмір шрифту до 20 пікселів.Ці стилі будуть застосовані лише до цього конкретного елемента завдяки унікальності ідентифікатора.

Переваги використання селектора по id:

1. Точкова стилізація: Селектор по ID дозволяє застосовувати стилі до конкретного елемента, не впливаючи на інші елементи.
2. Високий пріоритет: Стилі, застосовані через селектор по ID, мають більш високий пріоритет, ніж стилі, застосовані через класи та теги, що полегшує перевизначення стилів.

• Ідентифікатор має бути унікальним у межах всього HTML-документа.
• Зловживання селекторами по ID може зробити CSS-код складним для підтримки, особливо у великих проектах. Рекомендується використовувати їх з розумом, віддаючи перевагу класам для стилізації, коли це можливо.
• Селектори id можуть збільшити специфічність CSS-правил, що іноді утруднює їх перевизначення.

Використання селектора id є потужним інструментом в арсеналі веб-розробника, дозволяючи точково впливати на стиль окремих елементів сторінки.

Кілька селекторів через кому

Список селекторів у CSS являє собою перелік селекторів, розділених комами, що дозволяє застосувати той самий набір стилів до різних елементів веб-сторінки. Цей метод спрощує написання CSS-коду, позбавляючи необхідності дублювати стилі для кожного типу елементів окремо.

Приклад використання списку селекторів для стилізації заголовків, абзаців та елементів списку:

Застосування списку селекторів є ефективним у багатьох ситуаціях, включаючи:

• Застосування базових стилів тексту (колір, шрифт, розмір) до різних типів елементів.
• Скидання стандартних відступів для елементів списку, параграфів та інших блокових елементів.
• Встановлення загальних стилів для інтерактивних елементів, таких як кнопки та посилання, у різних частинах веб-сторінки.

При роботі зі списком селекторів важливо враховувати, що стилі будуть застосовані до всіх вказаних елементів. Для більш специфічних стильових завдань слід використовувати класи чи ідентифікатори, і навіть більш конкретні типи селекторів.

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

Суміжний селектор +

Суміжний селектор CSS, що позначається знаком плюс ( + ), дозволяє вибирати елемент, який є безпосереднім сусідом іншого елемента на тому самому рівні ієрархії DOM. Цей селектор ефективний для застосування стилів до елемента, що знаходиться в точному порядку після іншого елемента в коді HTML.

Приклад застосування суміжного селектора:

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

При використанні суміжного селектора важливо враховувати такі моменти:

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

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

Селектор тип

Селектори типу CSS використовуються для вибору HTML-елементів, відповідних певному імені тега. Вони дозволяють застосовувати стилі до елементів, не покладаючись на класи або ідентифікатори, що робить їх ідеальними для встановлення базових стилів для стандартних елементів сторінки, таких як абзаци, заголовки та списки.

Приклад використання селектора типу для стилізації всіх абзаців (

) на сторінці:

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

Селектори типу корисні для завдання загальних стилів елементам, які часто використовуються в документі, і є основою каскадності CSS. Вони дозволяють легко підтримувати та оновлювати стилі сайту, надаючи одноманітне представлення елементів по всьому сайту.

При роботі з селекторами типу рекомендується дотримуватися принципів чистого коду та кращих практик веб-розробки:

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

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

Універсальний селектор *

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

Приклад використання універсального селектора для скидання стандартних відступів та завдання базового шрифту:

У цьому прикладі всі елементи сторінки обнуляють зовнішні та внутрішні відступи ( margin і padding ), а також встановлюють шрифт Arial як базовий для всього документа.

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

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

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

Ігри з нескінченністю, або навіщо нам infinity в CSS

💡 Це переклад статті Will Boyd з блогу CodersBlock. Оригінал: https://codersblock.com/blog/playing-with-infinity-in-css/

У CSS є константа Infinity. Коли я тільки дізнався про це, до мене в голову відразу спала гора абсурдних ідей, як це використовувати, серед яких була й пара непоганих.

До речі, якщо що, infinity можна використовувати тільки всередині calc(). Ну поїхали!

🚀 Сьогодні вам безкоштовно доступний тренажер з HTML та CSS.

Міжрядкова відстань у CSS. Властивість line-height

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

Значення line-height можна вказувати як абсолютних одиницях (наприклад, px , pt ), і у відносних ( em , % , без одиниці виміру). Рекомендується використовувати відносні одиниці, оскільки вони дозволяють зберегти масштабованість та адаптивність тексту.

• line-height: 1.2; - Відносне значення, що не залежить від розміру шрифту.
• line-height: 20px; - Абсолютне значення, фіксований розмір інтерліньяжу.
• line-height: 1.5em; - Відносне значення, що залежить від розміру шрифту елемента.