CSS Architecture in Element Plus: OOCSS, BEM, and SCSS Implementation

In software development, architectural patterns help make code extensible, maintainable, and reusable; the same principles apply to CSS, where a lack of structure can lead to chaotic, hard‑to‑maintain styles, especially in complex pages.

The Element Plus component library adopts OOCSS (Object‑Oriented CSS) through the BEM (Block‑Element‑Modifier) methodology. OOCSS emphasizes encapsulation and inheritance, allowing common styles to be packaged into reusable objects.

Using a diagram of four containers, the article shows how each container can be encapsulated into an .item class, then extended via additional classes for view, like, comment, and more, illustrating the OOCSS principles of encapsulation and inheritance.

.item {
  position: relative;
  margin-right: 20px;
  font-size: 13px;
  line-height: 20px;
  color: #4e5969;
  flex-shrink: 0;
}

Two core OOCSS principles are highlighted: separating container from content and separating structure from skin. Element Plus provides Container and Layout components that embody these ideas.

When writing Vue components, CSS is naturally encapsulated, which aligns with OOCSS practices.

The article then introduces BEM, a concrete implementation of OOCSS. In Element Plus, a Block such as el-tabs contains Elements like el-tabs__item , and Modifiers like el-button--primary adjust appearance without breaking the underlying Block.

BEM naming follows the pattern block-name__element-name--modifier-name_modifier-value , with rules for lowercase letters, double underscores for elements, double hyphens for modifiers, and a single underscore between modifier name and value.

block-name__
--
_

JavaScript can generate BEM class names dynamically. A useNamespace hook creates functions b , e , m , etc., which build class strings based on a namespace (default el ) and block name.

export const useNamespace = (block) => {
  const namespace = computed(() => defaultNamespace);
  const b = (blockSuffix = '') => _bem(unref(namespace), block, blockSuffix, '', '');
  const e = (element) => element ? _bem(unref(namespace), block, '', element, '') : '';
  // ... other helpers
  return { namespace, b, e, /* ... */ };
}

SCSS mixins mirror the same structure. A config.scss file defines variables for namespace, separators, and state prefixes. Mixins @mixin b($block) , @mixin e($element) , @mixin m($modifier) , and @mixin when($state) generate the appropriate selectors, while helper functions in function.scss determine nesting rules.

@mixin b($block) {
  $B: $namespace + '-' + $block !global;
  .#{$B} {
    @content;
  }
}

A demo component icon.vue uses the useNamespace('icon') hook to apply the generated block class, and the corresponding SCSS file icon.scss includes the b(icon) mixin to style the component.

<template>
  <i :class="bem.b()"><slot /></i>
</template>

<script setup lang="ts">
import { useNamespace } from '@cobyte-ui/hooks'
const bem = useNamespace('icon')
</script>

The article also reviews the classic ITCSS architecture, which separates styles into layers (Settings, Tools, Generic, Elements, Objects, Components, Trumps). Element Plus maps its SCSS structure onto these layers, using Settings for variables, Tools for mixins/functions, and Objects/Components for OOCSS‑based component styles.

In summary, the piece demonstrates how OOCSS provides a conceptual model, BEM offers a concrete naming convention, JavaScript hooks and SCSS mixins automate class generation, and ITCSS offers a broader organizational framework, together forming a robust CSS architecture for the Element Plus library.