5-минутное введение в стилизованные компоненты

CSS странный. Вы можете изучить основы этого за 15 минут. Но могут пройти годы, прежде чем вы поймете, как правильно организовать свои стили.

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

Хаотические таблицы стилей

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

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

Новая волна CSS

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

Styled Components - одна из этих библиотек, и она быстро привлекла большое внимание благодаря сочетанию инноваций и привычного знакомства. Поэтому, если вы используете React (а если нет, ознакомьтесь с моим планом изучения JavaScript и моим вступлением к React), определенно стоит взглянуть на эту новую альтернативу CSS.

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

Компоненты в стиле

Главное, что вам нужно понять о Styled Components, это то, что его название следует понимать буквально. Вы больше не стилизуете элементы или компоненты HTML на основе их класса или элемента HTML:

Hello World

h1.title {
  размер шрифта: 1,5em;
  цвет: фиолетовый;
}

Вместо этого вы определяете стилизованные компоненты, которые имеют свои собственные инкапсулированные стили. Затем вы свободно используете их в своей кодовой базе:

импорт стилей из 'styled-компонентов';
const Title = styled.h1`
  размер шрифта: 1,5em;
  цвет: фиолетовый;
`;
 Hello World </ Title></pre><p>Это может показаться незначительной разницей, и на самом деле оба синтаксиса очень похожи. Но их ключевое отличие в том, что стили теперь являются частью их компонента.</p><p>Другими словами, мы избавляемся от CSS-классов как промежуточного шага между компонентом и его стилями.</p><p>Как говорит создатель стилевых компонентов Макс Стойбер:</p><p>«Основная идея стилевых компонентов заключается в применении передовых методов путем устранения соответствия между стилями и компонентами».</p><h3>Разгрузочная сложность</h3><p>Поначалу это может показаться нелогичным, поскольку весь смысл использования CSS вместо прямой стилизации элементов HTML (помните тег <font>?) Состоит в том, чтобы отделить стили и разметку путем введения этого слоя промежуточного класса.</p><p>Но такое разделение также создает большую сложность, и есть аргумент, что по сравнению с CSS, «настоящий» язык программирования, такой как JavaScript, гораздо лучше приспособлен для обработки этой сложности.</p><h3>Опора над классами</h3><p>В соответствии с этой философией отсутствия классов, styled-components использует реквизиты над классами, когда дело доходит до настройки поведения компонента. Так что вместо:</p><pre><h1 className = "title primary"> Hello World </ h1> // будет синим</pre><pre>h1.title {
  размер шрифта: 1,5em;
  цвет: фиолетовый;
  
  & .Primary {
    цвет синий;
  }
}</pre><p>Вы бы написали:</p><pre>const Title = styled.h1`
  размер шрифта: 1,5em;
  цвет: $ {props => props.primary? «синий»: «фиолетовый»};
`;</pre><pre><Title primary> Hello World </ Title> // будет синим</pre><p>Как вы можете видеть, стилевые компоненты позволяют очистить ваши компоненты React, сохранив все детали реализации, связанные с CSS и HTML.</p><p>Тем не менее, стиль-компоненты CSS по-прежнему CSS. Таким образом, подобные вещи также являются полностью допустимым (хотя и немного идиоматическим) кодом:</p><pre>const Title = styled.h1`
  размер шрифта: 1,5em;
  цвет: фиолетовый;
  
  & .Primary {
    цвет синий;
  }
