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

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

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

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

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

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

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

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

.card {
  display: block;
  border: 1px solid #999;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

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

.tc {
  text-align: center;
}

Семантические классы в CSS приводят к тому, что вам постоянно придется писать новый CSS код. CSS код будет расти постоянно. Функциональный CSS же позволяет написать весь CSS код и остановиться на этом. Если все сделать по-умному, то файл не превысит 15Кб. В идеале вы дизайнер, и эти стили полностью совпадают с вашим дизайном/библиотекой шаблонов. Если нет, то вы разработчик, который близко работает с дизайнером для создания всех CSS классов.

Почему я сказал «CSS – это дизайн». Почти все, что вы создаете в CSS , так или иначе, относится к пользовательскому интерфейсу:

типографика;

система сеток (если используется);

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее

цвета;

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

Источник: https://medium.com/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Анастасия

    Специально вбила в яндексе, что такое функциональный CSS….. он не знает, что это такое! Все, о чем понятно в статье — это то, что есть некий полезный и уменьшающий CSS код под названием «функциональный CSS» и все. Но у меня это влезло на 1,5 строки, а прочесть мне пришлось до этого целую статью с сохраненной англоязычной стилистикой, которая каждый раз значительно тормозит понимание написанного. Не знаю, может мне только…. но как человеку, учащемуся у вас, хотелось бы более короткой и понятной формы преподнесения материала. А то прочтешь статью и думаешь, надо ли мне было вообще ее читать…?

  2. Анастасия

    жалко только потраченного времени.
    Уж извините, что в 2 сообщениях это написала.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree