Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Понимание CSS-статистики: как максимально использовать числа

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Svetlana (you can also view the original English article)

Если вы не заметили, сайт CSS-анализа cssstats.com недавно получил капитальный ремонт. Это прекрасно разработанный инструмент, который дает вам много объективного понимания вашего кода, но как вы можете наилучшим образом использовать статистику CSS? Что вы должны стрелять? Что они имеют в виду, и как вы можете использовать их изо дня в день?

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

Краткое руководство по CSS-статистике

Перейдите на cssstats.com, введите либо URL вашего сайта, либо его таблицу стилей, либо вставьте необработанный CSS прямо в текстовую область внизу и нажмите «Перейти».

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

Вот что дает вам CSS Stats, теперь давайте посмотрим, что мы можем сделать со всеми данными.

Сосредоточимся на Ремонтопригодности

Как передовые разработчики, мы постоянно заботимся о производительности и удобстве пользователей. Мы также несем ответственность за создание программного обеспечения, но слово «программное обеспечение» чуждо многим разработчикам внешнего интерфейса, которые имеют опыт проектирования. Часто легко игнорировать лучшие практики, когда мы кодируем наш CSS.

Однако правда в том, что разработка интерфейса, как и любая другая разработка программного обеспечения, требует сосредоточения на передовых методах. Правила лучших практик широко обсуждаются в Интернете, но ради этой статьи мы собираемся отточить, что, пожалуй, является наиболее важной практикой в ​​отношении CSS: удобство сопровождения.

Поддерживаемость CSS концентрируется на многих аспектах.

  • Насколько легко вы можете разработать конкретный модуль?
  • Насколько легко вы можете создать модифицированную версию этого модуля?
  • Может ли новый разработчик всесторонне понять системы, которые использует ваш CSS?
  • Является ли ваш CSS предсказуемым, последовательным и организованным?
  • Вы полагаетесь на препроцессор (или другой инструмент), чтобы сделать разработку и сегментацию более гибкими?
  • Вы часто повторяетесь?
  • Используете ли вы ранее установленные соглашения об именах и стилях?

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

Итак, что эти статистические данные говорят вам о ремонтопригодности?

Честный ответ? Ничего, нет обязательного. Вы ничего не узнаете об удобстве обслуживания, просто взглянув на статистику CSS. Вы также должны понимать контекст этого конкретного CSS, а также контекст активной разработки.

Первый способ проанализировать вашу статистику CSS - это найти признаки раздувания CSS.

Раздувание

Под раздуванием мы подразумеваем неиспользуемый, избыточный или иным образом ненужный CSS.

Какой масштаб сайта загружает CSS?

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

Если вы видите огромное количество селекторов (например, если ваш простой одностраничный сайт включает в себя столько же CSS, сколько веб-фреймворк, такой как Bootstrap, который имеет чуть менее 2400 селекторов), вероятно, вы где-то ошиблись , Если вы загружаете 30 шрифтов, а ваш дизайн требует 10, вероятно, у вас есть неиспользованные, раздутые стили или, возможно, несовместимые стили.

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

Какие типы страниц загружает сайт?

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

medium font size
Medium.com где-то использует шрифт размером 301 пикселей.

Однако, если вы создаете что-то вроде, например, блога с ограниченной цветовой схемой, ваша статистика CSS должна отражать этот выбор цвета и количество объявлений шрифта.

Избыточность между правилами

Вы определяете один и тот же размер шрифта двадцать раз по всему CSS? Очень часто этого можно избежать и, как правило, является результатом отсутствия планирования. Если вы определите размеры шрифта до написания любого другого CSS-кода, вам будет проще применять эти размеры в остальной части системы.

То же самое верно для любого повторного стиля; если вы обнаружите, что пишете одно и то же несколько раз, возможно, этот набор стилей заслуживает своего собственного презентационного или семантического класса или другого модульного определения?

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

Скажем, вы хотите синий вариант той же кнопки. Как вы должны определить это? Если вы переопределите тот же класс btn, он будет выглядеть примерно так:

Конечно есть много проблем с этим. Во-первых, это нарушает принцип СУХОЙ (не повторяйся). Но почему это важно? Ремонтопригодность. Скажем, например, что дизайн меняется и требует меньшего шрифта на кнопках. Затем вам нужно перейти к классам .btn и .btn-blue, чтобы изменить размер шрифта. Еще большее осложнение возникает, когда вам нужны варианты с синими и обычными серыми кнопками, например, версия с синим контуром. Все ваши изменения любой кнопки должны быть сделаны для многих кнопок.

Это невероятно неэффективно. Вместо этого вам следует воспользоваться тем, что классы являются модульными, и позволить вам определять стили кнопок, которые расширяют ваш базовый класс .btn.

Ага! И теперь у нас есть гораздо более удобное решение, которое также удаляет значительное количество строк CSS и следует принципу СУХОЙ.

Специфика

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

BBC specificity
Специфика CSS от веб-сайт BBC

