Доклад по CSS за 2014 год: Проверка использования CSS в «полевых условиях»

Автор оригинала: Alex McPherson
  • Перевод
CSS – это инструмент, при помощи которого HTML превращается в полностью сверстанную страницу. CSS – это язык, полный странностей и непредсказуемых поворотов, и поэтому чаще всего создание таблиц стилей представляет собой наименее любимую работу для разработчика. В течение последних нескольких лет наблюдалось значительное повышение в количестве программных оболочек и инструментов, позволяющих облегчить написание CSS и уменьшить вероятность ошибок. SASS и LESS правят бал в сфере предварительной обработки, а такие оболочки, как Bootstrap, Foundation, Bourbon, Susy, и Unsemantic (а также множество других) используются для ускорения получения сверстанной страницы.

Браузеры также изменяются, так что многие современные версии браузеров более не требуют префикса поставщика для правил CSS3. То, что несколько лет назад было передовой методикой, теперь уже не требуется, смотря, конечно, какие браузеры поддерживает ваш веб-сайт. В ходе нашего исследования мы загрузили CSS-файлы более чем с 8 000 доменов, и собрали некоторые данные о написании и использовании CSS. Я думаю, что это может быть полезным для дальнейшего развития дискуссии об организации, осмыслении и управлении крупными CSS-проектами, а также позволит наблюдать за развитием Сети.

Методология

Я хотел сделать широкий «срез» интернета, включающий сайты, созданные большими командами разработчиков и с долгим сроком службы, а также новейшие свойства, создаваемые любителями-энтузиастами.

Список изучаемых мной доменов возглавили топ-1000 сайтов по версии Alexa, представляющих собой выборку «популярных» и «крупных» сайтов. Они предоставляют отчет о миллионе сайтов с наибольшим месячным трафиком, так что я просто выбрал первую 1 000 из них.

Для того чтобы заполнить остальную часть списка изучаемых доменов, я выбрал произвольные сайты из списка рассылки Quick Left, представляющего собой смешение прошлых и потенциальных клиентов, сотрудников, поклонников и прочего народу со всего мира. Сначала я хотел сделать произвольную выборку из Топ-1 000 000 сайтов Alexa, однако даже этот список включает только крупнейшие сайты, что приблизительно составляет 271 миллионов зарегистрированных по всему миру доменов, так что наш список рассылки, я надеюсь, представляет собой лучшую выборку, которая может включать MVP, персональные странички и другие «бессвязные» веб-свойства.

Окончательный список составил 10 400 доменов, представляя собой, грубо говоря, репрезентативную выборку интернета. Я загрузил с этих сайтов все CSS-файлы, на которые ссылается главная страница:

cat domains.txt | xargs -I % wget http://% -r -A '*.css*' -H --follow-tags=link


Этот процесс собрал всего около 28 000 CSS-файлов с тех 10 400 доменов. Потом их прогнали через модуль синтаксического анализа СSS, что позволило мне сохранить более 8,7 миллионов записей селекторов, свойств и значений (к примеру, span.important, font-weight, bold). Они были сохранены в Postgres и подвергнуты глубокой индексации для дальнейшего исследования.

Сводные данные

img


Распределение используемых свойств CSS приблизительно соответствует стандартному распределению Парето. Выяснилось, что необычные свойства используются крайне редко, и изучение первых 50, или около того, свойств должно быть первоочередной задачей любого начинающего разработчика.

Также было крайне любопытно узнать количество опечаток и недействительных правил. Удивительно, но эти правила были набраны, (вероятнее всего) проверены, оказалось, что в браузере они не работают, но их все равно оставили в таблицах стилей и внесли в готовый продукт. Больше всего мне понравились опечатки bototm, foat и heith.

Селекторы

img


Распределение длины селектора

img


