Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

What do you think about the CARD - CSS BEM

HI,

What do you think about this CSS BEM convention? Once the user click's the card, it will take him to the specific article, but the card will be replaced with articles, or rather it will stay the same, but i will just add --modifaier ? 

<!-- ARTICLES/VIDEOS
    ================================================== -->
    <main class="container">

        <article class="card col small-12 medium-6 large-4">
        <header class="card__header">
            <img src="http://placehold.it/350x200" class="card__image" alt="">
        </header>

        <section class="card__body">
         <div class="card__information">
            <div class="card__month">September</div>
            <div class="card__day">25,</div>
            <div class="card__year">2016</div>
            <div class="card__topic">Self-development</div>
        </div>

        <h3 class="card__title">Programming Jargon</h3>

        <div class="card__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        </section>

        <footer class="card__footer">
            <div class="card__author">
                <span class="card__label">by Aurelian Spodarec</span>
            </div>
        </footer>
        </article>

    </main>

Is this good? And how do you think i shoudl code single page article? same thing, but just add modifier to change the font and all that?

http://codepen.io/Aurelian/pen/yaryGE?editors=1010

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Well the BEM CSS style is just for styling purposes, treating CSS rules as modules so they can be easily reused elsewhere, so really it just depends on whether you want the same or similar styling on the single/specific article page or something different.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Well, yeah, but is this good though :D This will be only used for probably article excerpts, and video excerpts etc.. and then on the main article there is going to be another BEM styling.