S-BEnD

A scalable, pragmatic, synergistic selector naming strategy empowering end-users with efficient low-code solutions to … something, something toilet humour & emoji 🤘

 ↓
 .
{Scope}
 ∘
{Block}
 _
(Element)
 ⅋
[Data]

Kinda like BEM, but with more emoji.
And scoping. And no __. And data- modifiers.
So, not really like BEM at all…

OFFICIAL PRONUNCIATIONs

IPA: /ʃaɪt/
enPR: shīt

FORMAL GRAMMAR or whatevs

.S∘B_E[D] {...}

BNF

oh god how did this get in here I am not good with computers

<rule> ::= <selector> "{" <declaration>* "}" | <selector> "[" <attribute-selector> "]" "{" <declaration>* "}"
<selector> ::= "." <scope> | "." <scope> <lay-pipe> <block> | "." <scope> "[" <attribute-selector> "]"
<scope> ::= <poop-emoji>
<lay-pipe> ::= "∘"
<block> ::= <lolwut>
<attribute-selector> ::= <attribute> "=" <yolo> | <attribute> "*=" <yolo>
<attribute> ::= "data-*"
<poop-emoji> ::= <unicode-emoji-range>
<yolo> ::= <string>
<declaration> ::= <property> ":" <value> ";"
<property> ::= /* Any CSS property */
<value> ::= /* Any CSS value */

EXAMPLES

PSEUDOCODE

<div class="💧∘dunnyBlock" data-theme="dark" data-state="active loading">
  <h3 class="💧∘dunnyBlock_title">
    This is My Thing
    <i class="🧱∘icon 💧∘dunnyBlock_titleIcon" data-shape="rounded">🚽</i>
  </h3>
</div>

.💧∘dunnyBlock {...}

.💧∘dunnyBlock_title {...}

.💧∘dunnyBlock_titleIcon {...}
.💧∘dunnyBlock_titleIcon[data-shape="rounded"] {...}
.💧∘dunnyBlock_titleIcon[data-shape="circle"] {...}

.💧∘dunnyBlock[data-theme="light"] {...}
.💧∘dunnyBlock[data-theme="dark"] {...}
.💧∘dunnyBlock[data-state*="active"] {...}
.💧∘dunnyBlock[data-state*="loading"] {...}

.💧∘dunnyBlock[data-theme="dark"] {
    .💧∘dunnyBlock_title {...}
    .💧∘dunnyBlock_titleIcon {...}
}

Scope	BLock	Elements	Modifiers
`💧`	`dunnyBlock`	`title` `titleIcon`	`[data-shape="rounded"]` `[data-shape="circle"]` `[data-theme="light"]` `[data-theme="dark"]` `[data-state="active"]` `[data-state="loading"]`

SUDOCODE

I made an exmaple in ./demo for you to look at the coloured words or click here if you like clicking on things

???

{ :/: }

lindsayevans/S-BEnD