AVO 🥑 CSS

AVO CSS is BEM-like naming escapes the class attribute. It's design allows for:

• Improved copy-paste (no class => className)
• Low specificity
• High compatability with utility CSS libraries
• Grep-able selectors with special characters @!:-_
• Clear composability
• Strong isolation
• Logical connection to components and props

Style

Element

[data-avatar] {
  --avatar--size: 3rem;
  height: var(--avatar--size);
  width: var(--avatar--size);
}

Value

[data-avatar~="inactive"] {
  opacity: 5;
}

Key-value

[data-avatar~="size:large"] {
  --avatar--size: 4rem;
}

Composition

[data-user-header--profile-avatar] {
  --avatar--size: 7rem;
}
[data-user-header--friend-avatar] {
  --avatar--size: 2.5rem;
}

Articles

Read more about AVO 🥑 CSS and how it compares to BEM.

• https://chan.dev/posts/avo-a-bem-dialect-using-data-attributes/
• Compare AVO 🥑 and standard BEM Conventions

Videos and streams

Build CSS APIs with Attribute Selectors

Nov 11, 2021

Let's Build a Pure CSS Stack

Nov 11, 2021

Let's Build a Pure CSS Stack

Nov 11, 2021

Build neutral color scale into colorway — LIVE

Apr 15, 2021

Building colorway media object with AVO — LIVE

Apr 13, 2021

Building colorway media object with AVO — LIVE

Apr 9, 2021

Building colorway with AVO — LIVE

Apr 8, 2021

Building Colorway element: surface— LIVE

Mar 22, 2021

Building Colorway with AVO 🥑 and Storybook— LIVE

Mar 15, 2021

Building Colorway with AVO 🥑 and Storybook— LIVE

Mar 3, 2021

Data Attribute Selector Methodology — AVO 🥑 — LIVE

Feb 8, 2021

Style with CSS Custom Properties

Jul 23, 2020

Style with CSS Custom Properties [livestream]

Jul 21, 2020