PureCSS может быть вашей самой мощной библиотекой CSS для веб-проектов
Нет смысла начинать каждый проект с нуля. Вот почему библиотеки CSS так популярны. По данным 2020.stateofcss.com, популярность PureCSS растет, а также растет удовлетворенность.
Так как же PureCSS по сравнению с наиболее широко используемым Bootstrap или восходящей звездой TailwindCSS?
Я покажу вам принципиальные различия в стиле кнопок. Помимо этого, PureCSS крошечный (3,7 КБ). Он делает самое необходимое и не мешает вам устанавливать свои собственные стили.
PureCSS обеспечивает минимальный стиль, поэтому вы можете легко добавить собственное форматирование.
Верно кредо:
«Мы считаем, что намного проще добавить новые правила CSS, чем перезаписать существующие». - PureCSS
Разрушительная разница между PureCSS и Bootstrap
Bootstrap предлагает огромное количество компонентов. От простых кнопок до сложных. Например, ползунки, всплывающие подсказки, всплывающие окна и модальные окна и многое другое.
В PureCSS количество стилизованных элементов очень управляемо.
PureCSS предлагает вам базовую структуру, сетку, формы, кнопки , таблицы и меню, которые можно включить отдельно.
Сравнение прямого использования
Bootstrap
<button type="button" class="btn btn-primary">Primary </button>
PureCSS
PureCSS предоставляет три класса для кнопок: pure-button для базового форматирования.
<button class="pure-button">A Pure Button</button>pure-button-primary для синей кнопки.
<button class="pure-button pure-button-primary">A Primary Button</button>Наконец, pure-button-group для группировки нескольких кнопок.
<div class="pure-button-group" role="group" aria-label="...">
<button class="pure-button">A Pure Button</button>
<button class="pure-button">A Pure Button</button>
<button class="pure-button pure-button-active">A Pure Button</button>
</div>Bootstrap
Помимо btn-primary, который окрашивает кнопку в синий цвет, доступны семь других вариантов (цветов), например btn-secondary или btn-warning.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>PureCSS
Вместо того, чтобы иметь множество классов для каждого варианта, вы выбираете чистую кнопку и группируете ее со своим индивидуальным стилем.
Это та часть, когда становится интереснее PureCSS.
<div>
<style scoped="">
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65);
/* this is a green */
}
.button-error {
background: rgb(202, 60, 60);
/* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20);
/* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221);
/* this is a light blue */
}
</style>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>Классы за кулисами
Класс pure-button выполняет несколько нормализаций и выполняет базовое форматирование.
Шрифт настроен на наследование, поэтому он такой же, как и в среде.
Граница и подчеркивание удаляются, кроме определения закругленных углов и настройки шрифта и цвета фона.
Форматирование использует класс pure-button, он выглядит следующим образом.
.pure-button {
font-family: inherit;
font-size: 100%;
padding: .5em 1em;
color: #000c;
border: none transparent;
background-color: #e6e6e6;
text- decoration: none;
border-radius: 2px;
}
Кроме того, кнопка определяется как элемент inline-block, и текст становится центрированным.
Спецификации * -user-select гарантируют, что текст не может быть выбран по ошибке, что было бы нежелательно для кнопки и могло бы затруднить использование:
.pure-button {
display: inline-block;
line-height: normal;
white-space: nowrap;
vertical-align: middle;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Для состояний наведения и других состояний определен градиент цвета, который проходит сверху вниз. Сначала он прозрачный, а затем становится очень светлым прозрачно-серым.
.pure-button-hover, .pure-button:focus, .pure-button:hover {
background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(40%, rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
background-image: linear-gradient (transparent,#0000000d 40%,#0000001a);
}
Следовательно, это форматирование применяется, когда вы используете класс pure-button.
Много кода для результата, который на первый взгляд кажется немного банальным. Простая светло-серая кнопка с черным шрифтом и закругленными углами.
Было удалено все, что делало элемент кнопки немного странным.
Кроме того, внешний вид кнопки всегда одинаков, независимо от того, используете ли вы <a> или <button>.
Вам не нужно определять собственные цвета при наведении курсора.
Сосредоточьтесь на специальности, а не на основах
Бутстрап
Для кнопок большего или меньшего размера используйте классы btn-sm или btn-large.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>Блочные или встроенные кнопки могут быть реализованы в Bootstrap 4 с помощью пользовательских классов. В Bootstrap 5 для этого используются служебные классы.
PureCSS
Используя PureCSS, вы сосредотачиваетесь на том, что должно быть особенным в кнопках. Например, цветные кнопки, большие или маленькие кнопки.
Для этого вам нужно всего лишь установить размер шрифта кнопок. Это также изменяет размер кнопки. Он получает большее внутреннее пространство (заполнение), поскольку это определено в em:
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
А как насчет TailwindCSS?
Чтобы завершить сравнение, давайте посмотрим, как создать кнопку в TailwindCSS. Например, вы можете использовать следующий код:
<button class="py-2 px-4 shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> Button</button>
Вы не найдете класса button в файлах CSS.
Вместо этого просто увеличить боковые отступы, например, изменив py-2 на py-3. Класс py-* управляет отступом справа и слева.
Такой подход типичен для служебных библиотек. TailwindCSS не только предоставляет все форматирование CSS в виде классов. Он также предлагает полезные дополнения, такие как эффект кольца для состояния фокуса.
Обратной стороной является количество кода в файлах HTML, если вы используете кнопку много раз. Затем важно использовать систему шаблонов, которая позволяет вам определять кнопку как компонент. Например, внутри VueJS или с Blade / Laravel.
TailwindCSS предлагает способ извлечения индивидуального форматирования. Это становится громоздким, если вы используете его для более чем второстепенных компонентов.
Установка PureCSS
Вы можете интегрировать PureCSS несколькими способами. Для начального тестирования лучше всего использовать CDN (сеть доставки контента):
<link rel="stylesheet" href="https://unpkg.com/purecss @2.0.5/build/pure-min.css" crossorigin="anonymous">
Кстати, вы также можете связать отдельные модули (кнопки, таблицы, формы, и т. Д..) По отдельности. .
Для правильного использования я рекомендую загрузить PureCSS и использовать локальную версию.
Это можно сделать, например, с помощью команды npm:
npm install purecss --save
Или вы устанавливаете его через Composer, если у вас есть проект PHP:
composer require pure-css/purecss
Чтобы расширить PureCSS, вы можете использовать его внутри Grunt.
Было бы лучше, если бы у вас была базовая HTML-структура с мета-спецификацией области просмотра и со ссылкой на загруженный файл PureCSS:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PureCSS</title> <link rel="stylesheet" href="pure-min.css"> </head> <body></body> </html>
Теперь вы можете использовать PureCSS.
Вывод
State-of-CSS 2020, опрос разработчиков популярных методов и инструментов, показывает, насколько хорошо принят подход PureCSS. Это означает, будут ли они снова использовать фреймворк.
PureCSS показал сильный 71%. Это ставит его на второе место - сразу после TailwindCSS, который достигает 87% процентов.
Иногда PureCSS кажется немного старомодным. Например, раздражают ссылки на библиотеку YUI. Эти части больше не обслуживаются.
В конце концов, меня убеждает подход PureCSS. Он также может служить основой для ваших собственных шаблонов - если вы не хотите идти по пути Bootstrap или TailwindCSS.
Подводя итог, с моей точки зрения, PureCSS побеждает в этой битве, когда вы хотите, чтобы минималистский подход начинался легко и быстро, особенно когда Bootstrap слишком детально или сложно. Даже если подход полезности нельзя или не следует выбирать по другим причинам.
Если вам нужен более качественный обработанный программный контент, посетите мои курсы на Udemy.
