15kb CSS — це все, що вам знадобиться

31

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

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

Розмір CSS файлів набагато менше (швидше завантаження = щасливі користувачі). Тема нашої статті.

UI розробка в браузері проходить набагато швидше (працюєш швидше = щасливі колеги і начальник). Щодо цієї теми я напишу окремий пост.

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

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

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

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

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

.tc {
text-align: center;
}

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

Чому я сказав «CSS – це дизайн». Майже все, що ви створюєте в CSS , так чи інакше, належить до інтерфейсу користувача:

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

система сіток (якщо використовується);

кольору;

магдіп’и і 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 і зрозумієте, наскільки з ним легко працювати.