Почему не стоит использовать в JavaScript CSS особенности работы со стилизованными компонентами

Содержание материала:

Поддержание чистоты CSS в JS с помощью Stylelint

01.07.2020 Комментарии к записи Поддержание чистоты CSS в JS с помощью Stylelint отключены 99 Просмотров

От автора: мне нравится CSS в JS. Я использую его все время на работе и в личных проектах. Мне нравится, как он создает крутые темы и динамические стили. Но одна вещь, которой мне не хватает из обычного CSS — это линтинг.

Stylelint для CSS — это фантастический проект, который позволяет легко применять соглашения и избегать ошибок в стилях. Однако до недавнего времени я никогда не использовал его с CSS в JS. В выпуске версии 9.5.0 была добавлена поддержка первого класса для написания CSS в JS. Теперь выполнять линтинг в стиле популярных библиотек, таких как styleled-components и emotion, стало проще, чем когда-либо.

Остальная часть этой статьи будет посвящена emotion, но процесс линтинга styled-components практически идентичен.

Линтинг CSS

Давайте начнем с создания нового приложения React. Для этого мы можем использовать create-react-app.

Далее мы добавим некоторые зависимости. Мы можем начать с добавления emotion.

Это устанавливает две зависимости emotion. С помощью emotion мы можем стилизовать компоненты двумя разными способами. Чтобы убедиться, что линтинг работает должным образом, нам нужно начать с создания и стилизации компонентов.

Стилизация компонентов с помощью свойства CSS

Используя свойство css, мы можем передать либо стили объекта, либо стили строки.

В этом примере кода мы создали компонент футера. Мы стилизовали тег футера с помощью стилей объектов, а тег абзаца — с помощью строковых стилей. Для получения дополнительной информации, ознакомьтесь с документацией emotion.

Использование стилизованных компонентов

Используя styled, мы можем передавать стили в HTML-теги.

В этом примере кода мы создали компонент заголовка и применили его к стилю prop.

Использование stylelint

Теперь, когда мы разработали некоторые компоненты, давайте займемся линтингом!

Затем создайте файл с именем .stylelintrc.

Затем мы добавляем скрипт npm в package.json.

После этого мы можем запустить скрипт, и получим следующий вывод

Как видите, мы получаем несколько ошибок. Это связано с тем, что stylelint-config-standard оптимизирован для простого старого CSS. Давайте добавим несколько переопределений правил в файл .stylelintrc.

Теперь мы можем запустить yarn lint:css и получаем следующий вывод.

Упс! Похоже, мы написали плохой CSS. Хорошо, что Stylelint помог нам. Как вы видите, stylelint обнаружил, что наши ошибки были в компонентах, стилизованных как с помощью css, так и с помощью styled. Довольно круто!

Использование jest со stylelint

Jest — отличный способ запуска тестов, так почему бы не использовать его и для линтинга? Начните с установки некоторых зависимостей.

Далее создайте jest.stylelint.config.js.

Затем мы обновляем команду lint:css:

После этого мы снова запускаем lint:css.

В чем дело? Похоже, jest-runner-stylelint использует версию stylelint 8.3.1. Поддержка CSS в JS была добавлена в stylelint позже.

Давайте укажем jest-runner-stylelint использовать последнюю версию stylelint. Просто добавьте поле resolutions в package.json:

Затем снова запустите yarn, чтобы переустановить зависимости, и выполните yarn lint:css. На этот раз мы получаем тот же результат, что и раньше:

Теперь все, что нам осталось сделать, это исправить ошибки в этих модулях, и мы готовы к работе. Посмотрите репозиторий на GitHub.

Автор: Malcolm Laing

Редакция: Команда webformyself.

Google PageSpeed Insights: «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы»

В этой статье я расскажу, что означает рекомендация удалить блокирующие скрипты и стили и как её выполнить.

Это одна из наиболее распространенных проблем, которую я встречаю, анализируя веб-сайты. Решение данной задачи — один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний.

Хочу обратить внимание – каждый сайт индивидуален. И если для одного сайта некоторые решения будут полезны, то для другого могут оказать негативное влияние.

