На какую длину отрезают руки за такой способ задания правил классов?

Question

[Mors Clamor]

Доброго времени суток! Таки решил прокачать немного скилл в верстке, необходимо сделать адекватную сетку, если не бутстраповскую, то хотя бы что-то отдаленно похожее. В моем понимании там всё очень просто, что строки что колонки, только flex-direction разные. И написал я следующую запись в SASS (SCSS):

@for $i from 1 through 100 {
    .column-#{$i} {
        display:flex;
        flex-direction: column;
        width:percentage($number: $i / 100);
    }
}

Ну, грубо говоря. Не уверен, что стоит прямо по проценту делать, может, по 10, или n-колоночную систему. Соответственно, результирующий css соразмерно увеличивается в объеме. Собственно, каков шанс быть преданным святому огню IT-квизиции за такой подход? Заранее спасибо!

Comments

[Aetae]

Ну не стоит так делать, т.к. смысла нет. Сетка на то и сетка, что она ограничена и всё по ней выравнивается. А с такой хренью с тем же успехом можно прям в style писать от балды.

[Mors Clamor]

Aetae, А как правильно это делается?

[Aetae]

Mors Clamor, что именно "это"?
Если вам не нужна сетка, а нужно пиксели ловить - пишется конкретный класс под задачу. Если нужна сетка - нужна сетка. Делается она примерно также, только не на 100 штук.

Пытаясь на всё подряд подготовить по универсальному классу вы просто переизобретаете style, не более.

[Mors Clamor]

Aetae, в итоге остановился на 12-колоночной сетке, спасибо)

Answer 1

[Сергей delphinpro]

В целом всё ок.
Но для уменьшения итогового css можно использовать экстенды

%column {
    display:flex;
    flex-direction: column;
}
@for $i from 1 through 100 {
    .column-#{$i} {
        @extend %column;
        width:percentage($number: $i / 100);
    }
}

Comments

[Mors Clamor]

Хорошо, спасибо за совет!