5 лучших инструментов CSS для веб-разработчиков и дизайнеров

CSS прошел долгий путь, но инструментальные средства вокруг него не до сих пор.


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

Но так не должно быть. Сегодня инструментарий вокруг CSS развился до такого уровня, что рабочий процесс можно не только приручить, но и сделать приятным. В этой статье я расскажу о пяти таких инструментах CSS, которые я считаю чрезвычайно ценными в моей работе. Я сознательно избегал, включая «игрушечные» инструменты, такие как генераторы CSS, генераторы меню и т. Д., Потому что они создают больше проблем, чем решают.

Поезд CSS идет! Пошли! �� ��

PostCSS

Если вы любите JavaScript, вам понравится идея, которую мы теперь можем добавлять и контролировать CSS с помощью JavaScript. И это именно та способность, которая PostCSS обеспечивает.

Однако это не просто синтаксический сахар на основе JavaScript, а не CSS. PostCSS объединяет несколько мощных пакетов / функций, что значительно облегчает работу с CSS. Например:

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

Я думаю, что не буду отдавать должное PostCSS, если я не включу пример сетки. Итак, поехали. Что-то простое, как это:

div {
потерянный столбец: 1/3
}

превращается в полноценную систему CSS с почти всеми крайними случаями:

div {
ширина: кальци (99,9% * 1/3 –
(30px – 30px * 1/3);
}
div: nth-child (1n) {
плыть налево;
Поля справа: 30 пикселей;
ясно: нет;
}
div: last-child {
поле справа: 0;
}
div: nth-child (3n) {
поле справа: 0;
плавать: правильно;
}
div: nth-child (3n + 1) {
ясно: оба;
}

Поскольку PostCSS работает на основе JS, его не так-то просто установить, особенно если вы дизайнер и не имеете большого отношения к модулям, сборщикам и миру npm в целом. Тем не менее, потенциал PostCSS в вашей работе огромен и не следует упускать из виду.

PurgeCSS

Вам нравится современный рабочий процесс, основанный на фреймворке, но вы разочарованы тем, что они приносят слишком много багажа? Если да, PurgeCSS ваш друг, по крайней мере, насколько CSS считается.

Для тех, кто может не знать, в чем дело: вот краткое изложение. Когда вы создаете одностраничные приложения с использованием интерфейсных сред, таких как React, Angular, Vue и т. Д., Вы проходите через так называемый «процесс сборки». По сути, вы кодируете все свои CSS, JS, SASS и т. Д. В отдельных файлах (упорядочивая их, как вам кажется, наиболее интуитивно понятными), но как только вы закончите, вы скажете сборщику «собрать» эту вещь. Для этого нужно прочитать весь исходный код, который вы написали, применить к нему различные фильтры (минификация, обфускация / углификация и т. Д.) И разбить вывод на отдельные файлы, обычно «app.js» для всего JavaScript, и «App.css» для всех CSS. Эти файлы вместе с узким «index.html» – это все, что вам нужно для запуска внешнего интерфейса приложения. Недостатком является то, что, поскольку все включено в эти окончательные файлы, их размер часто выходит за пределы допустимого для быстрого времени отклика; например, часто встречается «app.js» размером более 500 КБ!

PurgeCSS добавляется как часть вашего рабочего процесса сборки и предотвращает связывание неиспользуемого CSS в окончательный вывод. Типичным примером использования является Bootstrap: это библиотека среднего размера с несколькими классами пользовательского интерфейса для разных компонентов. Если ваше приложение использует, скажем, 10% классов Bootstrap, остальные 90% – единственное число в вашем конечном CSS-файле. Но благодаря PurgeCSS такие неиспользуемые CSS-файлы можно идентифицировать и предотвратить в процессе сборки, что приводит к гораздо меньшим конечным CSS-файлам (уменьшение размера в 5-6 раз вполне нормально).

Итак, «очистите» ненужный CSS с помощью PurgeCSS! ��

попутный ветер

попутный ветер это фреймворк CSS, но он настолько сильно противоречит сути, что я решил включить его в число инструментов CSS. Если вы ненавидите встроенный CSS (а кто нет ?!), Tailwind, скорее всего, заставит вас отшатнуться в ужасе, когда вы впервые столкнетесь с ним. Давайте познакомимся с тем, как можно кодировать типичную форму с помощью Tailwind CSS:

имя пользователя

пароль

Пожалуйста, выберите пароль.

Войти в систему


Забыл пароль?

© 2019 Acme Corp. Все права защищены.

«Это шутка или что ?! Что все эти раздражающие маленькие классы? При ближайшем рассмотрении, какого черта я устанавливаю поля, отступы и цвет непосредственно вместе с HTML? Это 2019 или что?

Мысли, подобные этим, ожидаются. Я знаю, потому что я чувствовал то же самое и сразу закрыл крышку попутного ветра. Только позже я наткнулся на подкаст, где гость переделал модный, приличный сайт в Tailwind, на который я обратил внимание.

Прежде чем двигаться дальше, рассмотрим следующие вопросы:

  • Вы устали запоминать стандартные классы фреймворка и их функции, чтобы вы могли настроить свой дизайн по своему вкусу? Хорошим примером является изменение внешнего вида и поведения панели навигации Bootstrap..
  • Как вы думаете, популярные фреймворки, такие как Bootstrap, излишни и пытаются сделать гораздо больше, чем должны??
  • Считаете ли вы себя смешивая рамки, потому что вы хотите лучшее из всех миров?
  • Вы хотели бы иметь больше контроля над своими дизайнами и в то же время находить потрясающий опыт CSS подавляющим??

Если ответ на любой из этих вопросов «да», вам очень нужен попутный ветер. Теперь давайте посмотрим, что такое Tailwind и что он делает.

Tailwind – это то, что называется CSS для утилит, который отличается от того, что мы делаем в наших повседневных рабочих процессах: семантический CSS. Разница между семантическим CSS и утилитой CSS заключается в том, что первый пытается сгруппировать элементы стиля по имени визуальных разделов, которые появляются на странице. Таким образом, если у вас есть навигационное меню, карточки, карусели и т. Д. На странице, семантическим способом работы будет группирование правил стиля CSS по таким классам, как .nav, .card, .carousel и т. Д., Которые их подразделы помечены соответствующим образом (например, .card-body, .card-footer и т. д.). На сегодняшний день это наиболее распространенный подход к CSS, и все мы знакомы с ним по таким фреймворкам, как Bootstrap, Foundation, Bulma, UI Kit и т. Д..

С другой стороны, «полезный» стиль написания классов имен CSS точно соответствует их функции: класс, который контролирует поля для верхней и нижней сторон, будет называться .margin-y-medium и может применяться в любом месте HTML. разметка, где этот запас необходим. Несмотря на то, что это вызывает некоторую слабость имени класса (просто взгляните на код, которым я поделился ранее, или на скриншот – так много классов!), Цель CSS предельно ясна: вам не нужно прыгать копаться в документации, вашем CSS и HTML, чтобы найти правильные имена и правильный эффект.

Это очень освобождающий способ работы, но есть и одна загвоздка: вам необходимо иметь прочные основы CSS (включая современные концепции, такие как Flexbox). Это связано с тем, что Tailwind не предлагает готовых стилей для каких-либо компонентов на вашей странице, и вы сами должны создавать стили из заданных строительных блоков. Другая проблема заключается в настройке: Tailwind позволяет группировать несколько CSS-классов в так называемые компоненты, но это делается через JavaScript и требует загрузчика модулей и упаковщика, таких как Webpack..

Все сказанное и сделано, Tailwind – это поляризационный, поразительно новый способ создания стилей, и он понравится тем, кто жаждет большей простоты и контроля..

Saas

Хотя пререкаться был в течение долгого времени, я включил его сюда, потому что разработчики до сих пор не знают, насколько это полезно. Стилистически удивительные таблицы стилей (или SASS) – это расширенный набор CSS, который был разработан, чтобы укротить безумие, проникающее в проект, когда CSS выходит за рамки нескольких строк..

Представьте себе: вы прошли долгий путь написания CSS для вашего проекта. Вы используете несколько цветов, вычислили разумные поля для различных элементов div, стилей шрифта и так далее. За исключением того, что теперь ты понимаешь, что не все хорошо складывается. Может быть, вы хотите попробовать увеличить поля для всех разделов, карточек и кнопок. Ну а теперь что? Даже самой идеи поиска и замены в вашем гигантском файле CSS достаточно, чтобы вызвать одну головную боль. Мы все это сделали, и мы все знаем, насколько это подвержено ошибкам. Sass решает эту проблему путем введения переменных:

Когда мы пишем HTML, мы вкладываем элементы в другие элементы. Но при написании CSS мы должны написать плоскую иерархию правил, которая затрудняет умственное «встраивание» CSS в HTML. С Sass вы можете имитировать структуру страницы в ваших файлах стилей:

Все это даже не начинает царапать поверхность лакомств, которые предлагает Sass: модульный дизайн, включающие файлы, миксины, наследование. , , У этого списка нет конца. Конечно, вам нужно изучить рабочий процесс компилятора Sass и включить его в свой, но, по моему мнению, эти пару часов потрачены на инвестиции, которые будут платить вам снова и снова.!

CSS Linters

Поскольку веб-дизайнеры (и разработчики пользовательского интерфейса – хотя мне интересно, как эти два термина отличаются друг от друга) используют простые текстовые редакторы – или, как в наши дни, код прямо из инструментов разработчика Chrome – они редко получают возможность услышать или получить пользу от ЛИНТЕР. С другой стороны, программисты, которые используют хорошие текстовые редакторы, такие как VS Code, Sublime Text или другие IDE, хорошо знают этот инструмент, поскольку он для них второй характер. В любом случае, суть в том, что если вы один из тех разработчиков CSS, которые утонули в грязном CSS, вы могли бы извлечь выгоду из.

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

Но вот лучшая часть – если вы следуете определенному стилю и форматированию CSS, вы можете настроить линтер к своему удовлетворению. Это гарантирует, что CSS в проекте следует тому же руководству по стилю (линтер также может быть настроен на автоматическое форматирование файла при каждом сохранении / подтверждении исходного кода). Итак, работаете ли вы в команде или в одиночку, линтер всегда является отличным дополнением к рабочему процессу вашего проекта..

Вывод

Я уверен, что к настоящему времени вы убеждены, что современная разработка CSS далека от подхода скотоводства прошлого. ��

Тем не менее, я допущу кое-что еще раз, даже если я буду звучать как неработающая запись: некоторые инструменты, о которых я рассказывал в этой статье, нелегко настроить, особенно если вы не дружите с экосистемой npm , Но прежде чем почувствовать отвращение и отвернуться, скажите мне: CSS был легким, когда вы были первым обучение Это? Было ли легко научиться центрировать div, справляться с перепадом настроения и т. Д.? Точно так же инструменты, которые я описал здесь, имеют некоторую кривую обучения, но они того стоят.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map