15kb CSS — это все, что вам понадобится

15kb CSS — это все, что вам понадобится

От автора: я привлек ваше внимание красивым заголовком, буду и дальше испытывать ваше терпение. Сегодня мы поговорим о функциональном CSS. На эту тему есть совершенно противоположные мнения.

Я нашел два преимущества использования функционального CSS:

Размер CSS файлов намного меньше (быстрее загрузка = счастливые пользователи). Тема нашей статьи.

UI разработка в браузере проходит намного быстрее (работаешь быстрее = счастливые коллеги и начальник). По этой теме я напишу отдельный пост.

Я использовал функциональный CSS несколько месяцев и понял, что это самая крутая вещь. Это похоже на прямые манипуляции в браузере, что очень круто. Однако я не буду писать о том, как функциональный CSS улучшил мой рабочий процесс. Я расскажу про преимущества в производительности:

15kb CSS — это все, что вам понадобится

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

Который можно повторно использовать только один раз. Подумайте, сколько раз можно повторно использовать класс ниже:

Семантические классы в 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)