Инкапсулированный CSS - это термин, который я использую для обобщения правил того, как применять мои стили CSS в составной форме. Он основан на принципе программирования инкапсуляции. Вот моя лучшая попытка определить инкапсуляцию независимым от языка способом: инкапсуляция включает в себя группировку связанных вещей и ограничение доступа к этим вещам, кроме как через соответствующие каналы.
Например, многие языки программирования используют модульную систему, которая следует принципам инкапсуляции.
import React from “react”;
Когда вы импортируете такой модуль, как React
, вы получаете группу функций, которые помогают создавать приложения React, но у вас нет доступа к внутренним компонентам, которые заставляют приложения React работать.
Инкапсулированный CSS основан на том же принципе. Это методика, которая помогает вам группировать связанные стили на правильном уровне компонентов и применять стили только через соответствующие каналы.
Два принципа инкапсулированного CSS
Есть два основных принципа инкапсулированного CSS:
Первый принцип: «Компоненты не размещаются сами по себе». Когда я говорю, что компоненты не размещаются, я конкретно говорю о положении, размере и марже компонента.
/* Not ok to set on the component */ display: inline; width: 100px; margin-top: 2rem; position: relative;
Второй принцип: «Компоненты создают сами себя и размещают только своих непосредственных дочерних элементов». Свойства, включающие рамку-рамку и внутреннюю часть, считаются частью компонента и должны применяться на этом уровне. Это также включает среду макета непосредственных дочерних элементов компонента.
/* Ok to set on the component */ border: 1px solid #08228c; color: #4c6ef5; padding: 3rem; font-family: sans-serif;
Использование подходящих каналов
Если компонент не должен устанавливать свои собственные свойства макета, как их установить? Я упоминал ранее, что инкапсуляция позволяет вам получать доступ к свойствам через соответствующие каналы. Этими соответствующими каналами в компонентах являются props
и прямой дочерний комбинатор.
В React мы используем props
в качестве входных данных для нашего компонента, так же, как функции используют аргументы. Так же, как мы можем предоставить label
или onClick
опору, мы можем предоставить свойства макета, такие как margin-top
или min-width
:
export const Component = (props) => ( <div style={{ minWidth: props.minWidth }}> {/* Component content goes here */} </div> );
Такое использование props хорошо работает с одним или двумя свойствами, но очень быстро становится громоздким по мере того, как вы открываете все больше и больше свойств. Свойства вашего компонента также должны отражать то, что делает ваш компонент. Наличие произвольного marginLeft
пропа не имеет смысла для компонента календаря.
Другой канал для добавления стилей - использование прямого дочернего комбинатора в родительском компоненте.
.parent > * { margin: 1rem; }
Этот инструмент позволяет нам выбрать любого или всех непосредственных дочерних элементов и применить нужный стиль макета.
Компонент сообщений в блоге
Возьмем следующий компонент "Сообщение в блоге":
Применяя стили, которые следуют принципам Encapsulated CSS, мы могли бы сделать что-то вроде этого:
В приведенной выше таблице стилей классы .blog-post и .blog-title устанавливают свои собственные стили. Когда нам нужно было установить свойства макета, мы использовали прямой дочерний комбинатор, чтобы выбрать соответствующие дочерние элементы .blog-post, чтобы установить эти свойства.
В этот момент можно начать спрашивать, зачем проводить эту церемонию добавления отдельного правила для прямых потомков, просто чтобы добавить свойство макета?
Прежде всего, поскольку мы не добавляли никаких свойств макета в .blog-post, этот компонент записи блога можно безопасно разместить в любом контексте и не мешать среде макета, в которую он помещается. Потомки теперь также могут быть при необходимости реорганизован в компоненты и не принесет с собой багажа среды макета, в которой он был изначально создан.
Это также помогает при отладке. Одна из самых значительных трудностей при отладке CSS - это определение того, откуда берутся ваши стили. Стили легче отследить, если у вас есть правила, в которых исходят эти свойства стиля.
В конечном счете, инкапсулированный CSS - это создание разумных ограничений. Следуя этим правилам, ваши компоненты станет намного проще поддерживать и компоновать в любом месте вашего приложения.