Суть проблемы

Данное предупреждение срабатывает, когда в коде документа между тегами … обнаружены ссылки на внешние файлы javascript и css. И пока они не будут загружены, дальнейший рендеринг страницы не будет выполняться. Таким образом они блокируют вывод контента на странице.

Как удалить JavaScript, препятствующий отображению верхней части страницы

Большинство рекомендаций в Интернете сводятся к тому, чтобы перенести все скрипты в подвал сайта. Однако не стоит слепо выполнять эту рекомендацию — есть большая вероятность того, что функционал сайта будет нарушен:

    Для начала мы должны убедиться, что JavaScript не участвует в процессе отображения страницы. Скрипты небольшого размера размещаем в самом содержимом HTML страницы. Например: Проверяем скрипты на зависимости и очередность загрузки. Если ни того, ни другого не имеется, то добавляем к ним атрибут «async»:
  • Благодаря этому атрибуту такие скрипты будут загружаться асинхронно.

Данную инструкцию нельзя применять к библиотеке JQuery, которая используется в подавляющем большинстве сайтов. Далее рассмотрим правильное решение для JQuery.

Проблема со стилизованными компонентами в «обычном» одностраничном приложении

В настоящее время я работаю над старым проектом, который имеет свой «собственный способ» создания одностраничного приложения (вызывает ли Ajax приложение MVC, получает представление, заменяет вид на стороне клиента, добавляет стили и партии из другого материала !!), и хотя это не идеально, в настоящее время я застрял с ним!

Я пытаюсь интегрировать существующее приложение React на этот сайт, и что я делаю, это использовать , а затем create-react-app для создания пакетов, а в приложении в начале представления, возвращаемом с сервера для конкретной страницы, я помещаю build и script , указывая на мои файлы пакетов. Стоит отметить, что это представление сервера представляет собой частичное представление ASP.NET MVC, поэтому теги link и script как-то являются частью link .

Я также использую стилизованные компоненты в приложении React.

Теперь вот в чем проблема: при первой загрузке страницы, о которой я упоминал, загружается мой body и я вижу, что все мои компоненты оформлены правильно, но когда я перемещаюсь в существующем пользовательском приложении SPA, в какой-то момент стили, связанные с script , перепутаны, и единственный способ вернуть их — это перезагрузите страницу.

Я просматривал страницу, и я увидел, что styled-components делает вещи с пользовательским styled-components , созданным в link , и я вижу, что атрибут head заполняется пользовательскими именами классов при загрузке моих компонентов, но когда возникает проблема, в средствах разработчика Chrome я вижу, что тег data-styled-components мигает как если он изменен, но он остается тем же.

Я прикрепил GIF тега: — Он начинается с начальной страницы e load — я перемещаюсь и возвращаюсь, и я вижу добавление дополнительных классов. Повторяю шаг, и я вижу только, что он мигает.

Я знаю, что сообщение уже длинное, но любая помощь глубоко оценена , Возможно ли, что с текущей инфраструктурой это связано с тем, что всякий раз, когда я возвращаюсь на страницу, тег link отправляется с сервера, указывая на мой пакет React?

Топ-пост этого месяца:  NativeScript Vue примеры взаимодействия фреймворков с помощью плагина

Почему не стоит использовать в JavaScript CSS: особенности работы со стилизованными компонентами

4949 просмотра

3 ответа

991 Репутация автора

Я выяснил, как лучше всего оформить вашу страницу в приложении React. Я вижу множество библиотек, на которые можно реагировать, например Styled Components, Glamour, CSS Modules.

В моем текущем проекте я использую модули CSS (главным образом, чтобы избавиться от конфликтов CSS и CSS, специфичных для страниц). Я много гуглил о том, почему я должен использовать стилизованные компоненты и CSS-in-JS, но не смог получить никакого конкретного ответа. Поэтому мой вопрос заключается в том, что если есть реальная выгода от использования CSS-in-JS или стилизованных компонентов, или это просто синтаксический сахар.

