CSS в сучасному світі

29

Від автора: нещодавно W3C анонсували Cascading Style Sheets (CSS) snapshot – документ, «увібрав в себе всі специфікації, які формують каскадні таблиці стилів у 2015 році. Основна аудиторія-це CSS виконавці, не автори. Це визначення включає в себе модулі стабілізації специфікації, а не швидкість підтримки в браузерах». Цей документ спонукав мене перевірити актуальність CSS на сьогоднішній день в сучасному співтоваристві веб-розробників, а також розглянути найкращі практики.

CSS в сучасному світі

Так як за минулі роки багато чого змінилося, я думаю, було б доцільно відобразити в документі сьогоднішнє становище CSS, а також поглянути в майбутнє цієї технології. Мого досвіду було не досить, так що я зайнявся дослідженнями і опитав експертів. Всієї тієї інформації, що я отримав, що вистачило на цілу книгу! Я вирішив, що серія онлайн статей по CSS набагато швидше дійде до споживачів і можу з гордістю представити вам першу статтю із серії «Вивчення CSS.

Чи актуальне CSS сьогодні?

Більшості веб-розробників сама постановка питання про актуальність CSS видасться дивною. Тим не менш, нові віяння в веб-розробці ставлять під питання технологію CSS. Настійно рекомендую прочитати статтю від Louis Lazaris, який говорить, що CSS живий і в доброму здоров’ї. Хоч більшість його статей пророкують CSS довге життя, він також не випустив з уваги популярністю React, JS бібліотека, додає инлайновые стилі. Також автори посилається на статтю, в якій ведуться спори А чи потрібен нам все ще CSS?. У статті він описує деякі больові точки розробників, які використовують CSS. Я навів ці статті, так як в них описані ті виклики, з якими зіткнулися розробники, а також, чому деякі з них вирішили скористатися іншими технологіями. Чи означає це, що настає захід CSS?

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

Які ж вагомі аргументи можна протиставити CSS? Обговорювати я їх тут не буду, але я радий, що навколо цієї теми ведеться бурхливі дискусії. Деякі з розробників вибирають альтернативні технології. Чому? Тому що нові виклики оздоровлюють співтовариство. Зрозумівши принцип роботи, можна розробити способи поліпшення технології. На мою скромну думку CSS в майбутньому буде формуватися під більшим тиском, ніж зараз.

Прості істини CSS

У нашому сучасному світі я думаю добре б взяти паузу і задатися питанням «Чому ми робимо те, що робимо?». Ставлячи це питання собі, чому я продовжую використовувати CSS, необхідно знайти виправдання. Нижче я склав список тверджень (не без чужої допомоги), додають вагу моєї позиції, чому я до сих пір використовую CSS для стилізації:

CSS дозволяє розділити відповідальність. CSS це додатковий мова стилів HTML, тобто стилі визначаються окремо від розмітки. Розмітку окремо від стилів легше читати і обслуговувати не тільки людям, але і пошуковикам.

CSS – швидкий. Швидкість проявляється у багатьох аспектах. Швидкість зміни стилів, сторінка з окремими стилями завантажується швидше, ніж з вбудованими. І, природно, анімація і плавні переходи на CSS набагато швидше обробляються, ніж JavaScript.

CSS – адаптивний. Технологія CSS це найкращий спосіб для перегляду сторінок на екранах з різними дозволами, а також з його допомогою можна задати стилі відображення сторінки при друці. Це лише пара прикладів.

У CSS велика аудиторія. По технології CSS написані маса книг, відео, статей і веб-сайтів. Кількість бібліотек, інструментів і фреймворків, що полегшують застосування CSS, тільки зростає.

CSS скрізь. Сучасні браузери використовують CSS по повній. Список властивостей, підтримуваних різними браузерами, можна знайти на таких сайтах, як CanIUse.com. Також CSS використовується для написання стилів для мобільних додатків на різних платформах, коли для запаковування використовуються інструменти типу ManifoldJS або Cordova.

Більш точну інформацію про підтримку тим чи іншим браузером певних властивостей можна отримати у розробників браузерів. Приміром, на сайті dev.modern.ie можна знайти таблицю підтримки властивостей в браузері Microsoft Edge.

CSS в сучасному світі

CSS Сьогодні

Існує безліч способів використання CSS. Немає ідеального методу, який задовольняє всіх сценаріїв, так як різні проекти відчувають різні потреби і обмеження. Щоб зрозуміти, яким методом скористатися, необхідно задати відповідні питання: Які властивості CSS потрібні? Які браузери будуть обслуговуватися? Скільки наймати розробників та з якими навичками? Важлива найвища швидкість відгуку?
Після відповіді на всі ці питання можна поглянути на відповідні методи. Відповідних методів маса, тому я розділю їх на два основних:

Ручне написання та обслуговування CSS. Простіше кажучи, розробник повністю несе відповідальність за всі аспекти CSS.
CSS з можливістю розширення/фреймворки. Розробники сильно залежать від різних розширень і фреймворків. Дані інструменти сильно впливають на минификацию і ефективність CSS. Існують різні розширення/фреймворки, і багато з них залежать один від одного.

Другий метод на сьогодні дуже популярний, але це не означає, що він скрізь підходить. Приміром, маленький сайт з передбачуваною аудиторією браузерів і пристроїв може бути сильно перевантажений зайвою інструментарієм CSS фреймворків – особливо якщо на сайті мало сторінок. Буде минификация файлів в такому разі обов’язковим виходом? Чи займе встановлення і вивчення фреймворку більше часу, ніж написання самого сайту? Може бути, все що потрібно, це вручну написати стилі для однієї сторінки.

Реальність така, що в більшій чи меншій мірі більшість сайтів пишуться за другим сценарієм. Наприклад, розробник може добре знати CSS, але більше покладатися на спеціальні інструменти з-за минификации файлів. Іншим прикладом послужить використання повноцінних фреймворків типу Bootstrap і покупка тим для швидкого підняття сайтів. Також можна просто скористатися готовим файлом стилів W3.CSS і отримати повний набір адаптивних стилів. Необхідно чітко зрозуміти, що використовувати. І залежність від технологій повинна допомагати розвитку проекту, а не шкодити йому.

Висновок

У CSS є своя історія, технологія широко використовується на даний момент. У даній технології світле майбутнє. Поки є проблеми з CSS, дана технологія буде залишатися основною для стилізації веб-сторінок. Основна тема статті-це роль CSS в сучасному світі. В майбутніх статтях серії «Вивчення CSS будуть описані найкращі практики, кращі поради і більш докладний опис розширень і фреймворків!