Стан CSS в Angular

Застосування для створення стилів є важливою частиною для користувачів. Ми маємо каскадні таблиці стилів (CSS), як потужний стандарт для розробників, щоб визначити зовнішній вигляд програми окремо від його конструкції.

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

Глобальний CSS – спосіб, яким ви користуєтеся

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

Компоненти Angular можна створити за допомогою глобальної CSS так само, як і будь-який інший елемент у вашій програмі. Просто перетягніть елемент <link> на свою сторінку (зазвичай в index.html), і вам добре йти! Тим не менш, Angular додатково дає розробникам більше можливостей для обчислення ваших стилів.

Компонентний CSS

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

Ми всі були в ситуації, коли, здавалося б, незручні зміни, такі як переміщення компонентів в інше місце, викликали несподіваний каскад змін. Це може статися, коли стилі, що недостатньо обґрунтовані, повністю скидають макет сторінки. Щоб уникнути подібних вражень, Angular буде застосовувати стилі компонента таким чином, що вони застосовуватимуться лише у шаблоні цього компонента.

Три режими інкапсуляції компонентів

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

Ми також підтримуємо Native режим, який використовуватиме Shadow DOM для створення додаткових контекстів і запобігання витікання стилів з різних компонентів. Це буде працювати в будь-яких браузерах з підтримкою Shadow DOM v1. Рідний режим створює корінь тіні під кожним компонентом, що повністю ізолює компонент, навіть від стилів, визначених у глобальному масштабі (глобальні стилі DO проникають компоненти з імульованим представленням інкапсуляції).

Третя і остання інкапсуляція, яку ви можете вибрати, – ” Ні” , тобто всі ваші CSS закінчуються в глобальному масштабі. Ви можете використовувати це, якщо ви хочете повністю відмовитися від інкапсуляції стилю Angular.

Дізнайтеся більше про компонентний CSS

Глибокий CSS

Але що, якщо я хотів об’єднати ці два світи? Я хочу написати компонентний CSS, який впливає на сам компонент, а також на будь-які діти, які я вклав всередину.

Angular та браузери історично пропонують те, що зазвичай називають глибоким селектором. Це також відомо декількома іншими іменами, у тому числі >>>, /deep/, або більш офіційним комбінатором послідовності Shadow-Pieriring.

Глибокий Селектор виник як зусилля команди Blink. Це дозволило розробникам додавати стиль через тіньові коріння. Врешті-решт, він не підтримував стандартизацію, продуктивність і очікування розробників.
Перед виходом Angular версії 4.3 зміни в таких інструментах, як SASS та інші оголошення, означають, що наша існуюча інтерпретація /deep/ створює конфлікти. Щоб дати розробникам тимчасову відмову від цих зовнішніх змін, ми створили ::ng-deep, що досягає такої ж функціональності.

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

Існує хороше висвітлення ::ng-deep та історія цієї функції в статті Dor Moshe .

Але я хочу цю функціональність!

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

• Використання спеціальних властивостей (AKA CSS Variables) – хоча ще немає повної підтримки браузера для користувацьких властивостей, впровадження браузера цих можливостей дасть розробникам найкраще поєднання ізоляції та гнучкості. Властиві властивості, по суті, дозволяють авторам компонентів визначати поверхню API для стилів їхніх компонентів; Вони дозволяють розробникам вирішувати, що слід стилювати ззовні, і що потрібно зберігати послідовно.
• Використовуйте аркуші стилів глобального масштабу та емульовану інкапсуляцію.  Використовуючи традиційну CSS, ви можете посилатися на компоненти за назвою як частину CSS-селекторів, які призведуть до застосування стилів, як вони завжди існують, включаючи проколювання до дочірніх компонентів, припускаючи, що ви використовуєте нашу емуляцію (За замовчуванням) переглянути інкапсуляцію на компоненти.
• Використовуйте ::ng-deep  – якщо вам це потрібно сьогодні, використовуйте ::ng-deep. Це не повинно суперечити будь-яким інструментам стороннього розробника або розробці нових веб-переглядачів. Ми зобов’язуємося без збереження ::ng-deep навколо до підходу стандартів на основі досягла загальногалузевий підтримки.

Колективний відгук дуже важливий для нас. Ми вирішили підтримувати підтримку ::ng-deep, доки користувацькі властивості не зможуть досягти ширшого прийняття, впровадження та перевірки від розробників. Ми це частково завдяки відгукам та вкладам нашої громади. Дякую за вашу постійну підтримку та відгуки, оскільки ми продовжуємо робити Angular краще та краще.

Переклад статті “The State of CSS in Angular“