Здравствуйте!
Вопрос по поводу стилизации с помощью заранее заготовленных классов. Сейчас пытаюсь копировать вёрстку сайтов (для практики), и встретил подход к вёрстке с помощью которого заранее изготавливаются классы, вроде :
.g1-mega {
font: 700 27px/1.05 serif;
font-family: "Work Sans",Roboto,sans-serif;
letter-spacing: -.025em;
color: #000;
color: var(--g1-itxt-color);
text-transform: none
}
Здесь понятно, что это один из вариантов оформления текста, который к примеру будет использован для планшетов или смартфонов к примеру, а вот класс, с подобными стилями :
.g1-giga {
font: 800 27px/1.08333 serif;
font-family: "Work Sans",Roboto,sans-serif;
letter-spacing: 0;
color: #000;
color: var(--g1-itxt-color);
text-transform: none
}
Этот класс уже с шрифтом пожирнее, соответственно где - ни будь в хэдере если нам нужен текст пожирнее мы применим второй класс, а если где-нибудь ещё нам нужно потоньше соответственно первый!
В общем, я попробовал создать простой аналог этого подхода -
<div class="main">
<!-- HEADER -->
<div class="header">
<!-- LOGO & CONTACTS -->
<div class="siteContainer centered cleared">
<div class="logo floated-l">THE MAIN</div>
<div class="contacts floated-r">+7 (999) 999 - 9999</div>
</div>
<!-- LOGO & CONTACTS -->
<!-- DECOR BETWEEN BLOCKS -->
<div class="siteContainer centered decor"></div>
<!-- DECOR BETWEEN BLOCKS -->
<!-- NAV -->
<div class="siteContainer centered">
<nav>
<ul class="menu inline-blocked">
<li class="menuItem inline-blocked">О нас</li>
<li class="menuItem inline-blocked">О вас</li>
<li class="menuItem inline-blocked">О них</li>
</ul>
</nav>
</div>
<!-- NAV -->
</div>
<!-- HEADER -->
</div>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Arial';
}
html{
font-size: 24px;
}
li{
list-style: none;
}
.main{
width: 100vw;
height: 100vh;
background: #f8f8f8;
}
.floated-l{
float: left;
}
.floated-r{
float: right;
}
.cleared::after{
content: '';
display: block;
clear: both;
}
.logo{
padding: 10px 0 10px 10px;
}
.contacts{
padding: 10px 10px 10px 0;
font-size: 0.9em;
}
.decor::after{
content: '';
display: block;
height: 10px;
background: #f8f8f8;
}
.header{
width: 100%;
}
.inline-blocked{
display: inline-block;
}
.centered{
text-align: center;
}
.siteContainer{
max-width: 1280px;
margin: 0 auto;
background: #fff;
}
.menuItem{
margin-left: 30px;
margin-right: 30px;
padding: 10px 0px 10px 0px;
cursor: pointer;
font-size: 0.8em;
}
и задался вопросами!
1) Как им (данным подходом) правильно пользоваться, ведь каждое общее свойство, вроде
float: left можно записать в отдельный класс, и просто подставлять в будущем к нужным элементам?
2) На сколько этот подход удобен, если речь идёт о много-страничных сайтах?
3) Как этому лучше всего научиться? Искать закономерности в этих классах, ну вроде классов "позиционирующих" или классов работающих со шрифтами и т. д.?
4) На одном из сайтов, которые я пытался скопировать я встречал блоки, у которых было по 6 классов (офк каждый класс выполнял какую-то стилизацию), на сколько это приветствуется, т.к. лично у меня при первом просмотре таких блоков возникает небольшой шок, т.к. классы помимо всего выглядят как "g-fl-mn-dragged" ну вроде этого.
5) Я понимаю, что можно просто получить один класс конкретного элемента, и описать стили, или вообще использовать родительский элемент и с помощью
.someClass > div > li a+span{color: #fff} к примеру добираться до элементов, но так мы будем переписывать одни и те-же свойства в СиЭсЭс по несколько раз, или можно перечислить классы и прописать им общие свойства типа
.m, .b, .c, li{ display: block } так в чём же разница, это всё таки "вкусовщина" или же грамотный подход к вёрстке?
P.s.: сорри за вставку кода в текст, забыл акк кодпэне, спасибо за ответы заранее! :D
Простой
Средний