Skip to main content

Performance & BEM Convention

BEM Naming Convention​

Basic Structure​

.block {
}
.block__element {
}
.block--modifier {
}

BEM Principles​

  1. Block: Standalone component
.card {
}
.navbar {
}
.button {
}
  1. Element: Parts of a block (double underscore)
.card__title {
}
.card__image {
}
.navbar__menu {
}
.button__icon {
}
  1. Modifier: Variations of block/element (double dash)
.card--featured {
}
.button--large {
}
.button--primary {
}
.navbar__menu--collapsed {
}

Real-world BEM Example​

/* Block component */
.card {
  background: #fff;
  padding: 20px;
}

/* Elements that depend upon block */
.card__title {
  font-size: 2em;
  font-weight: bold;
}

.card__content {
  font-size: 1.1em;
}

/* Modifier that changes the style of the block */
.card--featured {
  background: #f7f7f7;
  border: 2px solid gold;
}

Performance Optimizations​

1. Selector Performance​

Avoid Deep Nesting​

/* Bad - Deep nesting */
.header .nav .nav-item .link a {
}

/* Good - Flat structure */
.header__nav-link {
}

Minimize Selector Complexity​

/* Bad - Complex selector */
div.container > div.content article.post > h2.title span {
}

/* Good - Direct and simple */
.post__title-text {
}

2. CSS Property Performance​

Use Transform Instead of Position​

/* Bad - Triggers layout */
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
}

/* Good - Uses GPU acceleration */
.modal {
  position: absolute;
  transform: translate(-50%, -50%);
}

Optimize Animations​

/* Good - GPU-accelerated properties */
.element {
  transform: translateX(100px);
  opacity: 0.5;
  will-change: transform, opacity;
}

/* Avoid animating */
.element--avoid {
  width: 100px; /* Triggers layout */
  height: 100px; /* Triggers layout */
  top: 50px; /* Triggers layout */
}

3. Media Optimization​

Progressive Loading​

/* Load critical styles first */
.header {
  /* Critical styles */
}

/* Then load larger background images */
@media (min-width: 768px) {
  .header {
    background-image: url('large-bg.jpg');
  }
}

4. File Organization​

Component-Based Structure​

/* components/_card.css */
.card {
}
.card__title {
}
.card__content {
}
.card--featured {
}

/* components/_button.css */
.button {
}
.button__icon {
}
.button--primary {
}

5. Performance Best Practices​

CSS Loading​

<!-- Critical CSS inline -->
<style>
  /* Critical path CSS here */
</style>

<!-- Non-critical CSS deferred -->
<link
  rel="preload"
  href="styles.css"
  as="style"
  onload="this.rel='stylesheet'"
/>

Reduce Redundancy​

/* Bad - Repetitive */
.button--primary {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  background: blue;
}

.button--secondary {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  background: gray;
}

/* Good - Using common base class */
.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
}

.button--primary {
  background: blue;
}

.button--secondary {
  background: gray;
}

Common BEM Patterns​

Form Components​

.form {
}
.form__group {
}
.form__input {
}
.form__input--error {
}
.form__label {
}
.form__submit {
}
.nav {
}
.nav__item {
}
.nav__link {
}
.nav__link--active {
}
.nav--vertical {
}
.modal {
}
.modal__overlay {
}
.modal__content {
}
.modal__header {
}
.modal__close {
}
.modal--large {
}

Performance Testing Tips​

  1. Browser Dev Tools

    • Use Paint Flashing to identify repaints
    • Check Layout Shifts in Performance panel
    • Monitor FPS during animations

  2. CSS Stats

    • Monitor selector complexity
    • Track declaration count
    • Identify redundant rules

  3. Rendering Performance

    /* Use content-visibility for long pages */
    .content-block {
      content-visibility: auto;
      contain-intrinsic-size: 0 500px;
    }

  4. Layout Thrashing Prevention

    // Bad - Causes layout thrashing
    elements.forEach(el => {
      const height = el.offsetHeight;
      el.style.height = `${height + 10}px`;
    });

    // Good - Batch read/write operations
    const heights = elements.map(el => el.offsetHeight);
    elements.forEach((el, i) => {
      el.style.height = `${heights[i] + 10}px`;
    });