Селекторы CSS в большинстве своем кратки, с немногочисленными достойными упоминания исключениями. Краткость селекторов в большинстве случаев считается положительным свойством, так как общее расположение элемента должно состоять из нескольких правил, относящихся к одному элементу. Такие системы, как BEM, приводили этому обоснование. В общем случае длинные и нераспространенные селекторы препятствуют повторному использованию, а многоразовый набор стилей считается стандартной конечной целью использования CSS.

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

Постоянное улучшение

Использование префиксов
img


Префиксы поставщика ПО для современных, самостоятельно обновляющихся браузеров более не требуются. Хорошая новость – для всех свойств CSS3 исходная форма используется намного чаще, чем любой из префиксов. Префиксы -webkit и -moz преобладают над -o и -ms со значительным отрывом.

Многие IDE, оболочки CSS и веб-сайты генерируют наборы правил с уже включенными префиксами. Разработчики могут попытаться избавиться от этого лишнего веса (в зависимости от аудитории), а адаптация под браузер – это не тот случай, когда по привычке следует добавлять префиксы. При помощи CanIUse создайте перекрестную ссылку на Google Analytics для вашего сайта, чтобы определить, имеет ли это смысл для вашей аудитории.

Я видел множество случаев поддержки старых версий IE, на что указывали хаки * и _. Это инструменты, позволяющие написать код, который могут читать только определенные версии Internet Explorer. Известная в интернете личность, Пол Айриш, пропагандировал альтернативы использованию хаков в браузере в далеком 2008 году, а метод, одобренный Microsoft, заключается в использовании условных комментариев для включения отдельных или вспомогательных таблиц стилей для соответствующих браузеров. Однако в спешке проще пропустить такие подходы, поэтому хаки-звездочки и хаки-подчеркивания все же преобладают.

Цвета

НАИБОЛЕЕ РАСПРОСТРАНЕННЫЕ ЦВЕТА

img


Цветовое пространство, предлагаемое шестнадцатеричными кодами, представляет собой 166 цветов, и наиболее распространенные цвета, скорее всего, будут находиться среди оттенков серого, когда R == G == B. Оттенки серого могут относиться к цвету текста, цвету границ, различным теням диалоговых окон. Фирменные цвета чаще всего уникальны для каждого сайта, и я не ожидал увидеть другие цвета, кроме оттенков серого, в топ-10.

Объяснением того, что в первую десятку попал синий, может служить тот факт, что до середины ноября 2014 года значение #428BCA соответствовало переменной $brand-primary в Bootstrap, которая впоследствии использовалась во всем проекте. Это указывает на популярность данной программной оболочки.

img


В среднем, файл имеет 169 заявленных цветов. Для каждой страницы загружалось по нескольку файлов, и изобилие цветов демонстрирует отсутствие единообразной политики в области стиля или использования цветовых переменных для сохранения постоянства цветовой темы сайта.

Единицы измерения

img


Существует огромный выбор вариантов, доступных при задании размерных свойств в CSS. У каждой единицы измерения имеются свои преимущества и недостатки: некоторые лучше подстраиваются под отзывчивый дизайн, другие гарантируют масштабирование при печати. Знакомые и широко известные «абсолютные» (px) и «относительные» (%) преобладают по количеству случаев использования. Следует отметить, что поддержка браузера для более экзотических единиц измерения не так широко распространена.

Текст и шрифты

Наличие установленного набора шрифтов позволяет сайту создавать впечатление единообразного и понятного. Шрифт вносит свой вклад в иерархию дизайна и в способность пользователя прочесть содержимое. Средний домен имеет 31 заявленный различный размер шрифта во всех таблицах стилей.

Количество размеров шрифтов

img


Количество размеров шрифтов на один домен значительно колеблется. Невозможно вычислить, сколько шрифтов было использовано на главной странице или сколько было припрятано в закромах приложения для особых случаев. Некоторые прекрасно выглядящие сайты используют в общей сложности до 20 шрифтов для своих страниц. Я считаю, что лучше не гнаться за количеством размеров шрифтов. Это создает впечатление сильного, единообразного дизайна, а также облегчает сотрудничество между дизайнерами и разработчиками.

