Организация стилей CSS, как лучше?

Question

[Chamalion]

Недавно я решил создать "свой" Bootstrap и перед началом верстки сайта по макету, я создал классы-заготовки. При чем не только классы оберток, самых распространенных кнопок и заголовков, как, например, эти:

.btn {
min-width: 192px;
box-sizing: border-box;
width: fit-content;
padding: 5px 30px;
@extend .tac;
border: 1px solid #FBC832;
border-radius: 58px;
@extend .fw-600;
@extend .fs-17;
display: block;
color: #000000;
}

.btn-yellow {
background: #FBC832;
}

А также и классы самых распространенных стилей (в каждом таком классе обычно не более одной строчки). Например,

.row {
display: flex;
flex-wrap: wrap;
}

.jcsb {
justify-content: space-between;
}

.jcsa {
justify-content: space-around;
}

.m0a {
margin: 0 auto;
}

Ну и так далее...

В чем удобство такого подхода:
- конечный css файл занимает меньше объема, так как например строчка display: flex используется один раз вместо пятидесяти
- можно писать стили прямо в html атрибуте class
- практически не используется css (только глобальные классы)
- если использовать scss (или другие препроцессоры), можно переиспользовать эти классы в других классах и при компиляции в css, название класса/ атрибут запишется через запятую после основного переиспользованного класса (что опять же сокращает место)

Таким образом, повторение кода стремится к нулю.

Как считаете, стоит ли продолжать придерживаться такого подхода? Или лучше по старинке, повторять одни и те же стили из класса в класс?

Comments

[iBird Rose]

учитывая что ты пишешь свой бутстрап - твой вопрос сводится к тому "использовать бутстрап для верстки или нет". а тут нет однозначного ответа. кому нужен - использует. кому не нужен - не используют

[Chamalion]

вот пример использования такого подхода (всего ок. 250 строчек css кода) - https://github.com/private-doggo/senla_react_hw1

[Вадим]

конечный css в случае переиспользования через, скажем, extend в препроцессоре, весит примерно столько же.
Да, экономия на атомарных утилитарных класса, типа .jcc, но тогда разбухает html. В итоге профит сводится к минимуму, а то и наоборот уходит в минус, так как чем меньше весит html, тем быстрее он загрузится и отобразится в браузере.
Если перестараться с утилитарными классами, то в конечном итоге ваш html будет такой:
div class="card df fldc p20 fz20 bnone" и так далее
А чтобы гарантировать применением стилей из этих классов, скорее всего придётся прописать им(некоторым) !important, а это прям вообще не очень..

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

Тем не менее, сейчас в инудстрии процветает Tailwing CSS, который делает именно это. Так что решать Вам.

[Chamalion]

iBird Rose, вообще нет, не сводится :) Бутстрап все-таки тяжелый, а я создаю уникальные классы для конкретной страницы, соответсвенно лишних классов не будет

[iBird Rose]

Chamalion, бустрап кастомизируется. нужен тебе от бутстрап только сетка - ты можешь взять только сетку. даже js можешь бутстраповский не подключать.

[Chamalion]

Вадим, неплохой ответ, спасибо

Answer 1

[godsplan]

Я такое же использую только мой "бутстрап" ограничен этим

.container-fluid {
	width: 100%;
	margin: auto;
	max-width: 1980px;
}


.container {
	max-width: 1200px;
	margin: auto;
	padding-left:15px;
	padding-right: 15px;
	
}

.container.content {
	padding: 120px 0 0;
}

.container-fluid.content {
	padding: 120px 0 0;
}


.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.col {
	display: flex;
	flex-direction: column;
}


.align-center {
	align-items: center;
}

.space-between {
	justify-content: space-between;
}

.space-around {
	justify-content: space-around;
}

Answer 2

[Froggyweb]

ну такое себе. есть Atomic css со стилями mt15 p40 и далее
для шаблонов наверное норм, для более индивидуальной верстки - ад

Comments

[Chamalion]

отмечу решением, хоть и не считаю его лучшим. Tailwind мне лично понравился больше.

[Froggyweb]

Chamalion, такая же адская вещь на птичьем языке. бутстрап на порядок адекватней, поэтому и более популярен. Учить их классы - это никому не нужные знания. интересно я что там про повтор блоков каждому вот эту хрень писать?

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">

это же ад во плоти