Псевдокласс :first-child | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/selector.html#first-child

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

Синтаксис

элемент:first-child { … }

Значения

Нет.

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www. w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>first-child</title>
  <style type="text/css">
    B:first-child {
     color: red; /* Красный цвет текста */
    }
  </style>
 </head>
 <body>
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
   consequat</b>.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .links { 
    background: #F6967D; /* Цвет фона */
   }
   .links a {
    color: #FFFDEB; /* Цвет ссылок */
    display: inline-block; /* Строчно-блочный элемент */
    border-left: 1px solid #B62025; /* Параметры рамки слева */
    padding: 5px 10px; /* Поля вокруг ссылок */
   }
   .links a:first-child {
    border-left: none; /* Убираем первую линию слева */
   }
  </style>
 </head>
 <body>
  <div>
    <a href="1.html">uno</a>
    <a href="2.
 
 html">dos</a>
    <a href="3.html">tres</a>
    <a href="4.html">cuatro</a>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Ссылки с линией слева

Псевдоклассы

CSS по теме

  • Псевдокласс :first-child

Статьи по теме

Статьи по теме

Рецепты CSS

Каскадные таблицы стилей CSS и методы их добавления

Цель урока: знакомство с каскадными таблицами стилей. На уроке рассмотрены методы добавления стилей к html-страницы

Содержание:

  • Повторение: блочные и строчные теги
  • CSS стили. Методы добавления
  • Метод встраивания (inline) в CSS
  • Метод вложения (embeding) CSS
  • Метод связывания (Linking) в CSS

Повторение: блочные и строчные теги

CSS стили. Методы добавления

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства html-тегам

Рассмотрим основные методы добавления стилей:

  • Встраивание (inline)
  • Вложение (embeding)
  • Связывание (linking)
  • Импорт

Метод встраивания (inline) в CSS

Метод встраивания (или строковый стиль) — это самый простой метод добавления стиля. Применяется в том случае, когда необходимо применить стиль только к одному единственному конкретному тегу и только один раз

 
Синтаксис:

<элемент  style = "свойство1: значение; свойство2: значение; . . .">;

 

Рассмотрим основные понятия, встречающиеся при использовании стилей.

Пример: Первый абзац без стилей, ко второму абзацу применен стиль

<p>Обычный текст</p>
<p>Абзац с методом встраивания</p>

Результат:

Обычный текст

Абзац с методом встраивания

Метод вложения (embeding) CSS

Метод вложения или внутренний стиль описывается в области head веб-страницы.

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

  • Итак, селектор — это формальное описание элемента (тега), или их группы, к которому должны быть применены созданные правила стиля.
  • В описании селекторов и имен стилей не должно быть пробелов.

    • Пример: в примере использован метод вложения, поэтому оба абзаца в документе будут стилизованы

    <head>
<style type="text/css">
  p{
	color:red;
	background:#cccccc;
  }
</style>
</head>
<body>
<p>Абзац1</p>
<p>Абзац2</p>
...

    Результат:

    Абзац1

    Абзац2

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

    Пример использования вложенного стиля для разных селекторов (тегов)

    <head>
<style type="text/css">
h2 {
	border-width: 1; 
	border: groove; 
	text-align: center; 
	color: green
	}
h3 {
	color: maroon; 
	font-style: italic
	}
body {
	background-color: #FF0000;
	}
. ..
</style>

    Метод связывания (Linking) в CSS

    Это самый надежный и самый эффективный способ использования каскадных таблиц стилей.

    Используется метод связывания

    (или внешний стиль) для того, чтобы обеспечить единый стиль для всех страниц сайта. Подключив файл со стилями ко всем страницам, обеспечится влияние правил, описанных в файле, на все теги

    Чтобы подключить к странице файл с таблицами стилей, надо использовать элемент LINK в секции HEAD:

    Задание css1_1.

    • Используя метод встраивания определите цвет текста элемента h2.
    • Используя метод вложения определите задний фон страницы.
    • Используя метод связывания определите написание параграфа курсивным стилем.

    Работайте над текстом:

    <body>
<h2>В моей душе</h2>
<p>
Я хочу быть ребенком, наивным и смелым,<br/>
Ничего не бояться и верить в добро.
     
     <br/>
