Classoid

argument.txt

Arguably, in `page.inadequate.css`, this `.left` class should be `.block.left`, and `.right-on-hover` ought to be `.block.right-on-hover`, or something like that.

Still, creating name conflicts is a trap made hard to avoid.

Using namespaces eases the process. Classoids provide hierarchical classes. In this example, our rules related to `left` specifically on a `button` only apply on a `button` classoid; the `left` class does not apply to it. This avoids the name clashing.

(Unfortunately, CSS namespaces is already a thing, extended from XML namespaces, not what we want. I picked the term "classoid", because it is like a class.)

The example is contrived, but the problem is present. See also the last slides here <http://www.slideshare.net/stubbornella/object-oriented-css>.

page.css

/* I am not sure that syntax would be compatible with CSS. Look at the semantic. */

/button {
  /* Base button style */
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5em 1em;
}
/button(middle) {
  text-align: center;
}
/button(left) {
  text-align: left;
}
/button(left(right-on-hover)):hover {
  text-align: right;
}
/button(rounded) {
  border-radius: 4px;
}
/button(squared) { /* … */ }
/text-outline {
  text-shadow: 1px 1px 0px black, 1px -1px 0px black,
              -1px 1px 0px black, -1px -1px 0px black;
}

page.html

<!-- Somewhere we have this style: -->
<div classoid="button(middle) text-outline"> Click me </div>

<!-- Somewhere else: -->
<div classoid="button(middle squared)"> Click me </div>

<!-- Yet another place: -->
<div classoid="button(left(right-on-hover) rounded)"> Click me </div>

page.inadequate.css

/* This is a problematic subset reimplementation of what we have in `page.css`. */

.button {
  /* Base button style */
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
  vertical-align: baseline;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5em 1em;
}
.button.left {
  text-align: left;
}
.button.left.right-on-hover:hover {
  text-align: right;
}

/* Somewhere else in CSS code: */
.left {
  float: left;
}
/* Somewhere else still: */
.right-on-hover:hover {
  position: absolute;
  right: 0;
}

You cannot implement the example I gave in AMCSS. How would you do right-on-hover? It wouldn't be one level down in the tree.

The benefit of namespaces is to be able to store symbols one level down. AMCSS only provides one level of depth.

button
  middle
  left
    right-on-hover  ← impossible in AMCSS
  rounded
  squared
text-outline

I am definitely not saying that AMCSS is less capable than OOCSS. It is a bit better by providing the tree-like module functionality seen above, except that it only goes one level down, which forbids right-on-hover here.

On the other hand, in certain ways, while more elegant, it is less capable than BEM, which can provide any depth.

.button__left__right-on-hover { /* … */ }

But BEM is inelegant:

<div class="button button__left button__left__right-on-hover"> Click me </div>

vs

<div classoid="button(left(right-on-hover))"> Click me </div>

As for scoping, do you mean the current design of HTML-centered scoping?

<section>
  <style scoped>
    /* insert scoped CSS here */
  </style>
</section>

If so, that is also a welcome addition to CSS, but not a silver bullet. We need SCSS' @extend, and classoids provide it and more.