`;</pre><pre><Title className = "primary"> Hello World </ Title> // будет синим</pre><p>Это одна особенность, благодаря которой очень легко получить доступ к стилевым компонентам: когда вы сомневаетесь, вы всегда можете вернуться к тому, что знаете!</p><h3>Предостережения</h3><p>Также важно упомянуть, что styled-components все еще является молодым проектом, и что некоторые функции еще не полностью поддерживаются. Например, если вы хотите стилизовать дочерний компонент от родительского, вам придется пока полагаться на использование классов CSS (по крайней мере, до появления styled-components v2).</p><p>Также нет никакого «официального» способа предварительно отрендерить ваш CSS на сервере, хотя это определенно возможно, если вводить стили вручную.</p><p>А тот факт, что стилевые компоненты генерируют свои собственные рандомизированные имена классов, может затруднить использование инструментов разработчика вашего браузера, чтобы выяснить, где изначально определены ваши стили.</p><p>Но что очень вдохновляет, так это то, что основная команда styled-components знает обо всех этих проблемах и усердно работает над их устранением. Версия 2 скоро появится, и я с нетерпением жду этого!</p><h3>Учить больше</h3><p>Моя цель здесь не в том, чтобы подробно объяснить, как работают стилевые компоненты, а в том, чтобы дать вам небольшой проблеск, чтобы вы сами могли решить, стоит ли проверять.</p><p>Если мне удалось заинтересовать вас, вот несколько мест, где вы можете узнать больше о styleled-компонентах:</p><ul><li>Макс Стойбер недавно написал статью о причине стилевых компонентов для журнала Smashing Magazine.</li><li>Само хранилище styled-components имеет обширную документацию.</li><li>В этой статье Джейми Диксона рассказывается о нескольких преимуществах перехода на стилевые компоненты.</li><li>Если вы хотите узнать больше о том, как на самом деле реализована библиотека, прочитайте эту статью Макса.</li></ul><p>И если вы хотите пойти еще дальше, вы также можете попробовать Glamour, новый взгляд на CSS новой волны!</p><p>Время саморекламы: мы ищем участников с открытым исходным кодом, которые помогут с Nova, самым простым способом создания полнофункциональных приложений React & GraphQL с формами, загрузкой данных и учетными записями пользователей. Мы еще не используем стилевые компоненты, но вы можете быть первыми, кто их реализует!</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Смотрите также</h4><a href="/design/building-a-color-palette-framework-76db07/" title="Создание структуры цветовой палитры">Создание структуры цветовой палитры</a><a href="/design/design-thinking-a-manual-for-innovation-d0eeae/" title="Дизайнерское мышление: руководство по инновациям">Дизайнерское мышление: руководство по инновациям</a><a href="/design/mind-the-gap-41a878/" title="Запомни пропасть">Запомни пропасть</a><a href="/design/how-we-designed-page-previews-for-wikipedia-and-what-could-be-done-with-them-in-the-future-af861f/" title="Как мы разработали превью страниц для Википедии - и что можно сделать с ними в будущем">Как мы разработали превью страниц для Википедии - и что можно сделать с ними в будущем</a><a href="/design/introducing-boosts-an-all-new-way-to-show-your-support-in-basecamp-fde145/" title="Представляем Boosts: совершенно новый способ показать вашу поддержку в Basecamp">Представляем Boosts: совершенно новый способ показать вашу поддержку в Basecamp</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="vn flag"></i></a><a href="https://uk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ua flag"></i></a><a href="https://tr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="tr flag"></i></a><a href="https://th.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="th flag"></i></a><a href="https://sv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ch flag"></i></a><a href="https://sr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="rs flag"></i></a><a href="https://sl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="si flag"></i></a><a href="https://sk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sk flag"></i></a><a href="https://ro.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ro flag"></i></a><a href="https://pt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pt flag"></i></a><a href="https://pl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pl flag"></i></a><a href="https://de.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="de flag"></i></a><a href="https://ar.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sa flag"></i></a><a href="https://bg.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="bg flag"></i></a><a href="https://cs.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="cz flag"></i></a><a href="https://highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="dk flag"></i></a><a href="https://el.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="gr flag"></i></a><a href="https://es.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="es flag"></i></a><a href="https://et.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ee flag"></i></a><a href="https://fi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fi flag"></i></a><a href="https://fr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fr flag"></i></a><a href="https://hi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="in flag"></i></a><a href="https://hr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hr flag"></i></a><a href="https://hu.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hu flag"></i></a><a href="https://id.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="id flag"></i></a><a href="https://it.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="it flag"></i></a><a href="https://ja.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="jp flag"></i></a><a href="https://ko.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="kr flag"></i></a><a href="https://lt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lt flag"></i></a><a href="https://lv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lv flag"></i></a><a href="https://ms.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="my flag"></i></a><a href="https://nl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="nl flag"></i></a><a href="https://no.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="no flag"></i></a><a href="https://uz.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="uz flag"></i></a></div>highresolution-wallpapers.net<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>