От автора: я привлек ваше внимание красивым заголовком, буду и дальше испытывать ваше терпение. Сегодня мы поговорим о функциональном CSS. На эту тему есть совершенно противоположные мнения.
Я нашел два преимущества использования функционального CSS:
Размер CSS файлов намного меньше (быстрее загрузка = счастливые пользователи). Тема нашей статьи.
UI разработка в браузере проходит намного быстрее (работаешь быстрее = счастливые коллеги и начальник). По этой теме я напишу отдельный пост.
Я использовал функциональный CSS несколько месяцев и понял, что это самая крутая вещь. Это похоже на прямые манипуляции в браузере, что очень круто. Однако я не буду писать о том, как функциональный CSS улучшил мой рабочий процесс. Я расскажу про преимущества в производительности:
Любой интерфейс можно создать с 15Кб CSS? Уверены? Ага. У классов в функциональном CSS одна цель или задача, что позволяет использовать их повторно бесконечное число раз. В отличие от следующего класса:
1 2 3 4 5 6 |
.card { display: block; border: 1px solid #999; padding: 1.5rem; margin-bottom: 1rem; } |
Который можно повторно использовать только один раз. Подумайте, сколько раз можно повторно использовать класс ниже:
1 2 3 |
.tc { text-align: center; } |
Семантические классы в CSS приводят к тому, что вам постоянно придется писать новый CSS код. CSS код будет расти постоянно. Функциональный CSS же позволяет написать весь CSS код и остановиться на этом. Если все сделать по-умному, то файл не превысит 15Кб. В идеале вы дизайнер, и эти стили полностью совпадают с вашим дизайном/библиотекой шаблонов. Если нет, то вы разработчик, который близко работает с дизайнером для создания всех CSS классов.
Почему я сказал «CSS – это дизайн». Почти все, что вы создаете в CSS , так или иначе, относится к пользовательскому интерфейсу:
типографика;
система сеток (если используется);
цвета;
margin’ы и padding’и;
и т.д…
CSS – словарь в библиотеке вашего дизайна.
Может быть, то, что они называются CSS классы, сбило нас с пути. Класс в CSS имеет мало общего с классом в ООП языках. Недавно я услышал такую фразу «вы не присваиваете класс к элементу, вы пишите стили для него». Оттолкнусь от этого.
CSS – это просто
С помощью CSS можно что-нибудь покрасить в синий цвет. Или увеличить текст. Или добавить светло-серый фон к каждому второму элементу. Или прятать блок текста на маленьких экранах. Все просто, не будем усложнять.
«Хорошо, Филипп, я понял, что ты сказал. В этом есть смысл. Но зачем заморачиваться из-за 300Кб CSS? Это разве много?» Да, много. На 3G соединении 300Кб загрузятся за 10 секунд, на 4G – за 2 секунды. Это просто CSS, не контент, скрипт, изображения, шрифты и т.д. Большинству из нас, особенно технарям, повезло с быстрым интернетом. Перед тем как называть свое приложение быстрым, проверьте его на 3G соединении в Chrome через панель разработчика. На самом деле, попробуйте. Производительность имеет значение. Теперь ваш CSS загружается не так легко.
В веб-разработке с CSS связана серьезная проблема (о которой я расскажу в отдельной статье). Изменение части UI не должно занимать целый день из-за того, что работа с CSS – просто кошмар. Из моего личного опыта работы несколько месяцев с функциональным CSS скажу, что он решает эту проблему.
Сперва пользователь
Все мы создаем продукты для пользователей. Если наш умный Sass или LESS генерирует нам CSS файл весом 300Кб после минификации и сжатия, значит, мы усложнили что-то и заставляем пользователя страдать.
Попробуйте
Пользователи получат лучший опыт от работы с сайтом, и осмелюсь сказать, вы сами улучшите свой рабочий процесс с CSS. Это большой ментальный сдвиг. Но он произойдет только, когда вы начнете использовать функциональный CSS и поймете, насколько с ним легко работать.
Автор: Philip Ardeljan
Источник: //medium.com/
Редакция: Команда webformyself.
Комментарии (2)