Нужно ли бороться со встроенными в браузер Mozilla стилями?

Встроенные стили браузера (User Agent Styles) и как с ними работать

Отличный практический вопрос. Объясню, зачем они нужны и как правильно их обрабатывать.

Что такое встроенные стили браузера?

User Agent Stylesheet - это стили, которые браузер применяет по умолчанию:

/* Встроенные стили Firefox (примеры) */
body {
  margin: 8px;
  font-family: -moz-initial;
  background-color: white;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  font-weight: bold;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

button {
  appearance: button;
  background: ButtonFace;
  color: ButtonText;
  border: 2px outset ButtonBorder;
  padding: 2px 8px;
  cursor: pointer;
}

input {
  background: white;
  border: 2px inset;
  padding: 1px 2px;
}

Почему они существуют?

1. Семантика HTML

Основная причина - заставить HTML теги выглядеть так, как ожидает пользователь:

<!-- Без стилей браузера эта страница была бы нечитаема -->
<h1>Заголовок</h1>
<p>Текст</p>
<button>Кнопка</button>

2. Доступность

/* Встроенные стили делают эти элементы интерактивными -->
button {
  cursor: pointer;  /* Указатель на кнопку -->
  background: ButtonFace; /* Платформенный вид -->
}

a {
  color: blue;      /* Известный стиль ссылки -->
  text-decoration: underline;
  cursor: pointer;
}

Нужно ли с ними бороться?

Коротко: НЕТ, нужно с ними РАБОТАТЬ

Правильный подход

1. Используй CSS Reset / Normalize

CSS Reset - обнуляет встроенные стили:

/* Простой reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: #333;
}

/* Обнуляем стили элементов */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

Normalize.css - сохраняет полезные стили, убирает различия между браузерами:

/* Normalize не обнуляет, а унифицирует */
button,
input,
select,
textarea {
  font-family: inherit; /* Унифицируем шрифт */
  font-size: 100%;      /* Одинаковый размер */
  line-height: 1.15;    /* Одинаковая высота */
  margin: 0;            /* Убираем margin */
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  appearance: button;   /* Сохраняем платформенный вид */
}

2. Используй CSS Framework

Tailwind CSS (современный подход):

<!-- Tailwind автоматически нормализует стили -->
<h1 class="text-3xl font-bold">Заголовок</h1>
<button class="px-4 py-2 bg-blue-500 text-white rounded">Кнопка</button>

Tailwind включает встроенный reset, который:

• Обнуляет margin/padding
• Устанавливает box-sizing
• Нормализует шрифты
• Убирает стили списков

3. Явный контроль через CSS Variables

/* Определяем базовые стили один раз */
:root {
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --spacing-base: 1rem;
  --color-text: #333;
  --color-bg: #fff;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

button {
  font-family: inherit;
  font-size: inherit;
  padding: var(--spacing-base);
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
}

Различия между браузерами

Проблема: каждый браузер использует свои User Agent стили:

/* Firefox */
body { margin: 8px; }

/* Chrome */
body { margin: 8px; } /* Совпадает */

/* Safari */
body { margin: 8px; } /* Совпадает */

/* Но кнопки отличаются: */
/* Firefox */
button {
  padding: 2px 8px;
  border: 2px outset;
}

/* Chrome */
button {
  padding: 2px 8px;
  border: 1px solid;
}

Решение: нормализовать в своем коде

Практический пример

/* 1. Глобальный reset/normalize */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

/* 2. Потом добавляем свои стили */
.button {
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: #0056b3;
}

Выводы

Ответ на вопрос: Не "бороться", а "контролировать"

• Встроенные стили нужны для доступности и семантики
• Нужно их нормализовать чтобы работа была предсказуема
• Используй CSS Reset или Normalize в начале проекта
• Определи базовые стили один раз и наследуй их везде
• Не полагайся на встроенные стили при создании компонентов
• Проверяй в разных браузерах - различия есть

Лучшая практика: используй готовое решение (Tailwind, Bootstrap, Normalize.css), а не боришься со встроенными стилями вручную.