HTML class names

Short, abstract and informative

For example we have a mock-up with section "Our Team Members" and another with section "Our Leadership Team" which is partial different, but has members too. Let's name it.

We will focus & show class names only, but mention a bit of block's structure. We will use BEM, but it's not important, all works for any naming convention. (Note: Use scroll in the code).

// Common junior's way. Note: It's WRONG!
// Often a junior developer "copy-past"-reflect the section content to class names.

// --------------------------------------------------------------------------------
// 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 Leadership Team
// --------------------------------------------------------------------------------

.our-leadership-team { ... }

.our-leadership-team__leader-item { ... }

// ... etc the same to above code

Why is that bad? (Note: Use scroll in the 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 Leadership Team
// --------------------------------------------------------------------------------

// Many classes with the same styles - repeating yourself is very bad!
.our-leadership-team { ... }

.our-leadership-team__leader-item { ... }

// ... etc the same to above code

First, you can use Google Translate (as a extension too) for looking for good (short & clear) words for class names.

Let's try name that all.

// 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-leadership-team {}

// 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 {}

How can it be more right way?

// We try to create universal blocks for the website

// --------------------------------------------------------------------------------
// Person. Universal person's representation on the website (photo, name, etc)
// --------------------------------------------------------------------------------

.person {}

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

.person__name {}

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

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

// It's just a container for .social {} items
.person__socials {
  // It's a separate universal 'social' BEM block with own slyles
  .social {}
}

// It's class-modificator of .person, it changes .person on any context
.person--famous .person__name { font-size: 2em; color: $color-accent; }

// --------------------------------------------------------------------------------
// Our Team Members
// --------------------------------------------------------------------------------

.staff {} // short & clear$ it can be .team {}

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

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

.staff .person {} // Optional changes for a .person in .staff

// --------------------------------------------------------------------------------
// Our Leadership Team
// --------------------------------------------------------------------------------

// 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

.staff--leadership { ... }

.staff--leadership .person {} // Optional changes for a .person in .staff--leadership

HTML code of our sections (just base parts).

<section class="staff">
    <div class="staff__inner">

    <div class="staff__something"></div>

    <div class="staff__list">
        <div class="person">
            <div class="person__photo">
                <div class="person__socials">
                    <div class="social">Facebook</div>
                    <div class="social">Instagram</div>
                    <div class="social">Twitter</div>
                </div>
            </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="staff staff--leadership">
    <div class="staff__inner">

    <div class="staff__list">
        <div class="person--famous"> <!-- a famous person is a bit different -->
            <div class="person__photo">
                <div class="person__socials">
                    <div class="social">Facebook</div>
                    <div class="social">Instagram</div>
                    <div class="social">Twitter</div>
                </div>
            </div>
            <h4 class="person__name">Jone Big Doe</h4>
            <p class="person__role">CEO</p>
            <p class="person__desc">Lorem ipsum etc...</p>
        </div>
        <!-- etc -->
    </div>       

    </div>
</section>

<section class="customers">
    <div class="customers__inner">

        <div class="person">
            <div class="person__photo"></div> <!-- no socials -->
            <h4 class="person__name">Janet Doe</h4>
            <p class="person__role">CEO The Company</p>
            <p class="person__desc">Lorem ipsum etc...</p>
        </div>

        <!-- etc -->        

    </div>
</section>

Conclusions:

1) All class names are short & clear.

2) They are block and independent (easy modifications).

3) We can use .person in many contexts.

4) There is one place where we edit .person styles.

5) But we can change it with modificator classes.

6) Our code doesn't look like shit now! Profit.