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

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

How would you refactor this News page?

How woudl you re-factor this news page? Coding, nesting? Nesting in a good spot? naming? differnet naming?

Everyone does it differently, but how do YOU do it, what would YOU change to it? Please, i just need some hand to see a different way to do this. 

 <!-- Breaking News
    ================================================== -->
    <section id="news" class="page-section">
    <div class="container">

    <div class="row">
    <div class="col xs-1">
        <div class="title-block">
            <h1 class="title">Breaking News</h1>
            <h2 class="sub-title">Halloween is comming soon!</h2>
            <!-- Edited by a Treehouse Community Moderator: Please don't use profanity in questions, answers, or comments -->
        </div>
    </div>
    </div><!-- /row -->

    <div class="row">
        <article class="news col xs-1 medium-1-3 large-1-3">

            <section class="news__image">
                <img src="http://ashley-bootstrap3-website-template.little-neko.com/v1.8/files/images/news/news1.jpg">
            </section>

            <section class="news__container orange">

                <h3 class="teritary-header">New hair cut today</h3>
                <h4 class="sub-header">September 12</h4>
                <p>The Duchess took her choice, and was gone in a moment. 'Let's go on with the game,' the Queen said to Alice; and Alice was too much frightened to say a word, but slowly followed her back to the croquet-ground.</p>

                <button href="" class="btn btn--small">Read More</button>
            </section>

        </article>

        <article class="col xs-1 medium-1-3 large-1-3">

            <section class="news">
                <img src="http://ashley-bootstrap3-website-template.little-neko.com/v1.8/files/images/news/news1.jpg">
            </section>

            <section class="news__container orange">

                <h3 class="teritary-header">New hair cut today</h3>
                <h4 class="sub-header">September 12</h4>
                <p>The Duchess took her choice, and was gone in a moment. 'Let's go on with the game,' the Queen said to Alice; and Alice was too much frightened to say a word, but slowly followed her back to the croquet-ground.</p>

                <button href="" class="btn btn--small">Read More</button>
            </section>

        </article>

        <article class="col xs-1 medium-1-3 large-1-3">

            <section class="news">
                <img src="http://ashley-bootstrap3-website-template.little-neko.com/v1.8/files/images/news/news1.jpg">
            </section>

            <section class="news__container orange">

                <h3 class="teritary-header">New hair cut today</h3>
                <h4 class="sub-header">September 12</h4>
                <p>The Duchess took her choice, and was gone in a moment. 'Let's go on with the game,' the Queen said to Alice; and Alice was too much frightened to say a word, but slowly followed her back to the croquet-ground.</p>

                <button href="" class="btn btn--small">Read More</button>
            </section>

        </article>
    </div><!-- /row -->
    </div>
    </section>

1 Answer

Tom Holland
Tom Holland
24,288 Points

I don't have time to refactor the page for you but here's a couple thoughts...

I wouldn't wrap the container in a <section>. If you want to wrap the page in a <section> you could do something like <section id="news" class="page-section container"> and get rid of a superfluous <div>.

I would probably wrap my headers in a <header> element, like:

<header class="title-block">
    <h1 class="title">Breaking News</h1>
    <h2 class="sub-title">Halloween is comming soon!</h2>
    <!-- Edited by a Treehouse Community Moderator: Please don't use profanity in questions, answers, or comments -->
</header>

and

<header>
    <h3 class="teritary-header">New hair cut today</h3>
    <h4 class="sub-header">September 12</h4>
</header>

Then perhaps you could eliminate the class declarations on the h elements and style them with something like

.news__container header h1 {
    style:foo;
}

I would remove <section class="news"> and put the image in the <header> element. IMO, it's not a section and it's also not 'news'. It's related to the concept declared in the header elements.

It's a code smell to use hyphens and underscores. Best practices are to prefer dashes in css selectors.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

COOL! Loooks a lot more cleaner now and better.

And I'm using a BEM convention so __ is block and -- is modifier.

Thanks! :)

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Few notes, having container separate div isn't always the best, since it can cut of a different background and live a space or glutter. I think that depends from project, and this is one section, i suppose you took this as if it was all webstei maybe, or whatever lol

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Thats what im actually building https://aurelianspodarec.github.io/hcHalloween/ lol but im preparing my self for a job, so i really need to push to write good code