Разница между inline, block и inline-block элементами в CSS

📌 inline

Нельзя задавать ширину (width) и высоту (height) для inline элементов. Они занимают только ту ширину, которая необходима для их содержимого. Например, <span> или <a> занимают столько места, сколько нужно для текста или вложенных элементов.

Отступы (margin) и внутренние отступы (padding) работают, но только горизонтальные. Вертикальные отступы часто игнорируются или не влияют на размещение элементов. Это связано с тем, что inline элементы не начинают новую строку и их вертикальные отступы могут не отображаться как ожидается.

📌 block

Можно задавать ширину и высоту для block элементов. Они занимают всю доступную ширину родительского элемента по умолчанию и начинают новую строку.

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

📌 inline-block

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

Все отступы и внутренние отступы работают так же, как и для block элементов. inline-block элементы будут расположены в строке, как inline, но поддерживают высоту и ширину, как block.

inline: <a>, <span>, <strong>, <em>, <img>, <b>, <i>, <abbr>, <cite>

block: <div>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>, <nav>, <table>

inline-block: <button>, <input>, <label>, <img>, <select>, <textarea>

#frontend #css

🌈 Утилитарные классы

Утилитарные классы — это классы, которые применяют одно конкретное стильовое свойство. Например, text-center, bg-blue, p-4 и другие. Каждый из этих классов отвечает за отдельную задачу, такую как выравнивание текста, установка фона или добавление отступов. Их основная цель — сделать разработку быстрее и проще, не создавая громоздкие и избыточные CSS-правила.

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

👀 Пример использования утилитарных классов

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

<div class="bg-gray-100 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold text-center mb-4">Заголовок</h2>
  <p class="text-base text-gray-700">Некоторое описание...</p>
  <button class="bg-blue-500 text-white p-2 rounded mt-4">Кнопка</button>
</div>

bg-gray-100 — задает светло-серый фон для карточки.
p-6 — добавляет отступы (padding) размером 1.5rem со всех сторон.
rounded-lg — округляет углы элемента.
shadow-md — добавляет тень.
text-xl — увеличивает размер шрифта заголовка.
font-bold — делает текст жирным.
text-center — выравнивает текст по центру.
mb-4 — добавляет отступ снизу у заголовка.
bg-blue-500 — задает синий фон кнопке.
text-white — делает текст кнопки белым.
p-2 — добавляет отступы для кнопки.
rounded — округляет углы кнопки.
mt-4 — добавляет отступ сверху у кнопки.

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

🎮 Утилитарные классы в Tailwind CSS

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

Пример с использованием Tailwind CSS:

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-lg">
  <h1 class="text-2xl font-semibold text-center">Привет, мир!</h1>
  <p class="mt-2 text-base">Это пример использования утилитарных классов в Tailwind CSS.</p>
</div>

В данном примере:

bg-blue-500 и text-white отвечают за цвета фона и текста.
p-4 — отступы.
rounded-lg — округление углов.
shadow-lg — тень.
text-2xl и font-semibold — стиль заголовка.
text-center — выравнивание текста по центру.
mt-2 — отступ сверху для параграфа.

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

#css

🖥 CSS Houdini: Что это и зачем он нужен?

CSS Houdini — это набор API, который открывает доступ к "внутренностям" браузера, позволяя разработчикам управлять процессом рендеринга CSS.

С Houdini можно создавать кастомные свойства, работать с анимациями, управлять раскладкой элементов и даже разрабатывать свои типы CSS-процессоров.

📌 Custom Properties and Values API
Позволяет задавать пользовательские свойства с типизацией.