Отзывчивый дизайн

Отзывчивый дизайн был впервые представлен в 2010 году Этаном Мэркоттом и вихрем пронесся по сети, оставив около 64% сайтов, очищенных за счет использования своего рода медиа-запросов в CSS. Контент должен подстраиваться под размер экрана, на котором он будет отображаться, и на то, будет ли он отображаться на мобильном или стационарном устройстве.

Медиа-запросы стали доступными начиная с IE9, и они позволяют настроить стили в соответствии с определенными размерами экрана, его ориентацией, соотношением высоты к ширине, позволяя отзывчивому дизайну проявить все свои преимущества.

Наиболее часто встречающиеся медиа-запросы – это max- или min-width, составляющие 89% всех медиа-запросов. Ниже представлены наиболее распространенные значения ширины, на которые разработчики заставляют реагировать свои стили:

img


Кривая в области точки 990 px шире других, в нее входят также множество других значений: 960, 970, 980, и 990, 992, 1000 и 1024 px. Прочие области на кривой, обозначенные при помощи зеленых линий, намного уже, что показывает меньший разброс значений относительно контрольных точек при такой ширине.

Точки, которые люди выбирают в качестве контрольных, указывают на то, от каких коэффициентов формы они хотят отталкиваться. Наблюдается растущее разграничение устройств на т.н. «телефоны», «планшеты» и «настольные ПК». В частности, текущие контрольные точки Bootstrap, используемые по умолчанию, составляют 768, 992, и 1200. Здесь приведены некоторые значения ширины экранов устройств.

Фреймворки

img


Определить используемую программную среду было непросто. Для получения значений я использовал комбинацию поиска по именам файлов, комментариям (часто оставляемым добропорядочными минимизаторами) и уникальным классам. Это наименее точно составленная таблица в этом докладе, однако она показывает, что Bootstrap с сильным отрывом лидирует в сердцах и умах разработчиков. Лишь около 10% из общего числа исследуемых доменов имели определяемую программную среду.

Дополнительные ресурсы

Загрузка дополнительных ресурсов также может быть определена в CSS, обычно это относится к определению фонового рисунка (background-image). Ниже представлены наиболее распространенные форматы файлов, которые мы определили в нашем исследовании. Всего было исследовано около 59800 объектов.

img


Такие результаты – хороший признак, так как расширение .png в целом рекомендовано для не фотографических картинок в сети. Такие файлы имеют альфа-непрозрачность, хороший коэффициент сжатия и широкую поддержку браузеров. Я уверен, что файлы .jpg более распространены в сети, чем указано здесь, но они чаще используются как атрибуты src в тегах , а не в CSS.

Разное

ГРОМАДНЫЙ Z-INDEX

Самый высокий z-index составил невообразимое число, 999999999999999999999999999, или 9,99e26. С установленным по умолчанию значением повторений клавиши для OS X, набор этого числа займет 3 секунды непрерывного удерживания клавиши 9. Если взять такое количество листов бумаги толщиной 0,05 мм, высота получившейся стопки составит расстояние, в 10 триллионов раз превышающее расстояние от Земли до Солнца. Самое плохое, что такой большой объявленный z-index вызовет переполнение, и ни за что не будет работать так, как ожидается. Самое низкое обнаруженное значение более обосновано – -999999.

ИМЕНА ЦВЕТОВ В CSS

Перечисленные ниже имена цветов в CSS встречались только по одному разу: antiquewhite, azure, olive, bisque, aliceblue, lightsteelblue, blueviolet, firebrick, lightskyblue, lightseagreen, darkorange, seashell, ghostwhite, papayawhip, cornsilk, navajowhite. Мой любимый цвет – papayawhip, восхитительный оранжево-бежевый.

Выводы

После анализа данных, я смог сделать следующие общие выводы:

1. Люди не слишком заботятся о своих CSS

2. Хорошо выполненные таблицы стилей могут решить множество распространенных проблем

3. Современные функции CSS широко используются

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

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

