Styles

Доброго времени суток, друзья!

Предлагаю Вашему вниманию результаты небольшого исследования визуального сравнения 13 CSS-фреймворков.

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

В исследовании представлены следующие фреймворки:

• Bootstrap
• Materialize
• Bulma
• Foundation
• Semantic
• Skeleton
• Tailwind
• Uikit
• Pure
• Milligram
• Spectre
• Base
• Picnic

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

• Bootstrap stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
• Materialize cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
• Bulma cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
• Foundation cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css
• Semantic cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
• Skeleton cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css
• Tailwind cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.2/tailwind.min.css
• Uikit cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css
• Pure unpkg.com/purecss@2.0.3/build/pure-min.css
• Milligram cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css
• Spectre unpkg.com/spectre.css/dist/spectre.min.css
• Base unpkg.com/@getbase/base/core.css
• Picnic cdn.jsdelivr.net/npm/picnic

В тестовой разметке представлены основные элементы веб-страницы с акцентом на семантические теги:

<header>    <figure>        <figcaption>logo</figcaption>        <img src="logo.png" alt="logo">    </figure>    <nav>        <a href="#">link1</a>        <a href="#">link2</a>        <a href="#">link3</a>    </nav></header><hr><main>    <h1>main title</h1>    <aside>        <h4>aside title</h4>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, quibusdam.</p>    </aside>    <section>        <h2>section title</h2>        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, illum.</p>        <ul>            <li>item1</li>            <li>item2</li>            <li>item3</li>        </ul>        <table>            <caption>table</caption>            <tr>                <th>1</th>                <th>2</th>                <th>3</th>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>4</td>                <td>5</td>                <td>6</td>            </tr>        </table>        <dl>            <dt>term</dt>            <dd>Lorem <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. <mark>Accusamus</mark>, obcaecati?</dd>        </dl>        <details open>            <summary>summary</summary>            <p><small>Lorem dolor sit amet ipsum, consectetur adipisicing elit. Explicabo, repellat?</small></p>        </details>        <button>button</button>    </section>    <article>        <h3>article title</h3>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, architecto?</p>        <blockquote>Lorem ipsum dolor, sit amet <cite>consectetur adipisicing elit.</cite> Ipsam, ad!</blockquote>        <code>            console.log('hello world')        </code>    </article></main><hr><footer>    <form action="#">        <fieldset>            <legend>form</legend>            <label>name:                <input type="text">            </label>            <label>email:                <input type="email">            </label>            <input type="submit" value="subscribe">        </fieldset>    </form>    <p> 2020.</p></footer>

Вот как это выглядит:




Поиграть с кодом можно здесь:



Песочница не позволяет работать с тегом head, поэтому милости прошу на GitHub Pages.

Код проекта находится здесь.

Результаты исследования вполне ожидаемы: первое место Bootstrap, второе Materialize.

Materialize, судя по всему, следует концепции mobile first, из-за чего проигрывает Bootstrap, когда дело касается широких экранов. Также Materialize проигрывает в плане функциональности, но это другая история.

Перспективными мне показались Skeleton и Picnic.

Благодарю за внимание.

Доброго времени суток, друзья!

Сегодня я хочу поговорить с вами о стилизации в React.

Почему данный вопрос является актуальным? Почему в React существуют разные подходы к работе со стилями?

Когда дело касается разметки (HTML), то React предоставляет в наше распоряжение JSX (JavaScript и XML). JSX позволяет писать разметку в JS-файлах данную технику можно назвать HTML-в-JS.

Однако, когда речь идет о стилях, то React не предоставляет каких-либо специальных инструментов (JSC?). Поэтому каждый разработчик волен выбирать такие инструменты по своему вкусу.

Всего можно выделить 5 подходов к стилизации React-компонентов:

• Глобальные стили все стили содержатся в одном файле (например, index.css)
• Нативные CSS-модули для каждого компонента создается отдельный файл со стилями (например, в директории css); затем эти файлы импортируются в главный CSS-файл (тот же index.css) с помощью директивы "@import"
• Реактивные CSS-модули (данная техника используется не только в React-проектах; реактивными я назвал их потому, что библиотека css-modules в настоящее время интегрирована в React, т.е. не требует отдельной установки, по крайней мере, при использовании create-react-app) для каждого компонента создается файл Component.module.css, где Component название соответствующего компонента (обычно, такой файл размещается рядом с компонентом); затем стили импортируются в JS-файл в виде объекта, свойства которого соответствуют селекторам класса (например: import styles from './Button.module.css'; <button style={styles.button}>Нажми на меня</button>)
• Встроенные (инлайновые) стили элементы стилизуются с помощью атрибутов style со значениями в виде объектов со стилями (например, <button style={{ borderRadius: '6px'; } }>Нажми на меня</button>)
• CSS-в-JS библиотеки, позволяющие писать CSS в JS-файлах; одной из таких библиотек является styled-components: import styled from 'styled-components'; const Button = styled`какой-то css`; <Button>Нажми на меня</Button>

На мой взгляд, лучшим решением является последний подход, т.е. CSS-в-JS. Он выглядит самым логичным с точки зрения описания структуры (разметки), внешнего вида (стилей) и логики (скрипта) компонента в одном файле получаем нечто вроде Все-в-JS.

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

Ну, а худшим подходом, по моему мнению, являются встроенные стили. Стоит, однако, отметить, что определение объектов со стилями перед определением компонента и последующее использование этих объектов напоминает CSS-в-JS, но остаются camelCase-стиль, атрибуты style и сами встроенные стили, которые затрудняют инспектирование DOM.

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

Исходный код GitHub.

Песочница:


Выглядит приложение так:



Приложение состоит из трех компонентов: Title заголовок, Counter значение счетчика и информация о том, каким является число: положительным или отрицательным, четным или нечетным, Control панель управления, позволяющая увеличивать, уменьшать и сбрасывать значение счетчика.

Структура проекта следующая:

|--public  |--index.html|--src  |--components    |--Control      |--Control.js      |--Control.module.css      |--package.json      |--styles.js    |--Counter      |--Counter.js      |--Control.module.css      |--package.json      |--styles.js    |--Title      |--Title.js      |--Title.module.css      |--package.json    |--index.js  |--css    |--control.css    |--counter.css    |--title.css  |--App.js  |--global.css  |--index.js  |--nativeModules.css  |--reactModules.css...

Пройдемся по некоторым файлам, находящимся в директории src:

• index.js входная точка JavaScript (в терминологии бандлеров), где импортируются глобальные стили и рендерится компонент App
• App.js основной компонент, где импортируются и объединяются компоненты Control, Counter и Title
• global.css глобальные стили, т.е. стили всех компонентов в одном файле
• nativeModules.css файл, где импортируются и объединяются нативные CSS-модули из директории css (control.css, counter.css и title.css)
• reactModules.css глобальные стили для реактивных CSS-модулей
• components/Control/Control.js три реализации компонента Control (с глобальными стилями/нативными CSS-модулями, c реактивными CSS-модулями и стилизованными компонентами), а также пример объекта со встроенными стилями
• components/Control/Control.module.css реактивный CSS-модуль для компонента Control
• components/Control/styles.js стилизованные компоненты для компонента Control (когда стилизованных компонентов много, я предпочитаю выносить их в отдельный файл)
• components/Control/package.json файл с main: "./Control", облегчающий импорт компонента (вместо import Control from './Control/Control' можно использовать import Control from './Control'
• components/index.js повторный экспорт, позволяющий разом импортировать все компоненты в App.js

Как всегда, буду рад любой форме обратной связи.

Благодарю за внимание и хорошего дня.