@Chamalion

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

Недавно я решил создать "свой" 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, название класса/ атрибут запишется через запятую после основного переиспользованного класса (что опять же сокращает место)

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

Как считаете, стоит ли продолжать придерживаться такого подхода? Или лучше по старинке, повторять одни и те же стили из класса в класс?
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
godsplane
@godsplane
Я такое же использую только мой "бутстрап" ограничен этим
.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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Froggyweb
ну такое себе. есть Atomic css со стилями mt15 p40 и далее
для шаблонов наверное норм, для более индивидуальной верстки - ад
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
В чем проблема взять от Bootstrap только нужные части? Продолжать такой подход точно не стоит, хотя бы из-за
.btn {
min-width: 192px;
}

Помимо верстальщика, сайтом будет заниматься еще как минимум 1 сторонний разработчик, и ему разбираться в ваших самопальных классах при интеграции и последующих доработках будет очень не круто
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы