От автора: недавно W3C анонсировали Cascading Style Sheets (CSS) snapshot – документ, «вобравший в себя все спецификации, которые формируют каскадные таблицы стилей в 2015 году. Основная аудитория это 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, но больше полагаться на специальные инструменты из-за минификации файлов. Другим примером послужит использования полноценных фреймворков типа Bootstrap и покупка тем для быстрого поднятия сайтов. Также можно просто воспользоваться готовым файлом стилей W3.CSS и получить полный набор адаптивных стилей. Необходимо четко понять, что использовать. И зависимость от технологий должна помогать развитию проекта, а не вредить ему.
Заключение
У CSS есть своя история, технология широко используется на данный момент. У данной технологии светлое будущее. Пока есть проблемы с CSS, данная технология будет оставаться основной для стилизации веб-страниц. Основная тема статьи это роль CSS в современном мире. В будущих статьях серии «Изучение CSS» будут описаны наилучшие практики, лучшие советы и более подробное описание расширений и фреймворков!
Автор: Michael Palermo
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.