Fix minor inconsistency

[sumbach]

It looks like it was intended for these classes to have the same name.

If I've misinterpreted your intent, please ignore and close this pull request 😮

[inlikealion]

I believe you misunderstood @sumbach. Here .bar is used as a second class that extends .foo, found in a different file (if using Sass or concating files). They are not the same class, as every instance of class="foo" in markup would have the properties of .foo in base.css cascaded through .foo in theme.css.

Harry’s use of extending is having the skeleton or basic part of a thing abstracted out (see .media object) and then fleshing it out with another class that does more, either in decorating the object or changing its context.

@csswizardry Correct me if I misspoke.

[sumbach]

Makes sense to me @inlikealion.

If that is the case, I think this would be easier to understand with the "room" analogy:

In your base stylesheet:

    /**
     * Extend `.room` in theme.css
     */
     .room{}

In your theme stylesheet:

    /**
     * Extends `.room` in base.css
     */
    .room--kitchen{}
    .room--bedroom{}
    .room--bathroom{}

[inlikealion]

Looks like you get it, and your example does offer more clarity, especially for those less familiar with the technique. Although, I suspect Harry doesn’t want the extend technique to appear tied to BEM syntax.