Ответы (3)

плюса

511 Репутация автора

Может использовать обычные атрибуты HTML, вы можете смешивать в JS, если хотите, он поддерживает состояния, вложенность и медиа-запросы. И нет, все это в конечном итоге не будет в стиле = «», но создаст «настоящий» атрибут >

Он даже позволяет стилизовать пользовательские компоненты (не только HTML), если они принимают только className в качестве prop, поэтому:

const CustomButton = styled (Button) display: inline-block; padding: 5px; const Item = () => Нажмите меня!

Хотя это также имеет недостатки, как и другие технологии. Главное, чтобы обмен кодами между несколькими проектами мог стать очень сложным

Если ваш приоритет — скорость, гламурные или стильные компоненты — это именно то, что вы могли бы использовать в своих веб-приложениях. Написание стилей в строках для стилевых компонентов может быть чем-то необычным, но посетители оценят быстро загруженную веб-страницу. Если вы решили использовать styled-components, не забудьте установить плагин для поддержки подсветки синтаксиса в строках или, возможно, помочь в создании нового.

Sass / css и встроенные стили также работают довольно быстро, но если вы решите повторно использовать свой код для своего приложения React Native, будьте готовы переписать ваши таблицы стилей. Но с другой стороны, CSS и другие препроцессоры стиля являются хорошим выбором для веб-приложений.

9 плюса

13691 Репутация автора

У меня есть опыт работы с обеими технологиями, я использовал Radium (еще один CSS в библиотеке JS) и в настоящее время использую модули CSS в своих проектах. Стилизованные компоненты определенно намного лучше, чем Radium, потому что они позволяют вам стилизовать: состояния при наведении и т. Д. Но, на мой взгляд, CSS-модули по-прежнему являются лучшим выбором, особенно если вы видите, что ваш проект будет расти больше, чем на 10-50 компонентов. Совместное использование кода через CSS в библиотеках JS — это кошмар. С другой стороны, модули CSS позволяют создавать другие классы, импортировать переменные из других файлов CSS и даже JS может импортировать переменные из CSS.

3 плюса

311 Репутация автора

Одна из причин, по которой я люблю стилизованные компоненты больше, чем любой другой способ написания CSS в экосистеме на основе React, заключается в том, что она применяет лучшие практики. Когда кто-то писал, что совместное использование кода при использовании стилизованных компонентов — это кошмар, и я не могу согласиться с этим и с этим возникает вопрос принудительной реализации. Если вы не пишете действительно модульные компоненты, именно так должна быть разработана иерархия компонентов React ( атомарные компоненты, составленные для создания функционально богатых модулей), вы наверняка собираетесь переписывать подобные стили много раз. Но если вы можете разбивать и компоновать свои компоненты действительно восходящим образом, используя стилизованные компоненты (или даже встроенные стили, если вы предпочитаете так), совместное использование кода больше не является проблемой. Дальнейшее совместное использование кода не должно быть проблемой, обсуждаемой на уровне стиля, совместное использование инкапсуляций должно быть компонентом уровня компонента в большинстве случаев. Модули CSS, на мой взгляд, являются простым инструментом ограничения области действия className, тогда как стилизованные компоненты обеспечивают более декларативный подход к стилизации в проектах на основе React.

Обращаясь к одному из минусов, который я не смог обернуть вокруг себя, — это разновидность вложенной структуры компонентов, к которой приводят стилизованные компоненты. Я пытался оставаться более семантически осведомленным, называя свои компоненты стиля, но я уверен, что мог бы быть другой способ сделать что-то с этим. Я сам не нахожу в этом большую проблему и, следовательно, не приложил к этому особых усилий.

Стилизованные компоненты, вероятно, будут несколько менее производительными, чем модули CSS, потому что при создании компонентов для стилизации и их рендеринга, безусловно, возникают накладные расходы, но это будет незначительной разницей.

изменение стиля css при помощи javascript [закрыт]

Создать класс(компонент) лампа, которая состоит из выключателя и самой лампы, при клике на кнопку лампа вкл/выкл

