Бухари Мухаммад

РЕСлист (React Evaluated Style Sheet)более известен как RESSэто крошечный препроцессор, предназначенный для Реагировать (Родная) что МЕНЬШЕ состоит в том, чтобы CSS. RESS использует a МЕНЬШЕ-подобный подход к стилю во избежание повторяющихся определений стиля. Я полностью стилизовал следующие кнопки RESS.

Немного истории

Меня поначалу охватила идея написать лучшее решение для стиля Реагировать во время работы над новым UI пакет для React Native. При разработке один из первых вопросов, который меня волновал по поводу традиционного StyleSheet компонентом является его огромное отсутствие важных функций, которые CSS представлены. В добавок, встроенный стиль достаточно табу для тех, кто провел последние полдесяти лет, проповедуя против него. Я становлюсь религиозным по этому поводу.

Я начал создавать компонент кнопки, похожий на Bootstrap, для своего UI каркас. Я впервые воспользовался StyleSheet чтобы достичь этого, я использовал серию if операторы, чтобы проверить, существовали ли атрибуты перед соответствующим стилем кнопки. пример: <Button primary>Submit<;/Button> должен был отобразить синюю кнопку и т.д.

The <Button> размер файла компонента стал неоправданно большим из-за этого неэффективного метода. Вскоре я решила отказаться от этой изнурительной техники укладки и искала более надежное решение.

Я начал с тестирования некоторых пакетов, которые пытались обеспечить лучший стиль Реагировать – а именно: стилизованные компоненты, радиум и гламур – только для того, чтобы обнаружить, что большинство имеет свои недостатки. Мне главным образом не понравилась кривая производительности и большой размер упаковки, связанных с большинством из них. И что хуже всего, никто из них не имел поддержки React Native.

Наконец я решил создать простое решение, удовлетворяющее мои потребности и потребности многих, кто разделяет мой страх. В основном я хотел решение, которое сделало бы более удобными стили написания для обоих Реагировать и React Native компоненты.

Я решил написать легкий пакет, имитирующий некоторые из моих любимых CSS и МЕНЬШЕ такие функции, как мультиселекторы (с помощью реквизитов), вложенные стили и каскадные стили. Все это без ущерба для производительности или введения совершенно чужого подхода с высокой кривой обучения.

Вот что привело к идее RESS.

Под капотом

RESS выводит объект стиля на основе двух необходимых аргументов, а именно: a props объект и а РЕСлист объект. Он автоматически проверяет наличие атрибутов и возвращает соответствующие стили «селекторов» (ключей объектов), предоставленных в РЕСлист объект. The РЕСлист объект обычный Таблица стилей React предмет — тот, что используется в StyleSheet.create({…}) — с несколькими дополнительными полезными функциями:

• The default селектор, автоматически применяемый к компоненту. пример: default: {fontSize: 16} — сначала это применимо к компоненту, независимо от его props.
• Умение конкретизировать мульти-реквизит как селекторы ‘h1, h2, h3, h4, h5, h6’: {fontWeight: ‘bold’}это б жирный текст компонента с любым диапазоном атрибутов h1 – h6.
• Вложенные стили — компонент со следующим РЕСлист будет скрыт по умолчанию и отображается, если имеет active prop, это можно использовать в поведении табуляции/аккордеона:

Возвращенный объект будет размещен в style свойство компонента.

Я запланировал добавить еще несколько замечательных функций RESS на ближайшее обозримое будущее.

RESS по сравнению с другими решениями

По сравнению с RESSможно утверждать, что по умолчанию StyleSheet компонент является почти анти-СУХИ Шаблон (Не повторяйте себя) при обработке стилей компонентов. Я заметил это, когда получил флуд if заявления о попытке динамического стиля компонента

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

В контрасте, RESS использует стили-объекты вместо толковать strings чтобы не жертвовать Реагироватьмощные средства отчетности об ошибках и подчеркивание синтаксиса вашего любимого текстового редактора.

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

Нижняя линия…

RESS это просто потрясающий маленький сценарий, позволяющий мне писать лучше UI для моих проектов React и React Native быстрее за счет использования МЕНЬШЕ-подобные узоры для поощрения абстракции и повторения.

Если вам это интересно, обязательно аплодируйте этой публикации, отметьте звездочкой репозиторий этого проекта на GitHub и попробуйте, установив его через NPM:

npm install ressheet --save

Чтобы обновить прогресс этого хранилища вместе с интересными советами по JavaScript/React, следите за мной в Twitter: @bukharim96

Я хотел бы услышать положительные отзывы и критику, поэтому не стесняйтесь. Наслаждайтесь 😉