Когда мне пришлось начать создавать CSS, я бы не сказал, что мне это понравилось. Если честно, ненавидел. Ничего не имело смысла, и если бы я изменил даже самое незначительное, это сломало бы что-то еще, и я понятия не имел, почему.

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

Этот человек сказал: «Когда вам нужно что-то построить, разбейте части на маленькие коробки и организуйте свой контент, принимая во внимание родительский блок, который вы создали для хранения контента». Конечно, сначала я не совсем понял, но как только он привел мне пример, это щелкнуло. Я начал получать удовольствие от создания CSS.

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

После этого я стал смотреть на все как на коробки и понял, что играю в лего. Создание простых компонентов было несложным, но это оказалось не так просто, когда я попытался применить эти знания к более сложным элементам.

Второе, на что я начал обращать внимание: когда вы создаете блок с определенной шириной и высотой, вы должны не забывать учитывать размер отступа и размер границы. В конце концов, общая длина вашего ящика будет width + padding + border.

Например:

.box {
  width: 158px;
  height: 100px;
  padding: 20px;
  border: 1px solid;
}
<div class="box" />

Этот div с классом блока будет отображать блок элемента шириной 200 пикселей (1px + 20px + 158px + 20px + 1px).

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

К счастью, есть свойство CSS, которое избавляет нас от необходимости вычислять это для каждой отдельной вещи: box-sizing: border-box. С этим свойством тот же пример будет работать по-другому:

.box {
  width: 158px;
  height: 100px;
  padding: 20px;
  border: 1px solid;
  box-sizing: border-box;
}
<div class="box" />

Этот div с классом box будет отображать элемент шириной 158 пикселей вместо 200 пикселей в предыдущем примере.

Третье, что изменило мою жизнь в CSS, - это изучение flexbox. Сегодня это довольно стандартно, и, вероятно, каждый, кто начинает изучать CSS, изучит flexbox, но в то время не все его использовали. Но с помощью flexbox я мог мгновенно упорядочить содержимое так, как я хотел.

Если вы научитесь использовать flexbox и будете думать обо всем как о коробках, я гарантирую вам, что CSS будет иметь гораздо больше смысла. Тем не менее, важно понимать некоторые основы CSS, поскольку некоторые вещи заставят идею ящиков работать не так, как вы ожидали.

Вы можете проверить эту и другие статьи на моем сайте: https://www.marinahaack.com/articles/Building-CSS-without-a-headache