Sparking joy in a design system

Implementing BEM in a cluster of products made with React.js following Marie Kondo’s secret of happiness

Teamwork

Designing an interface thinking in BEM

Block_element — identifier

.l-header {
display: flex;
flex-direction: row;
padding: 1rem;
flex-wrap: wrap;
gap: 1rem;
align-items: stretch;


&__title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
order: 1;
flex-grow: 1;
}

&__details {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
order: 2;
flex-grow: 2;
flex-wrap: wrap;
gap: .5rem;
}

&__actions {
display: flex;
flex-direction: column;
justify-content: space-between;
order: 3;
flex-grow: 0;
flex-wrap: wrap;
gap: .5rem;
}

&--dark-mode {
background: @rdb-dark;
color: @rdb-white;
}
}
<div className={`l-header ${modifier || ''}`}>

<div className="l-header__title">
<PageTitle
subtitle={subtitle}
icon={icon}
isEditable={isEditable}
onTitleChange={onChange}
title={text}
/>
</div>
{details && (
<div className="l-header__details">

{details.one && details.one}
{details.two && details.two}
{details.three && details.three}

</div>
)}
{actions && (
<div className="l-header__actions">

{actions.one && actions.one}
{actions.two && actions.two}

</div>
)}
</div>

Robust CSS architecture

<div class="l-header ">
<div class="l-header__title">
<div class="c-section-title">
<h1 class="c-section-title__title">
Microfrontend Title
</h1>
<div class="c-section-title__props">
Title props
</div>
</div>
</div>
<div class="l-header__details">
<div class="c-detail">
<span class="c-detail__label">Detail label</span>
<h3 class="c-detail__content">Detail </h3>
</div>
<div class="c-detail"></div>
<div class="c-detail"></div>
</div>
<div class="l-header__actions"></div>
</div>

ABEM: a useful adaptation of BEM

<div className={`l-header l-header--$ {modifier || ''}`}>
<div className={`l-header $ {modifier || ''}`}>

Selector specificity

Semantics

Naming consistency

Spring cleaning the codebase

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store