Luciano Battagliero

§CSS Naming Conventions

This naming convention is inspired by the BEM(opens in new tab) and SUIT CSS(opens in new tab) methodologies.

/* Variables */
--VariableName
--VariableName_VariationName

/* Utilities */
.u-UtilityName
.u-UtilityName_VariationName

/* Components */
.ComponentName
.ComponentName__DescendantName
.ComponentName__DescendantName_ModifierName
.ComponentName_ModifierName

§Class Separator

A forward slash is used to visually separate different groups of classes.

<div class="Page__Title / u-TextFamily_Mono">
<section class="Section / u-MarginTop_0">

See Legibility in Long Class Lists.

§Tailwind Prefix

Tailwind classes use the tw: prefix.

tw:w-full
tw:animate-pulse

§Themes

Themes are applied via a data-theme attribute on the page container. The default theme is dark.

/* Dark (default) */
<div className="Page">

/* Light */
<div className="Page" data-theme="light">

/* Gray */
<div className="Page" data-theme="gray">

/* Blue */
<div className="Page" data-theme="blue">

§Metadata

Every page uses generateCustomMetadata to set its metadata. Pages are not indexed by default.

/* Default (not indexed) */
generateCustomMetadata({
  title: "Page Title",
})

/* With description */
generateCustomMetadata({
  title: "Page Title",
  description: "A short description.",
})

/* Indexed by search engines */
generateCustomMetadata({
  title: "Page Title",
  index: true,
})