Unlike OOCSS, this is a real thing.

"Object Oriented" is one of the most important concept in IT industry. Almost every major programming language (including JavaScript) supports object-oriented methodology. They have "Type" and "Class" to separate from "Instance" which is the object produced by the class.

By separating instances from the class, you can keep your program is safe, functional and maintainable in long term. You can fix a class, modify a instance, extend them both in any way you want.

Those iconic features that they have are not seen in CSS since its beginning. Even after Nicole Sullivan introduced the OOCSS in 2008.

But, until now.

So, let's get started!

.Button
  appearance: none
  position: relative
  display: inline-block
  box-sizing: border-box
  border: 1px solid
  border-radius: 5px
  padding: 0 0.75em
  margin: 0
  height: 2em
  overflow: visible
  color: inherit
  font-size: 15px
  background-color: white
  text-decoration: none
  line-height: 1.9
  vertical-align: middle

It looks odd. But also it's a quite popular expression in other languages. Like JavaScript does:

var button = new Button();

By doing this, you can distinguish a parent class from instances.

<button class="Button button--upload" type="button">Upload</button>

<a href="#" class="Button button--cancel">Cancel</a>

If the parent class name is Button, the instance name will starts with button--.

.button--upload
  color: white
  border-color: transparent
  background-color: $green

.button--cancel
  color: white
  border-color: transparent
  background-color: $red

Thanks to the class did heavy lifting stuff, instance properties are clean and small.

<button class="Button button--upload" type="button">
  <span class="button--upload__icon"></span>
  <span class="button--upload__counter">1</span>
  Upload
</button>

.button--upload
  color: white
  border-color: transparent
  background-color: $green

  & &__icon
    @include icon(upload)

  & &__counter
    position: absolute
    top: -0.75rem
    right: -0.75rem
    padding: 0.1em
    min-width: 1em
    height: 1em
    border-radius: 0.5em
    overflow: hidden
    font-size: 0.75em
    line-height: 1
    background-color: $red

The & &__ isn't a typo. It creates safety scope.

Note: these elements are belong to instance not a parent class. Which means they would not be inherited.

• The meaning of -- and __ separators are same.
• We don't use .block__element__element format even if we have a grandchild element.
• Giving a recognizable class name to offspring is enough to organize.
• The format will be .type--identifier__element. So maybe TIE?

OOCSS doesn't support key concepts which every object oriented programming language has.

• Encapsulation
• Inheritance
• Messaging

The "OO" is metaphor.

<div class="Popup">
  <div class="Popup__window">
    <div class="Popup__header">
      <!-- Title Here -->
    </div>
    <div class="Popup__body">
      <!-- Messages Here -->
    </div>
    <div class="Popup__footer">
      <!-- Buttons Here -->
    </div>
  </div>
</div >

These child elements are part of structure. It will be inherited in your markup.

.Popup

  & &__window
    position: fixed
    top: 33%
    left: 50%
    margin-left: -150px
    width: 300px
    border-radius: 8px
    overflow: hidden
    background-color: white
    box-shadow: 0 5px 20px rgba(black, 0.5)

  & &__header
    padding: 0.75rem 0.5rem 0
    text-align: center
    font-weight: bold

  & &__body
    padding: 1rem 0.5rem
    line-height: 1.5

  & &__footer
    padding: 0.75rem 0.5rem
    border-top: 1px solid $gray
    text-align: center

<div class="Popup popup--simple-confirm">
  <div class="Popup__window">
    <div class="Popup__header">
      Information
    </div>
    <div class="Popup__body">
      <p class="popup--simple-confirm__message">Send a message to your inbox.</p>
    </div>
    <div class="Popup__footer">
      <button class="Button button--tint" type="button">Close</button>
    </div>
  </div>
</div >

.popup--simple-confirm

  & &__message
    text-align: center

The same as the .Button so far.

<div class="Popup popup--simple-confirm">
  <div class="Popup__window">
    <div class="Popup__header">
      <!-- This case, no title. -->
    </div>
    <div class="Popup__body">
      <p class="popup--simple-confirm__message">Send a message to your inbox.</p>
    </div>
    <div class="Popup__footer">
      <button class="Button button--tint" type="button">Close</button>
    </div>
  </div>
</div >

.popup--simple-confirm

  .Popup__header
    display: none

The code above is manipulating parent class's child element from a instance. It could be trouble when the inside of parent class has been changed. You would't want that.

Use parameters as a bridge.

<div class="Popup popup--simple-confirm param--no-title"><!-- Added parameters here -->
  <div class="Popup__window">
    <div class="Popup__header">
      <!-- This case, no title. -->
    </div>
    <div class="Popup__body">
      <p class="popup--simple-confirm__message">Send a message to your inbox.</p>
    </div>
    <div class="Popup__footer">
      <button class="Button button--tint" type="button">Close</button>
    </div>
  </div>
</div >

.Popup

  &.param--no-title

    .Popup__header
      display: none

Code like this, the parent class is handling own child element. Instances don't need to know anything about inside of the parent class.

This is it! This is how Object Oriented CSS works.

Therefore, finally CSS has completed the check list.

• Encapsulation ✔
• Inheritance ✔
• Messaging ✔

Thank you for reading this to the end.

If you have any question, we can discuss in here.

Hope you like it as much as we do.

Public Domain