WapSter

Я так понимаю инженеру дают чертеж на бумаге, а он по нему строит дом, но для чего это нужно? Зачем вообще чертежи, почему не строить сразу же? Почему архитектор не может построить дом? Инженеру даются поэтажные планы, а он должен их из кирпича строить? Если инженеру не дадут чертеж, а скажут просто построить дом, может ли ему пригодится для поэтажных планов archCAD или его замена?

Хедеру
position: absolute;
z-index: 100;
и убрать background если он есть

const XXX = length => Array
  .from({ length }, (n, i) => Array
    .from({ length: i + 1 }, (n, i) => i + 1)
    .join(','))
  .join('\n');

console.log(XXX(5));

или

const XXX = length => Array
  .from({ length }, function() {
    this.push(-~this.length);
    return this.join`,`;
  }, [])
  .join`\n`;

или

const XXX = length => Array
  .from({ length }, (n, i) => Array
    .from(Array(++i).keys())
    .reduce((acc, n) => acc + (acc && ',') + ++n, ''))
  .reduce((acc, n) => acc + (acc && '\n') + n, '');

Вы дважды использовали сокращенное свойство "transition", перекрыв тем самым предыдущий эффект.

Если Вы хотите указать два правила, их нужно записывать в одном свойстве "transition" через запятую


Результат:
https://codepen.io/hisbvdis/pen/mdbVRYa

Извини, а зачем тут вобще bootstrap?
На родительский блок:

display: flex;
justify-content: space-between;
align-items: center;

Современные фреймворки вроде Angular/React/Vue созданы для решения одних и тех же задач. Использовать лучше тот, который больше нравится и который лучше знаете. При неумелом использовании все преимущества конкретного фреймворка меркнут, и на Vue, в таком случае, вы можете получить медленную скорость разработки, а на React неподдеживаемый код.

На просторах интернета куча статей. Где то даже встречал статью, где рассуждал для чего лучше подходит React, для чего Vue и для чего Angular. Попробуйте просто погуглить.

В первом случае переменная element будет приведена к булеву, и если изначально в ней содержится значение, которое будет приведено к false, то код element.nextSibling не будет вызван. В этом конкретном случае это используется как проверка на null и undefined до начала первой итерации цикла.

Решение найдено
https://codepen.io/anon/pen/xopBZw


блок сверху светло-фиолетовый (фон добавила для наглядности, так разумеется он прозрачный) это :before
со стилями:

{  
  min-height: 20px;
    max-height: 80px;
    flex-grow: 8;
    width: 100%;
}

т.е. от текста до верхней и нижней границы блока .box (тот, что с розовым border) одинаковое расстояние (стрелки) вне зависимости от количества текста, если нет переполнения.
При переполнении верхний блок сжимается

Подскажите как вы разбиваете вашу верстку на блоки
Вот возьмем, например, header.

Хедере это конкретный блок со своим классом и модификаторами (если нужно). Далее все намного проще - позиционирование мы не включаем в стили модификатора, это скорее изменение его внешнего вида, об этом следует помнить.

Предположим внутри блока есть кнопка, которая есть и в других блоках.

Ну так и делайте ее отдельным блоком, например с классом .btn или .button и у нее будут свои модификаторы. Чаще всего у блока кнопки их много. Пример как делаю я:

.btn {}
/* style */
.btn--primary {}
.btn--secondary {}
/* size */
.btn--sm {}
.btn--md {}
.btn--xl {}
/* special */
.btn--link {}

Маргины мы прописываем в стилях к этой кнопке и добавляем соответствующий модификатор?

Нет, отступы и кастомные стили (очень специфичные) мы задаем в зависимости от родительского блока в котором находиться кнопка, в данном случае это хедер. Мы может сделать так:

.header .btn {}
или например такой класс сделать
.header__btn {}

Я предпочитаю вложенность (но не больше 1 уровня)

А как эти кусочки потом собрать? С помощью pug includes или gulp

Ну тут уже по разному, как вам удобней и зависит от конкретного инструмента, если говорить о pug, то я делал так
1. объявление миксина в отдельном файле

mixin button(caption)
  button.button&attributes(attributes)!= caption

2. Подключал в глобальный скоуп через шаблоны (include)
3. Пользовался миксином в любом места.

Предположим еще в этом блоке есть меню, которое больше нигде не используется, его мы уже верстаем не отдельно, а вместе?

Сделайте отдельным компонентом - не пожалеете. Во первых держать весь код в порядке (в одном понятном виде) удобно. Во вторых - если будет нужно расширение проекта или почти такое же меню но в другом месте, это вам пригодиться.

Использование фреймворков (особенно frontend) не имеет ничего общего с безопасностью. Безопасность обеспечивает тот кто продумывает архитектуру проекта, тот кто реализует логику валидации и тот кто настраивает правила и протоколы взаимодействия частей приложения

ul {
  columns: 2;
}

Когда вы применили :hover к нужному элементу, это не значит, что именно у него будут показаны стили дочерних элементов. На примере div:hover a — после выбора состояния :hover для родителя нужно выбрать именно a, потому что стили применяются именно к нему, несмотря на то, что они идут от :hover родителя (что, чёрт, логично).

loading placeholder и различные вариации.
https://github.com/zalog/placeholder-loading как пример.