получаеться поменять только цвет бекграунда самой страницы

Закрыт по причине того, что непонятна суть вопроса участниками Igor, Stepan Kasyanenko, overthesanity, andreymal, 0xdb 9 фев в 0:35 .

Постарайтесь писать более развёрнутые вопросы. Для получения ответа поясните, в чём именно вы видите проблему, как её воспроизвести, что вы хотите получить в результате и т. д. Приведите пример, наглядно демонстрирующий проблему. Если вопрос можно переформулировать согласно правилам, изложенным в справке, отредактируйте его.

4 ответа 4

Реализовано при помощи Jquery. Логика такова:

  • На div вешаем событие click ;
  • По умолчанию кнопка выключена (кнопке с классом btn установлен класс off );
  • По умолчанию лампочка выключена (лампочке с классом lamoa установлен класс white );
  • По клику на кнопку лампочка включается (кнопке btn добавляем класс on , а лампе lampa класс yellow ;
  • По повторному клику возвращаем дефолтные значения по тому же принципу.

H Изоляция css стилей с помощью компонентного подхода в черновиках

Каждый раз, когда приходится создавать какой-то элемент, возникает небольшая проблема с придумыванием имени класса элемента, потому что мы хотим назвать его понятным именем, отражающим смысл и назначение этого элемента. Также, должны учесть то, что имя css-селектора не должно пересекаться с другими стилями.

Для того чтобы победить эту проблему, были разработаны разные методологии организации кода в css, но не все фронтендеры пользуются этими методологиям, и не все они идеальны.

Когда у нас в макете много разных по оформлению блоков, которые несут в себе один смысл, использовать понятное имя становится сложно. Чтобы добиться нужного результата приходится добавлять к имени еще что-то. Это все может сделать код трудным для восприятия (как длиннющие названия классов в беме).

Если вам посчастливилось присоединится к разработке какого-то проекта, то, возможно вы сталкивались с такой ситуацией когда стили написанные вами, пересекаются с теми, которые уже есть и используются в проекте. Самое неприятное, что это может всплыть не сразу, а когда всплывает, не всегда понятно откуда ноги растут.

Важную роль во всем этом играет еще то, как организована структура проекта. Чаще всего можно встретить свалку файлов в каталоге css(и не только там), тому кто пришел в проект бывает совсем не очевидно, в каком файле лежит нужный стиль и как стили одного файла влияют на стили другого файла. Хотелось бы верить, что когда все браузеры научатся понимать стандарты web components, проектов с помойной структурой станет меньше, и эти проблемы исчезнут.

Не смотря на то, что пока браузеры не всё умеют, много чего уже реализовано в компонентом стиле с помощью разных библиотек и полифилов, и это отлично работает, причем давно! Но бывают задачи, в которых использование мощных фреймворков и библиотек просто не нужно. К таким задачам можно отнести создание шаблонов под всякие вордпрессы, опенкарты, битриксы и прочие движки.

Как делают другие?

Чтобы решить проблему изоляции стилей, нам необходимо посмотреть, каким образом достигают этого современные фреймворки и библиотеки.

Для популярнейшей библиотеки от синей социальной сети, разрабатываются различные решения, которые последнее время, одно ужаснее другого (возможно я ошибаюсь и не до конца понимаю мощь этих решений).

Докатились до того, что, в js запихнули не только html, но стали писать еще и css, ломая устоявшиеся стереотипы, что так делать плохо. И тут можно сказать, что мы возвращаемся к тому с чего начали, свалка из структуры проекта перекочевала в код компонента.

Топ-пост этого месяца:  Какие существуют в CSS эффекты и техники для дизайна Knockout применение необходимых свойств

Мне нравится как подошли к этому вопросу разработчики Angular. Каждый компонент изолирован, стили внутри компонента никогда не пересекутся со стилями другого компонента, даже если они будут иметь одинаковое имя класса. Это достигается путем добавления уникального рандомного атрибута к каждому тегу элемента. Этот же атрибут добавляется к каждому классу в css. Чтобы не пугать тех, кто не знаком с Angular, добавлю, что исходный код компонента html и css является “чистым”, уникальные атрибуты добавляются при сборке приложения. Все файлы лежат отдельно друг от друга.

Пару слов про новый велик

Для того чтобы такой подход можно было использовать в своих проектах, я решил написать плагин для gulp, который делает, примерно тоже самое, что Angular со стилями и html разметкой. Таким образом мы сможем реализовать инкапсуляцию стилей внутри компонента, при этом, нам ничего не помешает использовать глобальные стили, так как атрибут будет присвоен, только тем стилям и тегам, которые относятся к компоненту.

Чтобы в проекте был порядок, необходимо разбить каждый элемент макета на отдельные компоненты из которых потом будут собираться страницы. Думаю, что всем понятно, в чем сила компонентов. Если нет, то тут learn.javascript.ru/webcomponents-intro коротко и ясно объясняется.

Структура проекта

Каждый компонент должен находится в своем каталоге. Имя каталога является именем компонента и используется в качестве префикса генерируемого атрибута. Все компоненты, должны лежать в каталоге components.

В каждом компоненте должен лежать файл html и css, если есть какая-то логика, то, там же следует разместить js файл.

Каждый компонент должен иметь свой тег. Желательно, чтобы в теге был дефис, например:

Такие правила заложены в стандарте custom elements, который пока мало где работает, но это не беда, рано или поздно заработает везде.

Свой тег компонента поможет лучше понимать что происходит в коде. Для демонстрации работы плагина и самого подхода, я подготовил крохотный пример.

В качестве примера я сделал два компонента карточек, карточка состоит из картинки и текста. Каждый компонент имеет одинаковые имена классов, но разные правила стилей, соответственно выглядеть все это должно по разному, то-есть вот так:

Вот такая получилась структура проекта:

После отработки всех gulp тасков, можно будет увидеть во что превратился код.

Почему не стоит использовать в JavaScript CSS: особенности работы со стилизованными компонентами

Сегодня, в следующей части курса по React, мы поговорим о встроенных стилях.

Занятие 15. Встроенные стили

В конце прошлого занятия мы создали компонент, который анализирует время суток и выводит соответствующее приветствие. Вот полный код файла index.js , реализующий этот функционал:

Теперь нам нужно стилизовать то, что этот код выводит на страницу. При этом мы собираемся использовать здесь подход, который отличается от рассмотренной ранее стилизации элементов с применением CSS-классов. А именно, речь идёт о применении HTML-атрибута style . Посмотрим, что произойдёт, если воспользоваться такой конструкцией:

На самом деле — ничего хорошего. Текст на страницу не попадёт, вместо этого будет выведено сообщение об ошибке. Суть его сводится к тому, что тут, при настройке стилей, ожидается не строковое значение, а объект, содержащий пары вида ключ: значение , где ключами являются имена CSS-свойств, а значениями — их значения.

Пытаясь пользоваться HTML-атрибутами в JSX-коде, мы не должны забывать о том, что то, с чем мы работаем, хотя и похоже на обычный HTML-код, им не является. В результате то, как тут будет выглядеть та или иная конструкция, может отличаться от того, что принято в HTML. В данном случае нам нужен обычный JavaScript-объект, содержащий описание стилей. Вооружившись этой идеей, перепишем вышеприведённый фрагмент кода так:

Так, к сожалению, наш код тоже не заработает. В результате его выполнения снова выведется сообщение об ошибке, правда, не такое, как в прошлый раз. Оно теперь сообщает о том, что там, где система может ожидать фигурную скобку, она находит что-то другое. Для того чтобы решить эту проблему, нужно вспомнить о том, о чём мы говорили на предыдущем занятии. А именно — о том, что JavaScript-код, встраиваемый в JSX, должен быть заключён в фигурные скобки. Те фигурные скобки, которые уже имеются в нашем коде, используются для описания объектного литерала, а не для выделения JS-кода. Исправим это:

Теперь компонент формирует на странице именно то, что нужно.

Стилизованный текст, выводимый на страницу компонентом

Что если мы решим продолжить стилизацию этого текста? Для этого нам нужно вспомнить о том, что стили мы описываем в JS-объекте, а это значит, что в этот объект надо добавить дополнительные пары вида ключ: значение . Например, попытаемся стилизовать таким образом фон текста, использовав CSS-свойство background-color и дополним код так:

Такая конструкция приведёт к сообщению об ошибке. Дело тут в том, что стили мы описываем с помощью обычного JS-объекта, а в JavaScript переменные и имена свойств объектов (идентификаторы) не могут содержать символ «-», тире. На самом деле, это ограничение можно обойти, например, заключив имя свойства объекта в кавычки, но в нашем случае это к делу не относится. Мы в подобных ситуациях, когда имена свойств CSS содержат тире, этот символ убираем и делаем первую букву слова, следующего за ним, заглавной. Несложно заметить, что при таком подходе имена свойств CSS будут записываться в верблюжьем стиле — так же, как в JavaScript принято записывать имена переменных, состоящие из нескольких слов. Перепишем код:

Посмотрим на результаты его работы.

Стилизованный текст, выводимый на страницу компонентом» src=»https://habrastorage.org/getpro/habr/post_images/363/ea4/f6a/363ea4f6a0e614c98e5f3e038c3728f6.png» style=»border-style:none; height:auto; margin:0px; max-width:100%; vertical-align:middle» />

Стилизованный текст, выводимый на страницу компонентом

В процессе стилизации текста код объекта со стилями становится всё длиннее. Работать с ним неудобно. Если попытаться разбить этот код на несколько строк, ничего хорошего тоже не получится. Поэтому мы вынесем описание объекта со стилями из JSX-кода, создав константу с именем styles , записав в неё объект и использовав её имя в JSX. В результате у нас получится следующее:

Этот код работает в точности так же, как и вышеописанный, но такой подход оказывается очень удобным, когда возникает необходимость в добавлении в объект новых стилей. Это не приводит к разрастанию кода, возвращаемого компонентом.

Как видите, сейчас значения CSS-свойств задаются в объекте styles в виде строк. При работе с этим объектом стоит учесть некоторые особенности, которые, в частности, касаются свойств, значения которых задаются в виде чисел. Например, это свойство fontSize (выглядящее как font-size в CSS). Так, это свойство можно задать в виде обычного числа, а не строки, заключённой в кавычки. Например, вполне допустима такая конструкция:

Здесь число 24 будет интерпретировано как размер шрифта, указываемый в пикселях. Если единицу измерения нужно указать в явном виде — нам снова нужно будет пользоваться строковыми значениями свойств. Например, следующий фрагмент кода аналогичен, в плане воздействия на размер шрифта, предыдущему, но единица измерения размера тут указана в явном виде:

Здесь мы указали размер в пикселях, но при необходимости в подобных конструкциях можно использовать и другие единицы измерения.

Говоря о встроенных стилях нельзя не упомянуть и об ограничениях этого подхода. Так, если в стили нужно добавить префиксы браузеров, это может оказаться немного более сложной задачей чем добавление других стилей. А вот что-то наподобие псевдокласов, таких как :hover , не поддерживается. Если вам это понадобится на данном этапе освоения React — лучше всего будет воспользоваться стилизацией элементов с использованием CSS-классов. А в будущем вам, вероятно, удобнее всего будет пользоваться для подобных целей специализированными библиотеками вроде styled-components. Но сейчас мы ограничимся встроенными стилями и стилизацией элементов с помощью CSS-классов.

Топ-пост этого месяца:  Закон абсолюта работа с Math.abs, parseInt и parseFloat в JavaScript

Возможно, после того, как вы узнали об этом ограничении встроенных стилей, вы зададитесь вопросом о том, зачем пользоваться ими, если CSS-классы позволяют добиться того же эффекта и обладают более обширными возможностями. Одна из причин использования встроенных стилей в React заключается в том, что такие стили можно формировать динамически. При этом то, каким будет тот или иной стиль, определяется средствами JavaScript-кода. Перепишем наш пример так, чтобы цвет текста менялся бы в зависимости от времени суток, в которое выводится сообщение.

Вот полный код компонента, в котором используется динамическое формирование стилей.

Обратите внимание на то, что объявление константы styles теперь находится перед блоком if . В объекте, определяющем стиль, установлен лишь размер шрифта надписи — 30 пикселей. Затем в объект добавляют свойство color , значение которого зависит от времени суток. Напомним, что речь идёт о совершенно обычном объекте JavaScript, а такие объекты поддерживают добавление и изменение свойств после их создания. После того, как стиль сформирован, он применяется при выводе текста. Для того чтобы быстро протестировать все ветви условного оператора, можно, при инициализации константы date , передать конструктору объекта типа Date желаемые дату и время. Например, это может выглядеть так:

Собственно говоря, смысл этого всего заключается в том, что динамические данные могут воздействовать на то, как выглядят элементы, формируемые компонентами. Это открывает перед разработчиком большие возможности.

Итоги

Сегодня мы поговорили о встроенных стилях, об их возможностях и ограничениях. На следующем занятии мы продолжим работу над TODO-приложением, а также начнём знакомство со свойствами компонентов, с важнейшей концепцией React. Поэтому всем, кто занимается по этому курсу, рекомендовано, прежде чем продолжать учёбу, как следует всё повторить и поэкспериментировать со всем тем, что мы к данному моменту разобрали.

12 февраля 2020 г. 14:49

Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!

Поддержание чистоты CSS в JS с помощью Stylelint

01.07.2020 Комментарии к записи Поддержание чистоты CSS в JS с помощью Stylelint отключены 100 Просмотров

От автора: мне нравится CSS в JS. Я использую его все время на работе и в личных проектах. Мне нравится, как он создает крутые темы и динамические стили. Но одна вещь, которой мне не хватает из обычного CSS — это линтинг.

Stylelint для CSS — это фантастический проект, который позволяет легко применять соглашения и избегать ошибок в стилях. Однако до недавнего времени я никогда не использовал его с CSS в JS. В выпуске версии 9.5.0 была добавлена поддержка первого класса для написания CSS в JS. Теперь выполнять линтинг в стиле популярных библиотек, таких как styleled-components и emotion, стало проще, чем когда-либо.

Остальная часть этой статьи будет посвящена emotion, но процесс линтинга styled-components практически идентичен.

Линтинг CSS

Давайте начнем с создания нового приложения React. Для этого мы можем использовать create-react-app.

Далее мы добавим некоторые зависимости. Мы можем начать с добавления emotion.

Это устанавливает две зависимости emotion. С помощью emotion мы можем стилизовать компоненты двумя разными способами. Чтобы убедиться, что линтинг работает должным образом, нам нужно начать с создания и стилизации компонентов.

Стилизация компонентов с помощью свойства CSS

Используя свойство css, мы можем передать либо стили объекта, либо стили строки.

В этом примере кода мы создали компонент футера. Мы стилизовали тег футера с помощью стилей объектов, а тег абзаца — с помощью строковых стилей. Для получения дополнительной информации, ознакомьтесь с документацией emotion.

Использование стилизованных компонентов

Используя styled, мы можем передавать стили в HTML-теги.

В этом примере кода мы создали компонент заголовка и применили его к стилю prop.

Использование stylelint

Теперь, когда мы разработали некоторые компоненты, давайте займемся линтингом!

Затем создайте файл с именем .stylelintrc.

Затем мы добавляем скрипт npm в package.json.

После этого мы можем запустить скрипт, и получим следующий вывод

Как видите, мы получаем несколько ошибок. Это связано с тем, что stylelint-config-standard оптимизирован для простого старого CSS. Давайте добавим несколько переопределений правил в файл .stylelintrc.

Теперь мы можем запустить yarn lint:css и получаем следующий вывод.

Упс! Похоже, мы написали плохой CSS. Хорошо, что Stylelint помог нам. Как вы видите, stylelint обнаружил, что наши ошибки были в компонентах, стилизованных как с помощью css, так и с помощью styled. Довольно круто!

Использование jest со stylelint

Jest — отличный способ запуска тестов, так почему бы не использовать его и для линтинга? Начните с установки некоторых зависимостей.

Далее создайте jest.stylelint.config.js.

Затем мы обновляем команду lint:css:

После этого мы снова запускаем lint:css.

В чем дело? Похоже, jest-runner-stylelint использует версию stylelint 8.3.1. Поддержка CSS в JS была добавлена в stylelint позже.

Давайте укажем jest-runner-stylelint использовать последнюю версию stylelint. Просто добавьте поле resolutions в package.json:

Затем снова запустите yarn, чтобы переустановить зависимости, и выполните yarn lint:css. На этот раз мы получаем тот же результат, что и раньше:

Теперь все, что нам осталось сделать, это исправить ошибки в этих модулях, и мы готовы к работе. Посмотрите репозиторий на GitHub.

Автор: Malcolm Laing

Редакция: Команда webformyself.

Работа со стилями при помощи JavaScript

Работа с классом элемента

Свойство className соответствует HTML-атрибуту class. При помощи этого свойства можно присвоить элементу любой класс:

Поскольку элемент может одновременно иметь несколько классов, перечисленных через пробел то можно добавить к уже существующим классам новый:

Поиск и удаление класса в списке классов, разделенных пробелами, требует более сложного программного кода, связанного с разбором текстовой строки – свойства className.

Для того чтобы удалить все классы элемента, достаточно присвоить свойству className пустое значение:

Работа с CSS-свойствами

С помощью свойства style можно изменять большинство CSS-свойств, например:

element.style.color=”red”

Для свойств, названия которых состоят из нескольких слов, используется вотТакаяЗапись:

background-color => backgroundColor

border-left-width => borderLeftWidth

Для удаления CSS-свойства необходимо присвоить ему пустое значение.

Существует свойство style.cssText, которое позволяет задать весь перечень css-свойств элемента через точку с запятой, аналогично тому, как это делается при описании свойств в css при помощи селекторов:

element.style.cssText=»color: red !important; background-color: yellow;”

При установке style.cssText все существующие свойства style перезаписываются, поэтому рекомендуется работать с конкретными значениями css-свойств, а не с cssText.

Пример реализации выбора различных внешних видов таблицы:

table1.setAttribute(«border», «1») //установка атрибута элемента table

Использование @supports со стилизованными компонентами

Я недавно перешел на использование styled-components для моего стиля, и я пытался использовать функцию @supports для работы CSS, но не повезло.

Синтаксис @supports используется нечто вроде:

Теперь это прекрасно, как стилизованных-компоненты имеют документы следующую строку:

Примечание: Амперсанды (&) прибудете заменены на наше сгенерированное уникальное имя класса для этого стилизованного компонента

Но когда я пытаюсь использовать амперсанд, чтобы использовать это, он не работает. При использовании кода ниже я получаю амперсанд в выводимого CSS

Создан 22 апр. 17 2020-04-22 18:07:36 silverlight513

1 ответ

Это, кажется, подлинная ошибка в styled-components ! Вам не нужно ставить амперсанд там вообще, он должен работать так же, как вопросы СМИ:

Это не прямо сейчас, хотя, так что я открыл an issue with our parser и следует надеяться, будет решена в ближайшее время. Я обновлю этот ответ, как только он будет исправлен!

Создан 23 апр. 17 2020-04-23 13:45:11 mxstbr

Спасибо @maxstbr, я буду отмечать это как правильный ответ после обновления с исправлением – silverlight513 24 апр. 17 2020-04-24 14:07:24

@maxstbr, я просмотрел стилизованные компоненты package.json и yarn.lock. Похоже, стилис не обновляется до последней версии. Он застрял на 2.0.3. – silverlight513 23 май. 17 2020-05-23 18:21:02

Примечание для новых читателей: стилис с тех пор обновлен и ‘@ поддерживает’ теперь, ну, поддерживается! – mxstbr 14 июн. 17 2020-06-14 12:31:12

Добавить комментарий