Frontender's notes [ru]

⬆️ Scoped styles в HTML: компоненты с локальными стилями

Атрибут scoped для <style> позволяет писать стили которые применяются только внутри компонента. Это альтернатива сложным подходам с shadow DOM или неймингами классов для предотвращения конфликтов. Избавляет от необходимости писать универсальные классы или подключать сложные сторонние библиотеки для изоляции стилей.

ℹ️ Пример кода:

<div class="card">
<style scoped>
p { color: red; }
</style>
</div>

✅ Объяснение кода

— Мы добавляем элемент <style scoped> внутри компонента div с классом card

— Все стили, написанные внутри этого блока, будут применяться только к элементам внутри компонента, не затрагивая глобальные стили

— В примере, стиль color: red; применяется только к абзацу <p>, который находится внутри данного компонента card

📌 Я не часто использую scoped styles в своей работе (почти никогда) но в редких случаях это позволяло мне решить задачи более чисто.

🚪 Frontender's notes

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10❤5😁2

www.tgoop.com/frontendnoteschannel_ru/5220

4.23K viewsOct 4 at 07:37

⬆️ Scoped styles в HTML: компоненты с локальными стилями

Атрибут scoped для <style> позволяет писать стили которые применяются только внутри компонента. Это альтернатива сложным подходам с shadow DOM или неймингами классов для предотвращения конфликтов. Избавляет от необходимости писать универсальные классы или подключать сложные сторонние библиотеки для изоляции стилей.

ℹ️ Пример кода:

<div class="card">
<style scoped>
p { color: red; }
</style>
</div>

— Мы добавляем элемент <style scoped> внутри компонента div с классом card

— Все стили, написанные внутри этого блока, будут применяться только к элементам внутри компонента, не затрагивая глобальные стили

— В примере, стиль color: red; применяется только к абзацу <p>, который находится внутри данного компонента card