Этот график показывает специфику селекторов в том виде, в каком они встречаются в CSS из bbc.co.uk. Представьте, что слева от графика находится верхняя часть таблицы стилей, а затем он перемещается вдоль оси x, когда читает таблицу стилей. Чем конкретнее правило, тем выше синяя линия на оси y.

Специфика правила большого пальца

Для начала мы дадим три общих практических правила, а затем объясним правила.

  1. Переходите от менее конкретного к более конкретному
  2. Стрелять для минимально возможной средней специфичности
  3. Уменьшения пиков в диаграмме

Мы поговорим о каждом из них более подробно, но сначала давайте немного поговорим о том, как работает специфичность.

Селекторам CSS присваивается показатель специфичности, чтобы сообщить движку рендеринга браузера, какие правила применяются к каким элементам. Причина, по которой это необходимо, также является причиной того, что CSS настолько мощен: стили могут наследоваться и каскадироваться в CSS. Это означает, что вы можете применять более одного набора стилей к любому данному элементу. Механизм рендеринга должен объединить все эти правила и представить что-то, но что произойдет, если для одного и того же объявления стиля установлены два разных значения? Например:

Когда движок CSS встречает <a> тег с классом кнопки, он должен определить, должен ли атрибут цвета быть #fff, # 000 или браузером по умолчанию. Специфика CSS - это набор правил, который браузер использует для этого определения.

Очки

Итак, как работает специфика? Используйте эту систему оценки в качестве руководства, взятого непосредственно из CSS Tricks:

  • Селекторы элементов и псевдоэлементы получают 1 балл.
  • Селекторы классов и псевдо-классы получают 1,0 балла.
  • Идентификаторы селекторов получают 1,0,0 балла.
  • Встроенные стили получают 1,0,0,0 балла.
  • ! важный превосходит их всех
  • * отборщики получают счет специфики всего 0 балов.

Обратите внимание, что в этой системе оценки, когда что-то превышает 10, оно не попадает в следующий столбец, поэтому, например, если бы у вас был селектор длиной 11 элементов, он бы не стал специфичностью 0, 0,1,1. Это вместо этого было бы 0,0,0,11.

Вот некоторые отборщики и их получающиеся очки.

Хорошо - теперь, когда у нас есть основная краткая информация из пути к специфике CSS, как это должно влиять на наш кодекс? Давайте вернемся к нашим трем эмпирическим правилам для специфики CSS.

# 1 Переход от менее конкретного к более конкретному

По сути, это правило гласит, что общие селекторы должны быть в начале вашего CSS, а более конкретные селекторы должны появиться позже в вашем CSS. Причин для этого правила много.

Во-первых, размещение общих правил в начале вашего приложения обычно устанавливает этап в вашем коде для создания основных модулей. В сочетании с # 2 наличие наименее специфичных стилей в начале гарантирует, что вы пишете с наименьшей возможной специфичностью. Позже, по мере развития вашего кода, добавление более специфических стилей может стать необходимым для переопределения или расширения предыдущих стилей.

apple css specificity
Стили на веб-сайте Apple в большой степени конкретны вначале в таблице стилей
pure css specificity
Специфика Чистой структуры CSS обычно увеличивается к концу таблицы стилей

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

Эта практика гарантирует, что последующая разработка того же проекта может быстро понять каскадную систему.

Стрелять # 2 для минимально возможной средней специфичности

Если вы долгое время были разработчиком внешнего интерфейса, вы, вероятно, испытали «войну специфичности CSS». Вы пишете селектор и несколько правил, а затем обновляете браузер только для того, чтобы найти, что изменения не были применены. Из прошлых проектов или разговоров о специфике вы знаете, что причина в том, что ваш селектор недостаточно конкретен, поэтому вместо того, чтобы пытаться отследить проблему до слишком специфичного селектора, вы решаете сделать новый селектор более конкретным. Вы добавляете один или два идентификатора, и если это не помогает, просто бросьте!impotant И, вуаля - ваши стили появляются.

Этот подход работает, технически говоря; но, к сожалению, всякий раз, когда вы хотите расширить этот стиль, вы должны продолжать увеличивать сложность, и, прежде чем вы узнаете об этом, ваши селекторы чрезвычайно специфичны, и вам придется повторять код, а не просто повторно использовать классы. Кроме того, почти невозможно точно определить, какой уровень специфичности должны иметь новые стили, не добавляя все больше идентификаторов и! Важных объявлений.

Сохранение ваших селекторов менее конкретным - гораздо более разумный, более понятный способ обработки вашего CSS.

Несколько профессиональных советов:

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

# 3 Уменьшите пики на вашем графике

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

Заключение

Статистика CSS может дать вам представление о том, как написан ваш CSS, но это полезно, только если у вас есть представление о том, как должна выглядеть эта статистика, прежде чем пытаться ее проанализировать. Это означает глубокое контекстное понимание того, как написан ваш CSS и почему. Если ваш CSS поддерживается и подходит для сайта, на котором он используется, статистика этого CSS не является достаточной причиной для рефакторинга вашего кода.

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

Дальнейшее чтение

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.