Вызов всех не фанатов CSS! Я считаю, что стиль - самая сложная часть веб-разработки. Я люблю строить функции и ценю логику подключения передней и задней частей. Но независимо от функциональности никого не впечатляет сайт, который выглядит так:
Я понимаю понятие «каскадных» таблиц стилей и то, как они должны работать. Но по мере того, как мои проекты становятся больше, мне становится все труднее организовывать мои файлы стилей. Большую часть времени я запутываюсь в сети CSS, не решаюсь что-то менять и непреднамеренно ломаюсь и отбрасываю стили где-нибудь в другом месте моего проекта.
Cue: компоненты в стиле React. Эта библиотека позволяет разделить ваш CSS на части, создав компоненты модульного стиля. CSS для одного компонента полностью изолирован от другого в собственной изолированной программной среде для стилизации. Это позволяет легко играть с различными компонентами или разделами вашей страницы, не беспокоясь о непредвиденных побочных эффектах. Начать очень просто:
npm install --save styled-components
Мне нравится организовывать свои компоненты / контейнеры по папкам вместе с файлом стиля для каждого. Файл стиля (очевидно) будет содержать стилизованные компоненты.
Вы, конечно, можете добавить свои стили в тот же файл, что и JSX компонента, но я считаю полезным разделить проблемы.
Я начну с необычайно простого JSX, чтобы показать вам, как это делается. Вместо того, чтобы использовать традиционный JSX для обертывания текста / изображения / ввода, вы замените JSX предварительно стилизованными компонентами, заключенными в имя переменной.
Скажем, я хотел создать компонент, который просто возвращал бы h1 с синим текстом. Вместо того, чтобы заключать свой текст в ‹h1›, я определяю переменную под названием «Заголовок», которой я назначу ‹h1›. Я объявляю свойства CSS как обычные в этой переменной компонента Header, а затем помещаю свой текст в этот компонент следующим образом:
Позаботьтесь о том, чтобы импортировать и экспортировать свои файлы соответствующим образом, так же, как вы бы поступили с любым компонентом реакции. Результатом приведенного выше кода является синий тег ‹h1›, как и ожидалось. Прелесть в том, что теперь мы разделили стиль для этого конкретного тега.
Здесь я добавил еще немного кода. Вы можете видеть, что у меня было два предложения, заключенных в теги ‹p›, которые я хотел использовать в разных стилях. Я создал два разных компонента и стилизовал их совершенно по-разному.
Одно важное правило (на которое у меня ушло много времени) - как и в случае с обычными компонентами React, имена переменных для стилизованных компонентов должны быть с заглавной буквы.
Вы можете вкладывать дополнительные стили внутрь стилизованного компонента, как если бы вы это делали с ванильным CSS.
Обратите внимание, как я смог настроить таргетинг на различные элементы в компоненте ‹Coding›. Стили, перечисленные внизу (цвет и размер шрифта), будут применяться ко всему компоненту, если только элемент не имеет более конкретного стиля. Я полностью понимаю, что код и стили здесь глупые, но я уверен, что вы можете представить себе полезность возможности изолировать стили таким образом.
Это основы - это действительно так просто! Стилизованные компоненты не сделают вас мастером CSS (к сожалению), однако их модульность должна сделать ваш следующий проект немного более управляемым.
Посетите https://styled-components.com/docs для получения дополнительной информации! (Но это не могло быть проще - просто делай то, что я тебе сказал 🤪).
