made using Joxi.net

#статья дня
#css #flex #facebook

Ahmad Shadeed выложил статью в которой разобрал CSS обновлённого Facebook: https://ishadeed.com/article/new-facebook-css/, есть в переводе на Хабре: https://habr.com/ru/company/ruvds/blog/496958/

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

Но одинг момент конкретно так меня покоробил. Это укладка flexbox-сеток.

Я не знаю по какой причине они это сделали, но они решили классическую проблему space-between на недостаточном числе элементов… добавлением пустых элементов. То есть, фактически, добиванием сетки до кратного числа блоков чтобы избежать широких промежутков.

На самом же деле достаточно было либо блока, либо псевдо-элемента со следующими правилами:

.wrapper::after {
 content: ‘’;
 flex-grow: 1;
}

Грубо говоря, установить распорку.

Думаю, знать простые решения тоже необходимо. Как и уметь считать 🙂

Node.js native addon build tool. Contribute to nodejs/node-gyp development by creating an account on GitHub.