Я бы снова писала по черному белым:<br/>
Два плюс два - ну, четыре, конечно равно! 
</p>

    Введение (Часть 1) — Smashing Magazine

    • 16 минут чтения
    • CSS, Рефакторинг
    • Поделиться в Twitter, LinkedIn
    Об авторе

    Адриан Бесе — полнофункциональный веб-разработчик с обширным опытом электронной коммерции. Ему нравится писать и рассказывать о новейших и лучших технологиях в Интернете… Больше о Adrian ↬

    Рефакторинг CSS — непростая задача. Его нужно выполнять так, чтобы не создавать проблем. Сначала нам нужно проанализировать существующую кодовую базу, проверить работоспособность кодовой базы CSS, обнаружить слабые места, согласовать подход и убедить руководство вкладывать время и ресурсы в процесс.

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

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

    Рефакторинг больших частей кода CSS — непростая задача по любым меркам. Иногда может показаться, что это просто случай «удаления некачественного кода, написания лучшего CSS и развертывания блестящего улучшенного кода». Однако необходимо учитывать множество других факторов, таких как сложность рефакторинга работающей кодовой базы, ожидаемая продолжительность и использование команды, установление целей рефакторинга, отслеживание эффективности и прогресса рефакторинга и т. д. Также необходимо убедить руководство или заинтересованные стороны проекта в том, чтобы инвестировать время и ресурсы в процесс рефакторинга.

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

    Часть: Рефакторинг CSS
    • Часть 1: Рефакторинг CSS: Введение
    • Часть 2: Рефакторинг CSS: стратегия, регрессионное тестирование и обслуживание
    • Часть 3: Рефакторинг CSS: оптимизация размера и производительности
    • Подпишитесь на нашу рассылку по электронной почте, чтобы не пропустить следующие.

    Побочные эффекты некачественного CSS

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

    На уровне команды большинство проблем с кодовой базой CSS обычно возникает из0015 различные уровни навыков и знания CSS, различные предпочтения и стили кода, непонимание структуры проекта и существующего кода и компонентов, отсутствие стандартов и руководств на уровне проекта или команды и так далее.

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

    • Снижение качества кода , так как добавляются дополнительные функции из-за разного уровня навыков CSS в команде разработчиков и отсутствия внутренних правил, соглашений и лучших практик.
    • Добавление новых функций или расширение существующих селекторов вызывает ошибок и неожиданных побочных эффектов в других частях кода (также известный как регрессия ).
    • Несколько разных селекторов CSS с дублированными блоками кода или кусками кода CSS можно разделить на новый селектор и расширить за счет вариаций.
    • Остатки неиспользуемых фрагментов кода удаленных функций . Команда разработчиков потеряла представление о том, какой код CSS используется, а какой можно безопасно удалить.
    • Несоответствие в файловой структуре, именовании классов CSS, общем качестве CSS и т. д.
    • «Ад специфичности», когда новые функции добавляются путем переопределения вместо существующей кодовой базы CSS.
    • Отмена CSS , где селекторы с более высокой специфичностью «сбрасывают» стиль селектора с более низкой специфичностью. Разработчики пишут больше кода, чтобы иметь меньше стилей. Это приводит к избыточности и большому количеству отходов в коде.
    Наличие большого количества перечеркнутых стилей (в инспекторе стилей браузера) в нескольких селекторах (без медиа-запросов или псевдоклассов) может указывать на отмену CSS, вызванную плохой структурой CSS. Эти классы CSS переопределяются несколькими другими классами без медиа-запросов и псевдоклассов, что приводит к большему количеству кода для достижения меньшего количества стилей. (Большой предварительный просмотр)

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

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

    Недавно я проводил аудит веб-сайта, на котором был загружен файл размером 2,2 МБ с минимизированным кодом CSS. Такой необычно большой файл может быть потенциальным индикатором того, что код CSS нуждается в рефакторинге или даже переписан с нуля. (Большой превью)

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

    «(…) то, что началось с организованного PostCSS, постепенно превратилось в сложную и запутанную глобальную архитектуру CSS с множеством особенностей и переопределений. Как и следовало ожидать, есть момент, когда дополнительный технический долг, который он вводит, затрудняет поддержание быстрой доставки без добавления каких-либо регрессий. Кроме того, по мере роста числа фронтенд-разработчиков, вносящих свой вклад в кодовую базу, работать с такой архитектурой CSS становится еще труднее».
    Больше после прыжка! Продолжить чтение ниже ↓

    Рефакторинг или переписывание?

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

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

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

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

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

    Давайте суммируем плюсы и минусы каждого подхода.

    Рефакторинг Переписать
    Профи
      9 0003 Инкрементальный и гибкий процесс
    • Работа с единой кодовой базой
    • Команда не заблокирована задачами рефакторинга
    • Легче убедить заинтересованные стороны и руководители проекта должны провести рефакторинг
    • Могут решить основные проблемы; устаревший технический стек, соглашения об именах, архитектурные решения, внутренние правила и так далее.
    • Независимость от текущей кодовой базы (существующие функции и недостатки…)
    • Долгосрочные планы по расширению и ремонтопригодности кодовой базы
    Минусы
      9 0003 Зависит от текущей кодовой базы и базовой архитектуры
    • Невозможно решить основные проблемы
    • Архитектурные решения, существующие внутренние правила и лучшие практики, широкомасштабные проблемы и т. д.
    • Может быть сложно выполнить, в зависимости от настройки проекта и работоспособности кодовой базы
    • Дорого и отнимает много времени
    • Необходимо полностью внедрить перед запуском
    • Сохранение текущей кодовой базы при разработке новой кодовой базы
    • Труднее убедить заинтересованные стороны и руководителей проекта полностью переписать
      • 900 09

    Когда проводить рефакторинг CSS?

    Рефакторинг является рекомендуемым подходом для постепенного улучшения базы кода CSS при сохранении текущего внешнего вида (дизайна). Члены команды могут работать над решением этих проблем с кодовой базой, когда нет задач с более высоким приоритетом. Постепенное улучшение текущей кодовой базы в большинстве случаев не повлияет на работу пользователя напрямую, однако более чистая и удобная кодовая база приведет к более простой реализации функций и меньшему количеству непредвиденных ошибок и побочных эффектов.

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

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

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

    Когда переписывать CSS?

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

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

    Аудит работоспособности кодовой базы CSS

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

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

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

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

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

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

    ваша кодовая база. Указав, что может произойти, когда у всех разные мнения о том, как должен выглядеть серый тон, вы получите 50 оттенков серого. Кроме того, Specificity Graph дает вам хорошее общее представление о состоянии вашей базы CSS».

    Что касается инструментов CLI, Wallace — это удобный инструмент, который предоставляет базовую, но полезную статистику и обзор CSS, которые можно использовать для выявления проблем, связанных с размером файла, количеством правил и селекторов, типами и сложностью селекторов и т. д.

    Пример отчета Wallace CLI для моего личного веб-сайта (Большой предварительный просмотр)

    Wallace также предлагает бесплатный инструмент анализа на веб-сайте Project Wallace, который использует, по-видимому, более продвинутую версию Wallace в серверной части, чтобы обеспечить некоторые полезные визуализации данных и еще несколько показателей, которые недоступен в интерфейсе командной строки Уоллеса.

    Часть примера инструмента анализатора Project Wallace для случайного веб-сайта. Обратите внимание, сколько выводов можно сделать из этих нескольких статистических данных — слишком много правил и селекторов, большой размер файла, слишком много повторяющихся объявлений цветов и шрифтов и т. д. (Большой предварительный просмотр)

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

    Написание высококачественного CSS

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

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

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

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

    Исходя из личного опыта, я обнаружил, что следующее помогло мне значительно улучшить работу с CSS:

    • Изучение архитектурных шаблонов.
      Руководство по CSS содержит обширную базу знаний и передовой опыт для написания высококачественного CSS на основе общих шаблонов программирования и архитектурных принципов.
    • Практикуйтесь и совершенствуйтесь.
      Работайте над личными проектами или решайте задачи от Frontend Mentor, чтобы улучшить свои навыки. Начните с простых проектов (один компонент или раздел) и сосредоточьтесь на написании наилучшего CSS, пробуйте различные подходы, применяйте различные архитектурные шаблоны, постепенно улучшайте код и научитесь эффективно писать высококачественный CSS.
    • Учиться на ошибках.
      Поверьте мне, вы напишете очень некачественный CSS, когда начнете. Вам потребуется несколько попыток, чтобы сделать это правильно. Найдите минутку и подумайте, что пошло не так, проанализируйте слабые места, подумайте, что и как вы могли бы сделать по-другому, и постарайтесь избежать тех же ошибок в будущем.

    Также важно установить правила и внутренние стандарты CSS внутри команды или даже для всей компании. Четко определенные общекорпоративные стандарты, стиль кода и принципы могут дать множество преимуществ, таких как:

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

    Кирби Ярдли работал над рефакторингом системы проектирования Sundance Institute и CSS и указал на важность установления внутренних правил и лучших практик.

    «Без надлежащих правил и стратегии CSS — это язык, который можно использовать неправильно. Часто разработчики пишут стили, специфичные для одного компонента, не задумываясь критически о том, как этот код может быть повторно использован в других элементах (…) После долгих исследований и размышлений о том, как мы хотели подойти к архитектуре нашего CSS, мы решили использовать методологию под названием ITCSS. “

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

    «Мы представили библиотеку шаблонов, начали использовать атомарный дизайн в нашем рабочем процессе, создали новые рекомендации по кодированию и адаптировали несколько методологий, таких как BEM и ITCSS, чтобы поддерживать нас в поддержке и развитии нашего CSS/UI в больших масштабах».

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

    Заключение

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

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

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

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

    Часть: Рефакторинг CSS
    • Часть 1: Рефакторинг CSS: Введение
    • Часть 2: Стратегия CSS, регрессионное тестирование и обслуживание
    • Часть 3: Оптимизация размера и производительности
    • Подпишитесь на нашу электронную почту рассылка, чтобы не пропустить следующие.

    Ссылки

    • «Управление проектами CSS с помощью ITCSS», Harry Roberts
    • «Крупномасштабный рефакторинг CSS в Trivago», Christoph Reinartz
    • «Sundance. org Design System And CSS Refactor», Kirby Yardley
      • 9 0003 «Из семантического CSS To Tailwind: рефакторинг кодовой базы пользовательского интерфейса Netlify», Чарли Джерард и Лесли Кон-Вайн
    • «Инструменты аудита CSS», Ирис Льешнянин

    Все свойства от CSS 1 до CSS 3 · Йенс Оливер Мейерт

    CSS: все свойства от CSS 1 до CSS 3

    Публикация от 27 марта 2008 г. (↻ 4 августа 2022 г.), зарегистрированная в разделе «Веб-разработка» (лента).

    Чем был бы HTML без CSS? И что такое индекс всех элементов HTML без индекса всех свойств CSS? Чтобы решить последнюю проблему, я представляю постоянно обновляемый указатель всех свойств , указанных в CSS 1, CSS 2, CSS 2.1 и CSS 3, включая их начальные значения.

    Перейдите прямо к списку свойств, если вас не интересуют некоторые детали:

    • Самое главное, CSS 3 все еще находится в разработке. Хотя я буду время от времени обновлять индекс, свойства могут быть переименованы, удалены или добавлены, так как ссылки также могут изменяться без дополнительного уведомления. Я исправлю их, даже быстрее, когда вы будете так добры, дайте мне знать.

    • Существует причина для разделения CSS 2 и 2.1: хотя CSS 2.1 не совсем понятен, существуют различия в свойствах — font-size-adjust , font-stretch , marker-offset , метки , page , size и text-shadow все кажутся удаленными.

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

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

    • В список не включены дескрипторы, которые в настоящее время определены в модулях «Цвет» и «Веб-шрифты».

    • Затем некоторые [прошлые] числа: CSS 1 указывает 53, CSS 2 122, CSS 2.1 115 и CSS 3 224 свойств; всего имеется 253 различных свойства (опять же, не считая дескрипторов). В начальных буквах всех свойств используется почти весь латинский алфавит, кроме «j», «k», «x» и «y». Тем не менее, поскольку я предлагаю рабочей группе быть более инновационной 😉

    Гудок или твит об этом?

    Обо мне

    Меня зовут Йенс, я ведущий инженер и автор. Я работал техническим руководителем в Google, я близок к W3C и WHATWG, а также пишу и рецензирую книги для O’Reilly. Я люблю пробовать разные вещи, иногда включая философию, искусство и приключения. Здесь, на meiert.com, я делюсь некоторыми своими взглядами и опытом.

    Если у вас есть вопрос или предложение по поводу того, что я пишу, пожалуйста, оставьте комментарий (если есть) или сообщение.

    No related posts.