Зачем нужен CSS-in-JS
CSS-in-JS — новый подход к стилизации компонентных веб-приложений. Он помогает преодолеть ряд ограничений и проблем традиционных методов работы с CSS.
Посмотрим, какие проблемы есть в традиционном CSS, и как CSS-in-JS их решает.
Проблемы при сложной стилизации
Представим, что нам нужно создать кнопку, которая:
- имеет два стиля, filled с заливкой и outlined с обводкой;
- имеет два размера, medium (средняя) и large (большая);
- представлена в двух цветах, зелёном и оранжевом;
- может не иметь иконки, а может и иметь.
Этот компонент выглядит примерно так:
function Button(props) < const className = classNames('button', < 'm-variant-filled': props.variant === 'filled', 'm-variant-outlined': props.variant === 'outlined', 'm-size-medium': props.size === 'medium', . >); return > ; > То есть как набор классов-модификаторов, логика управления которыми смешана с основной логикой. При более комплексных компонентах это может значительно усложнить работу.
При помощи CSS-in-JS задача решается в более наглядном формате:
const StyledButton = styled.button` border-radius: 4px; cursor: pointer; $ props.variant === 'filled' && css`/* стили для варианта filled */`> $ props.variant === 'outlined' && css`/* стили для варианта outlined */`> $ props.size === 'medium' && css`/* стили для размера medium */`> . $ < // сложная логика формирования стилей, описанная при помощи JS return css`/* стили, которые сложно описать при помощи обычного CSS */`; >> `; function Button(props) < return > > Вся стилизация описана в отдельной сущности — StyledButton . Скругления и курсор есть у всех кнопок без исключений. Остальные стили применяются или не применяются в зависимости от значений пропов, и эта зависимость описана при помощи JavaScript. Основной код компонента (функция Button ) остаётся максимально простым.
Компоненты в современных интерфейсах могут иметь множество параметров и состояний. Часто возможностей CSS недостаточно для реализации подобной логики, и приходится придумывать «велосипеды». А подход CSS-in-JS расширяет CSS при помощи JavaScript и помогает реализовать нетривиальную стилизацию в простом и понятном формате.
�� Изучите CSS-in-JS
Пройдите профессиональный курс и создайте свой сайт, используя популярную комбинацию: React и styled-components.
Неуправляемые глобальные стили
Традиционно все стили приложения работают в едином глобальном пространстве имён, что рано или поздно может приводить к конфликтам. Вы можете возразить и привести в пример всевозможные подходы инкапсуляции стилей, например БЭМ. Да, они работают, но не во всех сценариях.
Представим ситуацию: вы разработали компонент кнопки и стилизовали его при помощи класса .button . CSS-правило с селектором по этому классу работает глобально, все кнопки выглядят хорошо, и ничто не предвещает беды. И тут ваш коллега решил добавить кнопку с другим дизайном и стилизовал её тоже при помощи класса .button . Хорошо, если конфликт стилей обнаружится сразу, но в худшем сценарии все кнопки в проекте могут сломаться.
Подобная проблема может появиться и при подключении сторонней библиотеки компонентов, если кнопки в ней стилизованы при помощи класса .button . Или наоборот, если вы делаете библиотеку компонентов, ваши стили могут конфликтовать со стилями проектов, где используется библиотека.
В CSS-in-JS стили работают на уровне компонентов и тесно связаны с ними при помощи автоматически генерируемых классов. Для демонстрации этой механики отрендерим компонент из примера выше:
render(); В результате выполнения кода получим такой результат:
Стили применяются к компоненту при помощи сгенерированного класса. Такие классы уникальны и не могут дублироваться в вашем или чужом коде, что исключает появление конфликтов в ваших и внешних стилях.
Алгоритм генерации названий классов можно настроить, чтобы сделать их более понятными и описательными.
В нашем примере итоговое CSS-правило с селектором по уникальному классу расположено внутри элемента style на уровне документа. Это самый популярный способ подключения стилей, реализованный во многих инструментах для работы с CSS-in-JS. Но есть и альтернативные решения, о которых мы узнаем ближе к концу курса.
А ещё стили подключаются к документу только при необходимости. Если компонент рендерится, стили есть. Если не рендерится, стилей нет. При удалении кнопки из примера выше CSS-правило пропадает вместе с ней:
То есть CSS-in-JS избавляет от ненужных стилей, что особенно полезно для больших и долгоживущих проектов, которые по мере развития подвергаются повторной стилизации. А ещё он автоматизирует создание критических стилей при серверном рендеринге.
CSS и JS нужно хранить раздельно
Любители Vue.js могут пропустить этот раздел.
Обычно стили компонентов описывают в отдельных файлах. Из-за этого файловая структура проекта становится более громоздкой:
components ├── button │ ├── button.css │ └── button.jsx ├── checkbox │ ├── checkbox.css │ └── checkbox.jsx ├── input │ ├── input.css │ └── input.jsx . Такой подход вынуждает использовать дополнительные инструменты для подключения стилей. Это особенно критично, если вы делаете библиотеку — вашим пользователям придётся каждый раз настраивать одни и те же дополнительные инструменты. Для более удобной работы со стилями также нужны препроцессоры, постпроцессоры и автопрефиксер.
CSS-in-JS позволяет хранить стили рядом с основным кодом компонента в одном файле (хотя можно и в разных) и не требует настройки дополнительных инструментов — всё работает «из коробки». И файловая структура проекта получается более компактной:
components ├── button.jsx ├── checkbox.jsx ├── input.jsx . Вероятно, это основная причина, почему CSS-in-JS называется именно так.
Сравнение CSS и CSS-in-JS
Нетривиальная стилизация реализуется сложно
Нетривиальная стилизация реализуется проще при помощи JS
Стили работаю глобально
Стили работают на уровне конкретных компонентов
Сложно выделить критические стили и избавиться от ненужных
Удаление ненужных и выделение критических стилей работают автоматически
Нет возможности хранить стили и остальной код в одних файлах (как минимум в случае React)
Можно хранить стили рядом с остальным кодом в одних файлах
Для комфортной работы со стилями приходится настраивать ряд дополнительных инструментов
Не нужно настраивать множество дополнительных инструментов для комфортной работы со стилями
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Что такое CSS
25 апреля 2022 CSS (каскадные таблицы стилей) — это язык разметки веб-страниц, который используется для оформления контента и является частью фронтенд-разработки. Благодаря ему сайты выглядят привлекательно и информация легко воспринимается посетителями: текст не выходит за границы и разбит на блоки, каждый элемент имеет свое место, размер, цвет и т. д.
Если говорить простыми словами, то это инструмент, который позволяет создать гармоничную композицию из текстовых, графических и мультимедийных объектов, размещаемых на сайте. В данном материале мы рассмотрим функциональные возможности CSS, принципы его работы и определим разницу между ним и HTML.
Зачем нужен CSS
Страница сайта — веб-документ, содержание и структура которого формируются с помощью разметки HTML. Так определяется наполнение веб-сайта и последовательность размещения элементов. Фактически оформить контент (задать такие свойства, как поля, начертание шрифта, уровень заголовка и т. д.) можно и на языке HTML. Однако в этом случае стили, применяемые на веб-странице, привязываются к конкретному контенту. При внесении изменений в содержание придется заново создавать структуру и дизайн. Поэтому с развитием веб-разработки были придуманы каскадные таблицы стилей, которые представляют собой набор правил форматирования контента. Стиль CSS подключается к HTML-документу. После этого можно редактировать содержимое страницы и при этом оставлять код, отвечающий за визуальную сторону, без изменений.
Задачи, которые решают каскадные таблицы в сайтостроении:
- Ускоряет процесс разработки и делает его проще. Если вам часто приходится создавать однотипные сайты, можно создать шаблонный стиль для автоматической настройки всех веб-страниц.
- Делает редактирование более удобным и легким. При внесении похожих правок в несколько мест в документе, достаточно применить новый стиль к одному из них, чтобы оформление автоматически изменилось во всех аналогичных разделах.
- Упрощает код. В CSS не нужно прописывать параметры для оформления каждого элемента, поэтому количество одинаковых участков кода меньше, чем в HTML. Его проще сканировать поисковым роботам и легче понимать веб-разработчикам.
- Сокращает время повторной загрузки веб-страницы. Часть веб-документа (та, что с CSS) остается в кэше браузера после первой загрузки сайта, поэтому при повторном посещении загружаются только структура и контент.
- Позволяет создавать множество вариантов для оформления сайта. Современные версии каскадных таблиц имеют расширенные функции: анимация отдельных элементов, например, кнопок конверсии, создание иллюстраций и т. д.
- Дает возможность настраивать разные стили в пределах одной страницы.
Таким образом, CSS отвечает не только за привлекательный внешний вид сайта для посетителей, но и за ту его часть, которой занимаются сайтостроители: упрощает работу веб-разработчиков, редакторов, контентщиков и т. д.
Принципы работы CSS
В CSS отсутствуют структурные единицы HTML: элементы, атрибуты и теги. То, с чем мы здесь взаимодействуем, является правилом, определяющим внешний вид того или иного элемента в документе. Суть работы этого языка разметки заключается в том, что CSS находит определенный элемент в HTML-документе (текст), затем определяет для него конкретное свойство (цвет) и задает для него конкретное значение (синий).
Каскадные таблицы используются для настроек стиля, а также для объединения всех элементов в единую композицию. Для того чтобы контент легче усваивался посетителями и объекты не наслаивались друг на друга, задаются параметры высоты, разделения на колонки, размещения элементов на странице и т. д.
Чтобы сайт корректно открывался на экране любого устройства, необходимо соблюдать определенные принципы.
Кроссбраузерность
Если при открытии веб-страницы некоторые элементы сползают или выходят за границы экрана, это может означать потребность во внесении правок в CSS. Перед началом верстки необходимо точно определиться со списком браузеров, под которые нужно адаптировать код.
Лаконичность шаблонов и фреймворков
При переносе стиля CSS в другой проект, который имеет существенные отличия в структуре, могут возникнуть проблемы и придется заново создавать всю разметку. Это может произойти в том случае, если переносимая часть CSS включает тонкие настройки по типу: строго заданное количество колонок меню, его горизонтальная ориентация.
Логичность структуры
Все файлы должны быть правильно названы и рассортированы по папкам. Например при распределении изображений лучше всего располагать их по папкам не по их назначению (иконки, фоны), а по логической взаимосвязи: фотографии из раздела новостей следует отправлять в папку photo/news и называть «bg.png», «li.png», «first-item.png». Такое разделение позволяет легче управлять графическими ресурсами.
Валидность кода
Валидность кода определяет то, как будет открываться сайт в разных браузерах и на различных операционных платформах. Она предполагает, что исходный код страницы будет написан по принятым стандартам. Это обеспечивает корректное отображение сайта на большинстве площадок, однако в некоторых случаях приходится отойти от соблюдения норм. Например, при создании нового браузера код, который был написан для существующих версий, может выполняться с ошибками и потребует оптимизации.
Приоритеты свойств
Разным свойствам в CSS присваиваются разные уровни приоритетности:
- самый высокий — свойства, в конце которых указано !important;
- далее — инлайновые стили, прописанные в теге через атрибут style;
- ниже — стили, заданные в теге style в самом документе;
- самый низкий — стили, подключенные к документу как внешний CSS-файл с использованием тега
- .
Чем отличается CSS от HTML
HTML в переводе с английского означает «язык разметки гипертекста». Он отвечает за структуру сайта и используется для создания и оформления таблиц, текстов, ссылок и т. д. При оформлении страницы без CSS приходится прописывать код, содержащий свойства, для каждого элемента, даже если в документе есть фрагменты, требующие одинаковых настроек. Это увеличивает объем кода, делает его более запутанным. При подключении CSS можно создавать единый стиль для класса объектов, а в коде HTML-страницы прописывать только название класса и форматирование выполнится автоматически. При большом количестве одинакового по типу контента это поможет существенно сэкономить время и объем работы.
Заключение
Подводя итоги, можно сказать, что CSS – это важный инструмент для оформления сайтов, без которого невозможно сделать удобную и красивую веб-страницу, оптимизированную для поисковых систем.
Что такое CSS фреймворки и зачем они нужны.
Что такое CSS фреймворки и зачем они нужны? Давайте попробуем разобраться в этом вопросе.
CSS или каскадные таблицы стилей — мощный инструмент, который позволяет изменять внешний вид вашего сайта. С его помощью вы можете сказать как будет выглядеть тот или иной элемент на веб-сайте. Каким он будет цветом или размером, какие будут отступы и.т.д.
Но, главная проблема с которой придется столкнуться при работе вплотную с технологией CSS, когда вы решите каким-либо образом оформить какой-то элемент на веб-сайте, появляется проблема написания большого количества кода.
Конечно, написание большого количества кода может не представлять для вас большого количества трудностей. Но, когда элементов на веб-сайте становиться много, кода тоже становиться очень много. Писать такое большое количество кода может быть не очень приятно.
Особенно это ощущается когда вы создаете какие-то веб-страницы с нуля, верстаете макет какого-то сайта и размещаете там большое количество элементов, которые должны выглядеть определенным образом. Если писать код CSS с нуля, можно наткнуться на очень большой объем работы.
Для того, чтобы избежать этого большого количества работы и ускорить процесс верстки веб-страниц, были созданы специальные библиотеки или CSS-фреймворки. По сути, CSS-фреймворк — это просто файл CSS, который вы стандартным образом подключаете к вашей веб-странице.
Этот CSS файл просто содержит уже написанный за вас набор стилей, которые вы сможете применять к элементам на вашем веб-сайте, после того, как эта библиотека будет подключена к вашей веб-странице.
После того, как этот файл фреймворка будет подключен к веб-странице, вы можете добавлять к вашим элементам ни какие-то конкретные стили CSS, а просто добавлять классы.
Добавив класс вы говорите каким образом CSS фреймворк должен оформить тот или иной веб-элемент.
Например, добавив класс box вы оформите какой-то блок div как «коробку с рамкой» (см. видео). https://bulma.io
Используя CSS фреймворки вы мыслите уже не каким-то конкретным кодом, а классами, которые можно добавлять к HTML-элементам.
Наиболее популярные CSS фреймворки:
И главное, для чего стоит использовать фреймворки — это экономия времени. Добавить для какого-то элемента определенный класс намного проще, чем если вы напишите десятки строк кода.
Второе преимущество — стандартизация вашего кода. Если вы хотите сделать кнопку, вы уже знаете какой класс вам для нее нужно присвоить. Это не зависит от того с каким сайтов вы работаете. Везде все работает одинаково.
Вот такой удобный и жизненно нужный инструмент, который я рекомендую вам внедрить в свою практику работы в веб-разработке. Для того, чтобы ускорить вашу работу и сделать ее более приятной.
Дмитрий Ченгаев ��
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2020-12-06
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Автор: Валентин Пыркин 11/09/2022 05:09:22
CSS фреймворки это зло и не оптимизированный хлам, забыли добавить. Используя БЭМ к примеру можно писать лаконичный читаемый html. Но когда начинается использование даже того bootstrap, tailwind и прочий хлам, начинаются проблемы и строки кода растут во много раз. Что бы описать фреймворком css стиль блока, нужно ввалить даже и 10 классов с фреймворком или один класс может с модификатором если не использовать css Фреймворк
Автор: Дмитрий Ченгаев 11/09/2022 05:09:32
Согласен с Вами, Валентин. Тоже пришел к такому мнению )
Но, иногда бывает полезно, когда нужно что-то быстро развернуть.
Что такое CSS-модули и зачем они нам?
В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи он решает и каковы причины его возникновения. Если вы тоже заинтриговались — не переключайтесь, следующая статья будет о том, как начать их применять. А если вас интересует внедрение в проект или более продвинутое использование CSS-модулей, третья статья в этой серии будет о том, как использовать их c React.
Серия статей
Часть 1: Что такое CSS-модули и зачем они нам? (Вы её читаете!)
Что такое CSS-модули?
Согласно определению из репозитория, CSS-модули — это:
CSS-файлы, в которых все классы и анимации по умолчанию находятся в локальной области видимости.
CSS-модули — это не официальная спецификация, они не имплементированы в браузеры, скорее, это задача, запускаемая на стадии сборки проекта (например, с помощью Webpack или Browserify), в процессе выполнения которой имена классов и селекторы изменяются так, чтобы образовалась своего рода локальная область видимости (что-то вроде пространства имен).
Как это выглядит и зачем нам это? Сейчас расскажу. Во-первых, вспомните как обычно работают HTML и CSS. Класс прописывается в HTML:
h1 class="title">Пример заголовка h1> И стилизуется в CSS:
.title < background-color: red; > Пока CSS применяется к HTML-документу, фон будет красным. Нам не нужно как-то обрабатывать CSS или HTML, оба формата понятны браузеру.
CSS-модули используют другой подход. Вместо того, чтобы писать обычный HTML, нам придётся написать разметку в JavaScript-файле, например, в index.js . Вот как это может выглядеть (ниже мы рассмотрим более реальные примеры):
import styles from "./styles.css"; element.innerHTML = `$ "> Пример заголовка `
; В процессе сборки компилятор проанализирует styles.css , который мы импортировали, потом проанализирует JavaScript и сделает класс .title доступным через styles.title . Затем сгенерирует на их основе новые HTML и CSS-файлы, уже с новыми классами.
Сгенерированный HTML может выглядеть следующим образом:
h1 class="_styles__title_309571057"> Пример заголовка h1> А вот так может выглядеть CSS:
._styles__title_309571057 < background-color: red; > 
Значение атрибута class и селектор .title заменены на новые. Исходный CSS в браузер вообще не попадает.
Как сказал Хьюго Жироде́ль (Hugo Giraduel) в своей статье по этому поводу:
[классы] генерируются автоматически, они уникальны и привязаны к исходным стилям.
Вот это и называется поместить стили в локальную область видимости. Они находятся в области видимости определенного шаблона. Если у нас есть файл buttons.css , он будет импортирован только в шаблон buttons.js , и класс .btn , который он содержит, будет недоступен для других шаблонов (например, forms.js ), пока мы не импортируем его и туда тоже.
Зачем нам устраивать всю эту канитель с CSS и HTML? Зачем нам это вообще сдалось, ради всего святого?!
Зачем нам нужно использовать CSS-модули?
CSS-модули гарантируют, что все стили одного компонента:
- Находятся в одном месте
- Применяются только к этому компоненту и никакому другому
Кроме того, каждый компонент может иметь настоящие зависимости, например:
import buttons from "./buttons.css"; import padding from "./padding.css"; element.innerHTML = `$ $ ">`; Этот подход был разработан, что бы решить проблему глобальной области видимости в CSS
Вы когда-нибудь испытывали соблазн в условиях нехватки времени или ресурсов просто писать CSS так быстро, как можете, не думая о последствиях?
Пихали ли в конец таблицы стилей какой-нибудь мусор, собираясь потом его отрефакторить, и так никогда этого и не сделали?
Бывало ли такое, что вы просматривали стили, не до конца понимая что они делают и используются ли они вообще?
Задумывались ли вы, получится ли избавиться от некоторых стилей, ничего при этом не сломав? Не приходилось ли гадать, эти стили работают сами по себе или зависят от других? Случалось ли вам перезаписывать стили?
Это вопросы, которые могут привести к серьезной головной боли, пропущенным дедлайнам и грустным взглядам в окно.
С CSS-модулями и концепцией использования локальной области видимости по умолчанию таких проблем можно избежать. Вам всегда приходится думать о последствиях, когда вы пишите стили.
Например, если вы используете в HTML класс random-gross-class , не обработав его как класс CSS-модуля, стили не применятся, так как CSS-селектор превратится во что-то вроде ._style_random-gross-class_0038089 .
Ключевое слово composes
Допустим, у нас есть модуль под названием type.css , содержащий стили для текста. В этом файле может быть, например, такое:
.serif-font < font-family: Georgia, serif; > .display < composes: serif-font; font-size: 30px; line-height: 35px; > Один из этих классов мы используем в шаблоне:
import type from "./type.css"; element.innerHTML = `$ "> Пример заголовка `
; В результате получится такая разметка:
h1 class="_type__display_0980340 _type__serif_404840"> Пример заголовка h1> Оба класса связаны с элементом через использование ключевого слова composes , решая таким образом некоторые проблемы, которые есть в похожих решениях, например в @extend Sass.
Так можно даже подставлять данные из отдельного CSS-файла:
.element < composes: dark-red from "./colors.css"; font-size: 30px; line-height: 1.2; > БЭМ не нужен
Нам не нужен БЭМ, если мы используем CSS-модули. По двум причинам:
- Простота чтения. Код вроде type.display так же понятен для разработчика, как и .font-size__serif—large из БЭМ. Его даже проще читать, чем разросшиеся БЭМ-селекторы.
- Локальная область видимости. Допустим, в одном из модулей у нас есть класс .big и он увеличивает font-size на некоторую величину. В другом модуле у нас есть точно такой же класс .big , который увеличивает padding и font-size на другую величину. И это не имеет никакого значения! Они не будут конфликтовать, так как у стилей различаются области видимости. Даже если модуль импортирует обе таблицы стилей, у классов будет своё уникальное имя, созданное в процессе сборки специально для них. Другими словами, при использовании CSS-модулей проблемы специфичности селекторов просто исчезают.
И это только некоторые из достоинств использования CSS-модулей.
Если вам интересно узнать больше, Глен Маден (Glen Madden) много пишет на эту тему.
В следующей статье из этой серии мы рассмотрим как поднять проект используя Webpack и CSS-модули. Мы будем использовать для этого новейшие возможности ES2015 и рассмотрим в процессе несколько примеров, чтобы в полной мере разобраться в происходящем.
Материалы для дальнейшего изучения
- CSS-модули: Добро пожаловать в будущее
- Руководство по CSS-модулям Хьюго Жирауделя (Hugo Giraudel) на Sitepoint
- Разбираемся с модулями в ES6
- Учим ES2015
- Знакомимся с синтаксисом модулей ES6