Reduce from-content-api depth of applicability

At the moment, rules contained in from-content-api are applied to all children, preventing the easy application of new styles in subsequent widgets.

For example, inserting a card:

<div class="article-body from-content-api" itemprop="articleBody">
<!-- content here -->
<a href="/technology/2013/jun/07/uk-gathering-secret-intelligence-nsa-prism" class="card-wrapper" data-link-name="in card link" aria-hidden="true">
    <div class="furniture furniture--left card">
        <h2 class="card__title">Related</h2>
        <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/7/1370610648841/Documents-show-GCHQ-has-h-005.jpg" alt="" class="card__media">
        <div class="card__body u-text-hyphenate">
            <h3 class="card__headline">UK gathering secret intelligence via covert NSA operation</h3>
        </div>
    </div>
</a>

<!-- more content here -->
</div>

Requires a lot of overriding on our part to style the card widget:

/* Furniture
   ========================================================================== */

.furniture {
    display: none;
}
.furniture--left {
    float: left;
    clear: left;
    width: $a-leftCol-width;
    margin-left: ($a-leftCol-width + $gutter)*-1;
    margin-bottom: $baseline*2;

    @include mq($a-leftCol-trigger) {
        .test-link-card--on & {
            display: block;
        }
    }
}

.card {

}
    .card__media {
        display: block;
        width: 100%;
    }
    .card__title {
        font-family: $serifheadline !important;
        font-size: 18px !important;
        font-size: 1.8rem !important;
        line-height: 26px !important;
        line-height: 2.6rem !important;
    }
    .card__body {
        padding: $baseline*1.5 $gutter/2 $baseline*6;
        min-height: 76px; // image height - baseline * 2
        background: $mushroom;

        .card-wrapper:hover &,
        .card-wrapper:focus & {
            background: $darkMushroom;
        }
    }
        .card__headline {
            font-family: $serif !important; // Override .from-content-api h3 defaults
            color: #444;
            font-size: 14px !important;
            font-size: 1.4rem !important;
            line-height: 20px !important;
            line-height: 2rem !important;
        }

Notice the crazy number of important rules.

Since we are going to add more and more widgets inside this zone, I suggest that we reduce the depth of applicability of typography styles inside from-content-api.

We should thrive to target direct children elements only:

.from-content-api {

    @extend %type-6;
    color: #333;

    @include mq(tablet) {
        font-size: 18px;
        font-size: 1.8rem;
        line-height: 26px;
        line-height: 2.6rem;
        margin-bottom: 16px;
        margin-bottom: 1.6rem;
    }

    > p,
    > blockquote,
    > ul,
    > ol,
    > address {
        margin: 0 0 $baseline*2 0;
        padding: 0;
    }
    > h2 {
        @extend %type-4;
        color: #333;
        margin-bottom: $baseline;

        @include mq(tablet) {
            font-size: 22px;
            font-size: 2.2rem;
            line-height: 28px;
            line-height: 2.8rem;
        }
        @include mq(desktop) {
            font-size: 22px;
            font-size: 2.2rem;
            line-height: 28px;
            line-height: 2.8rem;
        }
    }
    > h3 {
        @extend %type-5;
        margin: 0;
        font-family: georgia, serif;
    }

}

But by doing this we don't apply typography styles to widgets that rely on those, for example live blogs. Meaning we will have to apply the from-content-api class everywhere it is needed.

guardian / frontend

Reduce from-content-api depth of applicability #1344