Совет: слушайте вашего преподавателя внимательно и внимайте!!!
Я уверена, что преподаватель свои утверждения обосновал, возможно Вы что-то упустили.
Все зависти от задачи.
Вариант 1. Нужно задать всем параграфам одинаковые стили, зеленый цвет текста:
p {
color: green;
}
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nulla eos molestiae aspernatur quas dolor, eum officiis culpa cupiditate ab.
</p>
</main>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, est.
</p>
</footer>
Вариант 2. Нужно задать зеленый цвет текста только параграфу внутри второй секции основного контента в третьем div
.... (для случая со сложной разметкой).
Сможете ли Вы задать стили только через один лишь тег?! Возможно, и сможете, но это будет выглядеть примерно так: main>div+div>p { color: green; }
.
Не очень приятная запись. А теперь представьте, что со временем в разметку вносятся изменения и ваш параграф смещается или переносится в другой блок, но он все так же должен быть зеленого цвета!
Вот именно из-за возможных изменений и манипуляций с разметкой (html) лучше задавать блокам классы.
.green {
color: green;
}
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nulla eos molestiae aspernatur quas dolor, eum officiis culpa cupiditate ab.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, fuga.
</p>
<section>
<div>
<p>
Lorem ipsum.
</p>
</div>
<div>
<p class="green">
Lorem ipsum dolor sit amet.
</p>
</div>
</section>
</main>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, est.
</p>
</footer>
Подробнее о приоритетах.
Статья о верстке с помощью БЭМ.
P.S: Параграф p
приводится исключительно в качестве примера. Все это касается любого другого html
элемента и задание для него стилей.
Если проще:
Используем для всех элементов на странице одни и те же стили везде и всегда - можно задавать стили через тег!
Пример:
p {
margin: 0 0 1rem;
}
ul {
padding: 0;
}
ul>li {
color: #333;
}
Элемент имеет свои собственные стили (не все параграфы,а только определенные), элемент может использоваться в любом месте разметки (не теряя стили), к элементу должен быть доступ для других разработчиков - используем class
или id
.
Пример:
.green {
color: red;
font-weight: bold;
}
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nulla eos molestiae aspernatur quas dolor, eum officiis culpa cupiditate ab.
</p>
<section>
<div>
<p>
Lorem ipsum.
</p>
</div>
<div>
<article>
<p class="green">
Lorem ipsum dolor sit amet.
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet.
</p>
</article>
</div>
</section>
</main>
<p>
в<div>
? Придётся все стили переписывать :)