CSS детальнее
Автор конспекта: Андрей Шамара
📘
Этот урок является частью курса по JavaScript, но углубляется в детали HTML и CSS, поскольку
эти технологии являются основой для JS. Особое внимание уделяется правильному именованию,
разделению стилей и структуры, а также методам подключения внешних файлов.
Ключевые темы
1. Основы HTML и CSS
- Верстка: Процесс превращения макета сайта в
HTMLиCSS. Верстальщик обычно хорошо знаетHTMLиCSS, а также немногоJavaScriptдля улучшения стилей и разметки. - Приоритет изучения
JavaScript:JavaScriptсложнееHTML/CSS, поэтому ему уделяется глубокое и детальное изучение.
2. Правильное именование классов CSS (Семантика vs. Стилистика)
❗
Избегайте стилистических названий классов! Названия вроде .red или .large — это плохая
практика.
- Проблема стилистических имен: Они привязаны к текущему внешнему виду, который может измениться. Это приведет к необходимости менять названия классов повсюду.
- Решение – семантические имена: Названия должны передавать смысл или функционал элемента
(например,
.important-item,.important-size). - Преимущества семантических имен:
- Улучшают читаемость кода.
- Облегчают анализ структуры.
- Упрощают поддержку и внесение изменений.
3. Использование нескольких классов
- Синтаксис: Несколько классов к одному
HTML-тегу добавляются через пробел:class="класс1 класс2 класс3". - Запрет пробелов в названиях классов: Пробелы в названии интерпретируются как разделители между разными классами.
- Приоритет стилей: Правила из разных классов суммируются. При конфликте свойств (например,
font-size), приоритет имеет то правило, которое определено позже вCSS-файле. Порядок объявления классов вHTML-теге не имеет значения.
4. Селекторы CSS
- Селекторы классов: Выбирают элементы по их классу (например,
.important-item). - Селекторы тегов: Выбирают все элементы определенного типа (например,
img,input). - Назначение селекторов: Позволяют браузеру найти нужные элементы и применить к ним определенные правила стилей.
- Общие свойства
CSS:width,height,font-size,padding,colorи т.д.
5. Принцип единой ответственности (Single Responsibility Principle)
⚠️
Не пишите CSS внутри HTML! Это нарушает принцип единой ответственности.
- Проблема: Встраивание стилей непосредственно в
HTML-файл (через атрибутstyleили тег<style>) нарушает SRP. - Решение: Разделение логики – структура (
HTML) и внешний вид (CSS) должны быть в разных местах. Поведение (JavaScript) также должно быть отдельно. - Преимущества разделения:
- Чистота кода.
- Упрощение отладки и поиска ошибок.
- Облегчение сопровождения кода коллегами.
- Улучшение масштабируемости проекта.
6. Подключение внешнего CSS-файла
- Создание файла:
CSS-стили выносятся в отдельный файл (например,index.css). - Подключение через
HTML: Для связи используется тег<link>внутри секции<head>:
