Class Basics

Named Cascading Style Sheets are divided into:

  • Namespaces
  • Structural Classes
  • Component Classes
  • Type Classes
  • Modifier Classes
  • Functional Classes
  • Exceptions
Edit on GitHub

Namespaces

Pick a namespace once you provide your library to a third party or need to prevent naming conflicts inside your project.

Syntax

.{namespace}-{context}
.{namespace}-{type}

Overview

PrefixTagExample
{namespace}-*.foo-main
Edit on GitHub

Structural Classes

Structural classes provide a semantic context for the underlying elements and are preferably utilized to define a layout.

Syntax

.{context}
.{context}-{name}

Overview

TagExample
article.content
body.body
footer.footer
header.header
main.main
nav.navigation
section.section
aside.sidebar
Edit on GitHub

Component Classes

Component classes provide a group context for the underlying elements and are preferably utilized to define a working unit.

Syntax

.component
.component-{name}
.component-{context}

Overview

PrefixTagExample
component-*.component-accordion
Edit on GitHub

Type Classes

Type classes are the foundation for reusable, modular and semantic CSS to provide the reader what elements, tags and sections are affected.

Syntax

.{type}
.{type}-{name}
.{type}-{context}

Overview

PrefixTagExample
address-address.address-content
audio-audio, object.audio-content
box-div.box-content
break-hr.break-content
button-a, button.button-content
caption-caption.caption-content
code-code, pre.code-content
col-td, th.col-content
data-datalist.data-content
field-input, select, textarea.field-content
form-form.form-content
frame-iframe.frame-content
image-canvas, img, object, picture, svg.image-content
item-dd, dt, li.item-content
label-label.label-content
legend-legend.legend-content
link-a.link-content
list-dl, ol, ul.list-content
modal-div.modal-content
overlay-div.overlay-content
progress-progress.progress-content
quote-blockquote, citie.quote-content
set-fieldset.set-content
shape-cicle, path, rect, symbol, use.shape-content
table-table.table-content
row-tr.row-content
text-em, small, span, strong, p.text-content
title-h1, h2, h3, h4, h5, h6.title-content
video-object, video.video-content
Edit on GitHub