10 строк CSS, с которых начинается любой нормальный сайт

Если ты только начал изучать вёрстку, эти строки CSS станут твоим спасением. Мы расскажем, зачем их писать в каждом проекте и как они упрощают жизнь фронтендера.

Разработка

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

Спокойно. Есть проверенный способ начать любой проект без боли. Опытные разработчики почти всегда начинают с набора базовых строк CSS — такой себе мини-щит от хаоса.

Давай разберёмся, что это за волшебные 10 строк и почему стоит добавлять их в каждый проект.

🎯 1. box-sizing: border-box;

*, *::before, *::after {
  box-sizing: border-box;
}

Зачем это нужно?

По умолчанию CSS считает ширину и высоту без паддингов и бордеров. Это неудобно и путает. С этой строкой ты говоришь браузеру: «Эй, считаем всё вместе, как в нормальной жизни».

🧼 2. Убираем отступы по умолчанию

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

Зачем это нужно?

Браузеры добавляют свои отступы. Они разные. Они непредсказуемые. Обнуляя их — ты сам решаешь, где и сколько будет места.

💡 3. Красивый шрифт по умолчанию

body {
  font-family: system-ui, sans-serif;
}

Зачем это нужно?

Так ты получаешь аккуратный, читаемый шрифт, без заморочек. Работает на всех устройствах, смотрится современно.

🔢 4. Удобный line-height

body {
  line-height: 1.5;
}

Зачем это нужно?

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

🧍‍♂️ 5. Высота страницы = 100%

html, body {
  height: 100%;
}

Зачем это нужно?

Если тебе нужно, чтобы что-то занимало всю высоту экрана (например, фон), это обязательная штука. Без неё «высота 100%» просто не сработает.

📦 6. Улучшаем поведение изображений

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

Зачем это нужно?

Картинки не вылезают за границы. Больше никаких «сломанных» версток из-за слишком больших медиа.

🔁 7. Наследуем шрифты для форм

input, button, textarea, select {
  font: inherit;
}

Зачем это нужно?

Без этой строки кнопки и поля форм будут использовать какой-то свой шрифт. С этой — они выглядят органично в дизайне.

💨 8. Убираем фокус-обводки в Safari

button {
  -webkit-appearance: none;
}

Зачем это нужно?

Safari любит делать кнопки… по-своему. Эта строка помогает выровнять поведение с остальными браузерами.

🧹 9. Чистим списки

ul[role='list'], ol[role='list'] {
  list-style: none;
}

Зачем это нужно?

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

🚫 10. Убираем margin у body

body {
  margin: 0;
}

Зачем это нужно?

У <body> есть встроенный отступ. Он мешает, особенно на мобильных. Убираем — и получаем чистый холст для вёрстки.

📦 Итого

Всё это вместе — не магия, а просто грамотный старт. Если тебе лень каждый раз писать это вручную — заведи свой базовый шаблон. Или просто копируй эти строки в начало каждого нового проекта.

Если тебе понравился такой подход — просто, по делу и без заумных объяснений — тебе точно зайдёт приложение Кодик. Оно создано специально для тех, кто начинает путь в программировании с нуля. Внутри — уроки по HTML, CSS и JavaScript, которые объясняют всё человеческим языком, как будто рядом сидит добрый наставник.

Веб-сайт Кодика - https://itcodik.com/