Инкапсулированный 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 - это создание разумных ограничений. Следуя этим правилам, ваши компоненты станет намного проще поддерживать и компоновать в любом месте вашего приложения.