Working with generated content from a CMS

It's probable that if you use ECSS with any sort of content management system (Wordpress, Ghost, Drupal et al) you will encounter a situation where it's not possible to add a class to every element. For example, in a Wordpress page or post, it would be unrealistic to expect users entering content to remember the right class to add to each paragraph tag. In these situations, I think pragmatism has to win out.

Set a ECSS class to the enclosing element and (grudgingly) accept that all the nested elements will be set with a type selector. Here's some example markup:

<main class="st-Main">
    <h1>How to survive in South Central?</h1>
    <p>A place where bustin' a cap is fundamental. </p>
    <ul>
        <li>Rule number one: get yourself a gun. A nine in yo' ass'll be fine</li>
        <li>Rule number two: don't trust nobody.</li>
    </ul>    

</main>

Here is how you might author the CSS to handle selecting those elements:

.st-Main {
    h1 {
        /* Styles for h1 */
    }
    p {
        /* Styles for p */
    }
    ul {
        /* Styles for ul */
    }
    li {
        /* Styles for li */
    }
}

I'm not crazy about that. We're nesting selectors, tying our styles to elements, basically everything we normally want to avoid with ECSS. However, I'm being honest. The reality is that this is likely going to be the best compromise we can manage. Where it is possible to add a class to elements we absolutely should. However, there will be situations where this simply isn't possible and no amount of Ivory Tower idealism will help in those situations. Remember Pin Cing Do!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.99.71