PAYSTO
38,17
Компания
Поделиться публикацией

Комментарии 11

    –21
    «CSS это язык» — CSS это не язык.
      +2
      CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

      wikipedia ©
        –16
        Умняша. Читай и дальше википедию.
          +2
          Ну ладно, если Вам неймется, можно так:
          www.w3.org/standards/webdesign/htmlcss

          CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.

          Или это тоже не достаточно достоверный источник?:)
            0
            достаточно. просто настроения не было, хотелось, как говаривал Вовочка, «насрать на весь мир» :)
        +8
        Русский это тоже не язык. Не язык программирования.
          –5
          Кэп, вы с нами :) Минусуйте, ребятушки! Я сюда именно для этого пришел! Бо-ха-ха!!!
        0
        > Селекторы
        А вы учитывали, что псевдо-элементы вполне могли писаться как псевдо-селекторы?

        > Цвета
        Белый и чёрный — не показательно. Лучше бы их убрали — интересно былы бы посмотреть, что будет вместо них.

        > Цвета, представление
        А как же HSV?

        В целом не особенно интересно, поскольку всё больше сводится к одной таблице популярности фреймворка. Было бы интересно посмотреть на статистические данные тех систем, которые не используют стили фреймворков.

        EDIT: Заметил, что перевод, так что вопросы по большей части снимаются.
          +1
          Хоть и перевод, попробую ответить на часть вопросов:
          — Селекторы:
          Скорее всего, этот тип не учитывался;

          — Цвета:
          Собственно, задача автора сводилась к анализу свойств, заявленных разработчиками и именно их автор привел;

          — HSV:
          Очевидно, среди данной выборки сайтов эта модель не использовалась или использовалась крайне редко;

          В целом не особенно интересно, поскольку всё больше сводится к одной таблице популярности фреймворка. Было бы интересно посмотреть на статистические данные тех систем, которые не используют стили фреймворков.

          Если Вы обратите внимание на общее количество сайтов в этой таблице, то заметите, что она охватывает далеко не всю выборку. Сайтов, сделанных с использованием фреймворков около 1174 (хотя автор уточнил, что эти данные могут быть несколько неверными), всего в выборке 10400 сайтов. Возможно Вас сбило, что удельный вес каждой среды считался относительно сайтов, созданных с помощью фреймворка, а не ко всей выборке.
            0
            > Очевидно, среди данной выборки сайтов эта модель не использовалась или использовалась крайне редко;
            Неочевидно, поскольку в таблице единиц измерения приведены и те, которые использовались 0 раз.

            > Сайтов, сделанных с использованием фреймворков около 1174 (хотя автор уточнил, что эти данные могут быть несколько неверными), всего в выборке 10400 сайтов. Возможно Вас сбило, что удельный вес каждой среды считался относительно сайтов, созданных с помощью фреймворка, а не ко всей выборке.
            Если посмотреть хотя бы на синий цвет в топе цветов, то мне кажется он мог попасть туда при очень большом проценте бутстрапа среди общего кол-ва сайтов. Допустим, процент бутстрапа 20% (что, кстати, я думаю можно было бы уточнить по ключевым стилям фреймворка, а не только по наличию комментария в шапке файлов), что уже довольно значительно, плюс остальные фреймворки, указанные и неуказанные, пусть в сумме ~40%. Это, можно сказать, составляет больше половины топовых значений в результате (по весу css кода). Тогда это 1. сравнение использования фреймворков и 2. анализ CSS авторов фреймворков, что само по себе не особенно интересно.

            Но за перевод — спасибо :)
          +6
          Пожалуйста, не публикуйте данные в виде картинок, даже если таблицы на Хабре выглядят не очень красиво. Почему? Потому, что это данные, которые сразу становятся недоступными — в широком смысле и в узком (их просто не скопировать). А ещё потому, что на ретине я вижу мыло вместо текста, а даже не на ретине я вижу сглаживание Windows, к которому глаза очень непривычны. Спасибо.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое