JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<div class="person">
    <img class="-photo" src="http://test.gorges.us/site/assets/files/1043/skennedy.60x60.jpg"/>
    <div class="-title">
        Designer, Front-End Champion Guy
    </div>
    <div class="-description">
        Sean Kennedy is a Web Designer/Developer and Technical Project Manager. He has a B.A. in Music Theory and Composition from Hampshire College. Sean is an experienced and skilled user interface designer. He helps clients translate their information and marketing needs into well organized web interfaces. In addition, Sean can provide advice about content quality and placement as it relates to SEO (Search Engine Optimization).
    </div>
</div>

<div class="building">
    <img class="-photo" src="http://edge.lovingapartments.com/poi/images/poi/446/446-The-Dancing-Building.JPG"/>
    <div class="-title">
        Frank Gehry’s Dancing Building
    </div>
    <div class="-description">
        Architect Frank Gehry’s Dancing Building site was originally home to a Neo-Renaissance home dating back to the 19th century. That house was destroyed by a bomb during World War II, and its ruins were finally taken away in 1960. Czech ex-president Vaclav Havel grew up in the apartment building next door and lived there until the mid-1990s.
    </div>
</div>

CSS

/* person component: */

.person {
    border: solid 2px #eee;
    border-radius: 8px;
    padding: 15px;
}

.person .-photo {
    float: right;
    margin-left: 10px;
}

.person .-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.person .-description {
    color: #4060a0;
}

/* building component: */

.building {
    background: #eee;
    border: solid 2px #888;
    border-radius: 3px;
    padding: 10px;
    margin-top:20px;
}

.building .-photo {
    box-sizing: border-box;
    width: 100%;
}

.building .-title {
    margin-top: 5px;
    color: #888;
    font-size: 20px;
    font-family: Helvetica, Arial, sans-serif;
}

.building .-description {
    margin-top: 5px;
}

/* photo attribute: */

.-photo {
    padding: 1px;
    border: solid 1px #ccc;
}

JavaScript

/*

CSS Component/Attribute Pattern (CSS-CAP)
=========================================

Author: Rasmus Schultz <https://twitter.com/mindplaydk>

In the following, I use the word "component", meaning a grouping of CSS rules
designed to work with a specific structured grouping of HTML elements. I use
the word "attribute", meaning a specific element (or set of elements) that
belong to a component. For example, in the "person" component defined in this
example, "photo" and "title" are attributes of the "person" component.


The Problem
-----------

The traditional CSS pseudo-namespace approach has limitations, in terms of
being able to target the individual "attribute" elements of a component in
a general fashion. It bypasses the cascading aspect of CSS, which is arguably
the most important aspect of CSS.

For example, using a typical pseudo-namespace approach, to target the
"photo" attributes of both the "person" and "building" component, you would
need a double selector, such as:

    .person-photo, .building-photo { ... }

You would also need to write out the class-attributes in HTML, long-hand, and
for component attributes, which leads to a lot of duplicate semantics, such as:

    <div class="person">
        <img class="photo person-photo" ... />
    </div>
    
That sort of thing makes me cringe! I already know the image inside the div
is a "person-photo", because it's nested inside the "person" component - I don't
like to restate my assumptions at every level, and I find that doing so goes
against the nature of HTML, which is all about context.

The typical answer to my type of reservation about this, is to treat things that
are really just attributes, as separate components - for example, this is common:

    .person { ... }
    .person .photo { ... }
    
    .building { ... }
    .building .photo { ... }

    .photo { ... }

The problem with that, is you have no clear distinction of what is actually a
component, from what is actually just an attribute -...