Muranx
@Muranx
кто понял this тот в цирке не смеётся

Как правильно учиться подходу к стилизации с помощью классов?

Здравствуйте!

Вопрос по поводу стилизации с помощью заранее заготовленных классов. Сейчас пытаюсь копировать вёрстку сайтов (для практики), и встретил подход к вёрстке с помощью которого заранее изготавливаются классы, вроде :

.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
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ответы на вопрос 2
iamd503
@iamd503 Куратор тега CSS
Верстальщик
1. Посмотрите в сторону bootstrap
2, 3, 4 Посмотрите в сторону scss
5. Никогда так не делайте, смотрите в сторону BEM
Ответ написан
@n1ksON
Интерн
Для позиционирования элементов используйте технологии flexbox и grid.
Для автоматизации и упрощения написания стилей используйте SCSS/Sass.
Существует методология БЭМ, которая подразумевает написание нескольких классов в тэгах. То есть блок может иметь несколько классов описывающих его позиционирование и состояние.
Почитайте про БЭМ подробнее, тогда должно будет всё проясниться.
Также существуют готовые UI-библиотеки и фреймворки, самый популярный - Bootstrap.
Рутинная верстка автоматизируется и упрощается с помощью различных технологий, например: шаблонизаторы (Pug), препроцессоры (вышеупомянутые SCSS/Sass), сборщики (Webpack/Gulp) и так далее
Ответ написан
Ваш ответ на вопрос

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

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