Именование классов

использование методологии БЭМ

БЭМ - Блок / Элемент / Модификатор

Основные проблемы

  1. Чрезмерно длинные селекторы
  2. Дублирование одних и тех же стилей
  3. Перегруженность селекторами (слишком глубокая вложенность)
  4. Отсутствие глобальных стилей

БЭМ Принципы

(разбивка сайта на блоки)

Блок это минимальная составляющая сайта, которая может существовать отдельно, независимо от того где она используется.

БЭМ Принципы

(описание блока)

.menu {
    &__item { 
        float: left;
    }

    &__link { 
        font-size: 16px;

        &--active {
            font-weight: 700;
        }
    }
}
.menu {
   
}

.menu__item { 
    float: left;
}

.menu__link { 
    font-size: 16px;

    &--active {
        font-weight: 700;
    }
}

После того как мы выделили блоки, их нужно разбить на составляющие (элементы этого блока), и прописать различные их состояния через модификаторы

Использование БЭМ на примере

При описании глобальных стилей блока не должно затрагиваться позиционирование этого блока, а только внешний вид. Таким образом все отступы и смещения должны применяться только в определенном контексте использования.

Пример: есть дизайн с секциями "Our Team Members" и где-то на другой странице - "Our Sponsors", которые слегка отличаются, но основное поведение схоже. Давайте назовем классы.

Неправильная реализация

// --------------------------------------------------------------------------------
// Our Team Members
// --------------------------------------------------------------------------------
.our-team-members {

  .our-team-members-member-item { 
 
    .our-team-members-member-item-photo { ... }
    
    .our-team-members-member-item-name { ... }
    
    .our-team-members-member-item-position { ... }
    
    .our-team-members-member-item-text { ... }
    
    .our-team-members-member-item-socials {
        // And a junior developer often try to reflect 1:1 DOM structure to styles.
        // Many-many-many nesting levels
        // OMG! O_o It already looks like a story
        .our-team-members-member-item-socials-item { ... }
    }
  }
}

// --------------------------------------------------------------------------------
// Our Sponsors
// --------------------------------------------------------------------------------
.our-sponsors { ... }

.our-sponsors-sponsor-item { ... }

// ... etc the same to above code

Что же здесь неправильного?

// --------------------------------------------------------------------------------
// Our Team Members
// --------------------------------------------------------------------------------
// 'our' is totally 'empty'-word, and 'members' has weak and repetitive meaning
.our-team-members {

  .our-team-members-member-item {
  
    // All is very/super long
    .our-team-members-member-item-photo { ... }
    
    // member == item
    // Looks like 'member' needs to be a block, not an element
    .our-team-members-member-item-name { ... }
    
    .our-team-members-member-item-position { ... }
    
    .our-team-members-member-item-text { ... }
    
    // Looks like 'social' needs to be a block, not an element
    // We can have .socials {} in the header or footer, etc
    .our-team-members-member-item-socials {
        // Many levels nesting is the pure evil!
        .our-team-members-member-item-socials-item { ... }
    }
  }
}

// --------------------------------------------------------------------------------
// Our Sponsors
// --------------------------------------------------------------------------------
// Many classes with the same styles - repeating yourself is very bad!
.our-sponsors { ... }

.our-sponsors-sponsor-item { ... }

// ... etc the same to above code

По началу можно использовать гугл передчик, чтобы подобрать более удачное определение для нашей секции

Подбор имени

// These are various names

.employee {} // good, but a bit long and it isn't applicable to customers etc
.employees {}

.individual {} // too long & strange for our goals
.individuals {}

.worker {} // too special
.workers {}

.person {} // good, but doesn't have a plurale form "-s"
.person-list, .people {}

.member {} // not clear and strange for our goals 
.team, .team-members, .our-sponsors {}

// Let's stop on that.
// Because 'person' is abstract and we can use it on diffetent context 
// (for C-lavel, employees, customers, etc)

.person {}

.person__photo {}

.person__name {}

.person__role {}

.person__desc {}

Правильная реализация

// --------------------------------------------------------------------------------
// Person. Universal person's representation on the website (photo, name, etc)
// --------------------------------------------------------------------------------
.person {
    // It's class-modificator of .person, it changes .person on any context
    &--famous {
        .person__name { font-size: 2em; color: $color-accent; }
    }
}

.person__inner {}
  
.person__photo {} // or 'thumbnail'

.person__name {}

.person__role {} // 'role' is shorter than 'position'

.person__desc {} // or 'description', 'content', 'text'

// It's just an additional class for .social {} item
.person__socials {
  // It's a separate global 'social' BEM block with own slyles
  // You can rewrite some styles for socials in current context
  .social__item {}
}

// --------------------------------------------------------------------------------
// Our Team Members
// --------------------------------------------------------------------------------
// short & clear, it can be .team {}, can use .staff--c-level , to make
// changes to general view of the section
.staff {}

.staff__inner {} // it's a container/wrapper of the staff content

.staff__something {} // Something in the .staff section

.staff__item {} // Optional changes for a .person in .staff, add some spacing etc.

// --------------------------------------------------------------------------------
// Our Sponsors
// --------------------------------------------------------------------------------
// If "Our Leadership Team" is similar to "Our Team Members"
// we make just a class-modificator .staff--leadership
// That class add some changes to the standard .staff styles

.sponsors { ... }

.sponsors .staff__item {} // Optional changes for a .person in .sponsors

HTML реализация данных секций

<section class="staff">
    <div class="staff__inner">
        <div class="staff__something"></div>
        <div class="staff__list">
            <div class="person">
                <div class="person__photo">
                    <ul class="person__socials socials">
                        <li class="socials__item">Facebook</li>
                        <li class="socials__item">Instagram</li>
                        <li class="socials__item">Twitter</li>
                    </ul>
                </div>
                <h4 class="person__name">Jone Water</h4>
                <p class="person__role">Plumber</p>
                <p class="person__desc">Lorem ipsum etc...</p>
            </div>
            <!-- etc -->
        </div>
    </div>
</section>

<section class="sponsors">
    <div class="sponsors__inner">
        <div class="person">
            <div class="person__photo"></div> // no socials
            <h4 class="person__name">Janet Doe</h4>
            <p class="person__role">Gold sponsor</p>
            <p class="person__desc">Lorem ipsum etc...</p>
        </div>
        <!-- etc -->        
    </div>
</section>

Выводы

1) Все имена классов должны быть короткими и понятными

2) Все элементы сайта должны быть отдельными блоками/модулями, которые можно  легко повторно использовать по всему сайту, независимо от контекста.

3) При написании стилей всегда стремиться к минимальной вложенности селекторов (без вложенности). Что даст возможность легко переопределять поведение тех или иных элементов.

4) Все стили определенного блока хранятся в одном месте

 

 

Made with Slides.com