React Supplements: мои фавориты из 10 популярных решений CSS сейчас (средний)

внешний интерфейс Debug React.js CSS

Часть 1Представляет популярные сегодня CSS-решения React. Эта статья перейдет непосредственно к теме и подробно расскажет об одном из моих любимых решений: тахионы

Лично тахионы подходят для небольших проектов, где стиль не в центре внимания и для написания демо, но это не значит, что тахионы нельзя использовать для завершения больших проектов и красивых домашних страниц: См. проект, написанный с использованием тахионовtachyons.io/gallery/

0. Критерии выбора

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

  • Решает ли это болевые точки разработки React: локальный CSS, динамический CSS?
  • Поддерживаются ли все варианты использования css или даже sass? Псевдоклассы, вложенность, анимация, медиазапросы?
  • Совместим ли он со сторонними библиотеками пользовательского интерфейса, которые вам нужно использовать?
  • Может ли он сосуществовать с чистым CSS или другими CSS-фреймворками, чтобы был план Б на случай особых обстоятельств?
  • представление? размер?

1. tachyons

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

tachyons, в отличие от всех предыдущих фреймворков css, которые пытаются предоставить множество классов css масштаба компонентов, у него даже нетbtnтакой класс. Поскольку css-фреймворки, такие как bootstrap, разделяют недостатки фреймворков: когда вы используете его полностью в рамках, предусмотренных схемой, все легко и приятно, но как только вы захотите настроить, вас ждет бесконечная боль. Как будто наоборот, тахионы представляют собой чрезвычайно детализированные классы, проверьте это.tachyons.io/components/, например, кнопка:

按钮
код показывает, как показано ниже:

<div class="ph3">
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>

Возьмите класс второго ряда слева направо: соответственноfont-size:.875rem, удалите уродливый стиль ссылки по умолчанию, добавьте эффект затухания :hover,border-radius1 единица, полная граница (граница для всех), ширина границы 2 единицы, отступ по горизонтали 3 единицы, отступ по вертикали 2 единицы, нижнее поле 2 единицы,display:block,Пурпурный.

Атомный класс:

Это основная концепция тахионов, чрезвычайно усовершенствованных «атомарных классов», со следующими преимуществами:

  1. Исходный код минимален и чрезвычайно читабелен,исходный код.
  2. 14 КБ без сжатия. Помню раньше писал систему управления проектами.Попытался использовать тахионы вместо чистого CSS.После модификации не только стиль более однородный,но и CSS файл меньше.
  3. Настройка на одном дыхании: приведенный выше пример, я хотел бы немного ширины краяbw3Вот и все.
  4. Никогда не беспокойтесь о конфликтах имен, никогда не беспокойтесь о переопределениях стилей, пока вы пишете класс, UI будет меняться соответственно, пока все используют тахионы, работа друг друга никогда не повлияет друг на друга.
  5. Как только вы его напишете, у вас появится опыт, что значительно повысит скорость разработки.

Проще говоря, использование тахионов похоже на написание встроенного css на четко определенном минималистском языке.

почему это работает

Может быть, вы хотите спросить, так ли хороши тахионы, почему раньше не появлялась такая библиотека css? Потому что эта концепция, как и встроенный css, стала действительно возможной только с волной разработки компонентов. Если вы используете традиционную разработку, написать каждую кнопку таким образом не так просто, как использовать класс btn. Но в таких фреймворках, как React, повторное использование кода уже покрывается компонентами. Вполне возможно написать компонент Button:

const Button = ({ children, color }) => (
    <a className=`f6 link dim br1 ba bw2 ph3 pv2 mb2 dib ${color}` href="#0">{children}</a>
)

Используйте следующим образом

<Button color='hot-pink'> 注册 </Button>

больше преимуществ

  1. Простой динамический css со строками шаблона
  2. Возможность повторного использования стилей будет значительно улучшена

tachyons > inline css

Если вы думаете, что тахионы — это просто встроенный стиль, вы ошибаетесь, вы влюбитесь в тахионы во всех деталях, когда будете их использовать:

  1. Элегантные медиа-запросы:
<div className="mw6 mw5-m mw4-l">
// 手机上max-width: 32rem, 中屏 16rem，大屏 8rem
<div className="w3 w5-ns">
// 手机上width: 4rem， 非手机 16rem

Используя тахионы для разработки, вы можете сначала написать стиль мобильного телефона, а затем добавить пропуск-m,-l,-nsПриведите себя в форму за считанные минуты.

  1. Поставляется с хорошей спецификацией стиля, а не только длиной, шириной и цветом, стиль проекта унифицирован:
/* 比如shadow */
.shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
  1. класс отладки. Это моя любимая вещь в тахионах, даже когда я не использую тахион, я добавляю эти два класса в свой код:
.debug * { outline: 1px solid gold; }
.debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; }

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

  1. удобство в деталях
/* 纵向 vertical */
.pv2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
/* 横行 horizontal */
.ph3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

Совместимость с другими решениями, сторонними библиотеками

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

наконец

  1. ПредыдущаяDemoВзгляните на адаптацию, которую могут сделать несколько линий тахионов.

  2. Дружеская перекличкаtailwind.css. Он вдохновлен тахионами, пытаясь использовать тахионы для интеграции набора CSS-решений, которые могут выполнять проекты любой сложности.Он намного мощнее, чем тахионы, и требует некоторого обучения. Заинтересованные могут взглянуть на их подробную документацию.

  3. Следующийstyled-jsx, Расскажу о личном фаворите больших проектов React css.

React Supplements: мои фавориты из 10 популярных CSS-решений (часть 2)

Категории