Можно для блока указывать в стилях цвет, шрифт?

Question

[EarthFM]

Здравствуйте. Я правильно понял, что в блоке нельзя писать стили( color, background, font, margin, padding). Это нужно делать в модификаторах. И что нужно писать в блоке?

И нашёл такое правило

Ширина блока всегда заполняет все доступное пространство, высота блока, у которого есть контент, никогда не фиксируется.

Про height понял, а про width не совсем понятно, надо указывать width: 100% ?

Answer 1

[Константин Величко]

Все просто. Основная концепция это разделение дизайна от позиционирования.

• Элемент - позиционирование (float, text-aligin, width, hegith, position)
  
• Блок - дизайн (font, color, background и тд.)
  

Но нужно стараться писать стили так чтобы не было проблем в дальнейшем. Скажем ненужно писать color: red на сам блок, по тому что потом придется его перебивать у элемента.

Простейший пример

<div class="page page_sidebar_right">
	<div class="page__sidebar"></div>
	<div class="page__content"></div>
</div>

Здесь элементы sidebar и content задают позиционирование, а модификатор как то это меняет.
Какие блоки будут лежать внутри этих элементов нас не волнует, но эти блоки должны их заполнять, т.е. у них не должен быть указан width. Отступы если они нужны для позиционирования тоже будудт на этих элементах.

ЗЫ. width: 100% не то же самое что display: block

Comments

[EarthFM]

Спасибо, за ответ)
width: 100%, тоже самое)

Я получается не правильно делал(
То есть, надо было создать элементы .container__left and .container__right, и в них пихать блоки? Если да то почему нельзя делать так, как в ссылке ниже.
Почему нельзя писать блок и добавлять модификатор, которому можно задать
float: left and right.
И не понял фразу " ... а модификатор как то это меняет."


codepen.io/MarsFM/pen/VeqgWM?editors=1000

[Константин Величко]

По тому что если вы блоку дадите float left то не сможете его использовать в дальнейшем. Если деать это через модификатор, то вам придется делать кучу модификаторов.
Внешний блок с его элементами как скелет, или сетка внутри элементов может быть все что угодно. Такой подход гибче.
еще раз width: 100% не то же самое что display: block

[EarthFM]

Спасибо, на практике попробую)