Kata Notepad 📓

Первое ревью:

Вопросы

• Что такое специфичность в css? как работает расчет специфичности?
• Какие есть проблемы в верстке инлайн-блоками?
• БЭМ - что такое блок, элемент, модификатор, микс?
• Относительно чего задается позиционирование?
• Какие свойства создают контекст наложения? Прочитать про контекст наложения
• Что такое babel и для чего нужен?
• Что такое source map?

Вопрос, ссылка на мой ответ	Ресурсы
CSS спецефичность	Специфичность MDN Web Docs
Inline блоки	CSS-live.ru, YouTube Алексей Пауков
БЭМ	YouTube
CSS контекст наложения	MDN Web Docs
Babel	kolmogorov.pro
Source map	HABR

CSS специфичность

CSS специфичность

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

Типы селекторов по возрастанию специфичности

0. Теговые селекторы (div, h1, h2) и псевдоэлементы (::after ::before)
1. Классовые селекторы (.example), селекторы атрибутов ([type="checkbox"]) и псевдоклассы
2. Индентификаторы (#example)

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и :not() не влияют на специфичность.
(Селекторы внутри :not() влияют)

Стили объявленные внитри атрибута style имеют наивысшую специфичность

<span style="red"> Я важный как х*й бумажный </span>

Исключение !important

Имеет наивысший приоритет

Практика:

• Всегда пытаться использовать специфичность, а !important использовать только в крайних случаях
• Использовать !important только в страничных стилях которые переопределяют общие стили или стили библиотек (Bootstrap)
• Не использовать !important, если пишешь плагин
• Не использовать !important в общих стилях браузера

Примеры

<div id="test">
  <span>Text</span>
</div>

div#test span { color: green }
div span { color: blue }
span { color: red }

В данном примере текст зелёный так как div#test span имеет наивысшую специфичность, не смотря на их порядок

Inline блоки

Учитываются символы пробелов и табуляции Ведёт себя как inline (текстовый поток) и распологается по его правилам

inline-block preview

БЭМ

БЭМ

Это методология, правила вёрстки

Блок Элемент Модификатор

block__element_modificator

Блок

    Это функционально независимый компонент страницы,
который может быть использован множество раз.
    Название класса блока должно отвечать
на вопрос 'Что это?', а не как выглядит.
    Не стоит задавать блоку внешнюю геометрию (margin или padding),
это позволяет перемещать и использовать блоки повторно
никак не влияя на окружение.
    Блоки можно вкладывать в друг друга,
Допустима любая вложеность блоков.
    Пример:

<!-- Вложенность блоков -->

<!-- Блок `about` -->
<div class="about">
	<!-- Вложенный блок `title` -->
	<div class="title"></div>
	<!-- Вложенный бдлк `subtitle` -->
	<div class="subtitle"></div>
</div>

Элемент

    Это неотъемлемая составная часть блока,
которая не может использоваться в отрыве от него.
    Имя элемента отвечает на вопрос `Что это?`
    Имя элемента наследует имя блока таким образом:
`block__element`
    Элемент всегда должен быть частью блок и не должен
использоваться вне блока
    Элемент это не обязательный компонент блока

Примеры:

1. Пример. Элемента в блоке навигации

<nav class="menu">
	<a class="menu__link">Первый элемент меню</a>
	<a class="menu__link">Второй элемент меню</a>
	<a class="menu__link">Третий элемент меню</a>
</nav>

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

<!-- Блок `row` -->
<div class="row">
	<!-- Элемент `column` -->
	<div class="row__column">
		<!-- Элемент `item` -->
		<div class="row__item"></div>
	</div>
</div>

ОШИБКОЙ является подобная запись: row__column__item

Модификатор

    Применяется для определения или уточнения
внешнего вида, состояния или поведения блока или элемента
    Имя должно отвечать на вопрос `какой?`,
`как выглядит?`, `Как себя ведёт?` либо его `состояние`     Имя дополняет блок или элемент таким образом:
`block_modificator`
`block__element_modificator`

Пример:

<nav class="menu">
	<a class="menu__item menu__item_active">HOME</a>
	<a class="menu__item">ABOUT</a>
	<a class="menu__item">CONTACT</a>
</nav>

Миксы

Приём позволяющий использовать и блоки и элементы в одном объекте

Пример:

<!-- Блок `about` -->
<div class="about">
  <!-- Элемент `title` -->
  <div class="about__title title"></div>
  <!-- Элемент `subtitle` -->
  <div class="about__subtitle subtitle"></div>
</div>

CSS контекст наложения

Ответ

Babel

Ответ

Source map

Ответ