CSS.registerProperty({
  name: '--main-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Теперь --main-color можно использовать как любое CSS-свойство, например, в анимациях.

📌 Paint API
Используется для создания кастомных графических эффектов.

class MyPaintWorklet {
  paint(ctx, size, properties) {
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, size.width, size.height);
  }
}
registerPaint('my-paint', MyPaintWorklet);

// Затем в CSS:
.element {
  background: paint(my-paint);
}

📌 Animation Worklet API
Упрощает создание сложных анимаций с минимальным воздействием на производительность. Например, плавные анимации, работающие на уровне композитора.

📌 Layout API
Дает контроль над раскладкой элементов. С ним можно реализовать свои алгоритмы расположения, например, нестандартные сетки.

📌 Parser API
Открывает доступ к разбору и интерпретации CSS-свойств.

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

// paint.js
class DotsWorklet {
  paint(ctx, size, props) {
    const radius = size.width / 10;
    ctx.fillStyle = props.get('--dot-color').toString();
    for (let y = radius; y < size.height; y += 2 * radius) {
      for (let x = radius; x < size.width; x += 2 * radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}
registerPaint('dots', DotsWorklet);

// styles.css
:root {
  --dot-color: red;
}

.element {
  background: paint(dots);
}

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

#css #browser #frontend #houdini

👨‍💻 План развития Frontend Разработчика (Часть 1)

Этот гайд — пошаговая дорожная карта для изучения фронтенд-разработки, подготовки к собеседованиям и поиска первой работы.

Важно понимать:
- Средний срок обучения с нуля до изучения полного стека — ~6 месяцев.
- Дополнительные 2+ месяца могут потребоваться для практики, подготовки к собесам, изучения в глубину и поиска работы.
- Скорость прогресса зависит от бэкграунда, времени на учебу и умения учиться.

Главный принцип:
Закладываем фундамент → Повторяем → Практикуем → Углубляемся. Важно "забить мозг" технологией, чтобы она стала привычной. Для этого:
- Смотрим одни и те же темы в разных источниках.
- Много пишем код, даже если кажется, что не понимаешь.

🗺 Frontend Roadmap 2024. План + Ресурсы для бесплатного обучения

🖥 HTML (< 2 недель)
Изучать HTML без CSS может показаться скучным, но наша главная цель — разобраться в возможностях языка и понять, какие теги существуют и для чего они нужны. Не стоит заучивать всё подряд — с практикой придёт понимание, когда и какие теги применять.

→ HTML с 0 до Профи. Полный курс + Практика
https://youtu.be/56lpkwhaJhQ?si=yaljlD28fC5ygHt-

→ HTML - Полный Курс HTML Для Начинающих
https://www.youtube.com/watch?v=W4MIiV4nZDY

🖥 CSS (< 4 недель)
Не стоит заучивать все свойства. Лучший способ — практика. Нужно больше верстать и пробовать. Пройдите подряд 2-3 курса и начинайте смотреть, как верстают другие. Видео по верстке в YouTube очень много

→ CSS - Курс по CSS для Начинающих
https://www.youtube.com/watch?v=WpridlBQmdk

→ CSS для Начинающих - Практический Курс
https://www.youtube.com/watch?v=SpCUuyZZTp8

→ Объяснение Вёрстки Простого Сайта
https://www.youtube.com/watch?v=MQTeFDeiRzg

→ Адаптивная верстка сайта на HTML CSS
https://youtu.be/PoJaRi7Ug7Q?si=L30HX2oiLzydfLAb

Далее возьмите 2-4 макета в Figma. Сверстайте их самостоятельно, сверяясь с конспектами.

🖥 Git & GitHub (1 неделя)
Освойте основы: создание репозитория, веток, коммитов и пуша. Цель — загрузить проект на GitHub. Остальное изучите позже.

→ Git и GitHub Курс Для Новичков
https://www.youtube.com/watch?v=zZBiln_2FhM

Дополнительно
После освоения базовой вёрстки вы сможете расширить навыки:
- Препроцессоры (Sass/Less)
- Продвинутые анимации (CSS animations, GSAP)
- CSS-фреймворки (Bootstrap, Tailwind)

Но не задерживайтесь на этом этапе слишком долго! Главное сейчас — закрепить основы и переходить к JavaScript.

С самого начала параллельно с изучением технологий готовься к собеседованиям. Каждый раз после освоения новой темы закрепляй теорию — проходи вопросы в тренажере 🚀 YeaHub.

#гайд #html #css #git