7
\$\begingroup\$

Please review my code based off of a responsive Initializr template. It's functional and visually correct, but I know there's better ways to write the code. Let me know if I can layout the HTML5 better and/or best practices I'm not using for CSS selectors because I feel my stylesheet is all over the place.

HTML

    <!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if lt IE 9]><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Site - example.org</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <div class="header-container">
            <header class="clearfix">                
                <nav>
                    <h1><a href="/"><img src="img/logo.png" class="logo" alt=""></a></h1>
                    <div class="toggle">
                        <span class="bars-btn"></span>
                        <span class="bars-btn"></span>
                        <span class="bars-btn"></span>
                    </div>
                    <div class="social">    
                        <ul>
                            <li><a href="http://www.facebook.com" class="facebook" target="_blank"></a></li>
                            <li><a href="http://www.twitter.com" class="twitter" target="_blank"></a></li>
                        </ul>
                    </div>                     
                    <ul class="accordion">
                        <li><a href="#">About Us</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>    
                        </li>   
                        <li><a href="#">Programs</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>    
                        </li> 
                        <li><a href="#">News and Events</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>
                        </li> 
                        <li><a href="#">Apply</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>     
                        </li>                          
                        <li><a href="#">Donate</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>    
                        </li>                          
                        <li><a href="#">Contact</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>    
                        </li>                          
                    </ul>
                </nav>
            </header>
        </div>

        <div class="slider-container">
            <div class="slider">

                <article>
                    <section>
                        <h1>Lorem ipsum dolor sit amet, te idque corpora sit.</h1>
                        <p><a href="#">Learn More About What We Do &raquo;</a></p>
                    </section>
                </article>

            </div> <!-- #main -->
        </div> <!-- #slider-container -->

        <div class="highlighter-container">
            <div class="highlighter wrapper clearfix">

                <ul>
                    <li class="apply-btn"><a href="#">Apply</a></li>
                    <li class="donate-btn"><a href="#">Donate</a></li>
                    <li class="events-btn"><a href="#">Events</a></li>
                    <li class="volunteer-btn"><a href="#">Volunteer</a></li>
                </ul>

            </div> <!-- #main -->
        </div> <!-- #hig-container -->

        <div class="main-container">
            <div class="main wrapper clearfix">

                <aside>
                        <iframe width="499" height="281" src="//www.youtube.com/embed/mbfbzKquYYI" frameborder="0" allowfullscreen></iframe>
                </aside>

                <article>
                    <section>

                        <p>Lorem ipsum dolor sit amet, te idque corpora sit. Duo eu quas omittam, ex vis invidunt prodesset, est quem oblique at. Accusata consequat interesset ad eos, id prima vocent audire his, senserit indoctum at sit. Pro graeco reprehendunt in, vel equidem dolorum consequat id, no sea paulo platonem explicari.</p>

                        <p>Lorem ipsum dolor sit amet, te idque corpora sit. Duo eu quas omittam, ex vis invidunt prodesset, est quem oblique at. Accusata consequat interesset ad eos, id prima vocent audire his, senserit indoctum at sit.</p>

                        <h3><a href="#">Learn More About What We Do &raquo;</a></h3>
                    </section>
                </article>

            </div> <!-- #main -->
        </div> <!-- #main-container -->

        <div class="footer-container">
            <footer class="wrapper">
                <div class="legal">
                    <p><a href="#">Privacy Policy</a> | <a href="#">Legal Provisions</a></p>
                </div>

                <div class="copyright">
                    <p>12345 Fake St., Springfield IL<br><a href="tel:800-555-5555" class="telephone">(800) 555-5555</a></p>

                    <p><small>Copyright &copy; 2013 Site</small></p>

                </div>
            </footer>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>        
        <script src="js/main.js"></script>
    </body>
</html>

CSS

body {
    font-family: 'Open Sans', sans-serif;
    color: #4C4C4E;
}

a {
    text-decoration: none;
}

.wrapper {
    width: 93.445%;
    margin: 0 auto;
}

/* ===================
    ALL: Orange Theme
   =================== */

.header-container {
/*    background-color: transparent;*/
}

.light-gray {
    background-color: #F5F5F6;
}

.slider-container {
    background-color: #E6E7E8;
}

.finder-container {
    display: none;
}

.footer-container {
    background-color: transparent;
}

/* ==============
    MOBILE: Menu
   ============== */

header nav {
    width: 100%;
    margin: 0 auto;
}

header nav h1 {
    margin: 10px 0 15px 15px; /* 3% 0 5% 4% */
}

.logo {
    width: 91px;
    height: 50px;
}

.toggle {
    position: absolute;
    float: right;
    right: 15px;
    top: 18px;
    width: 30px;
    color: #FFFFFF;
    cursor: pointer;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.bars-btn {
    background-color: #4D4D4F;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    display: block;
    height: 4px;
    width: 30px;
    margin: 7.5px 0;
    border-radius: 50px 50px 50px 50px;
}

.social, .social ul, .social li {
    display: none;
}

.accordion {
    margin: 0 0 15px 0;
    padding: 0;
    list-style: none;
    *zoom: 1;
}

.accordion:before,
.accordion:after {
    content: " "; 
    display: table; 
}

.accordion:after {
    clear: both;
}

.accordion ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.accordion > li {
    position: relative;
    margin: 0;
    text-indent: 15px;
    list-style: none;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: 600;
    background-color: #404041;    
    border-top: 1px solid #B1B3B5;
}

.accordion > li > .parent {
    margin-right: 15px;
    background: url(../img/bullet-down.png) no-repeat right;
}

.accordion > li > a {
    display: block;
    color: #E6E7E8;
    text-transform: uppercase;
}

.accordion li ul {
    position: absolute;
    left: -9999px;
}

.accordion > li.hover > ul {
    left: 0;
    background-color: #fff;
}

.accordion li li.hover ul {
    top: 0;
    left: 0;   
}

.accordion li li a {
    display: block;
    color: #E6E7E8;
    font-size: 12px;
    font-weight: 600;
    background: #4D4D4F;
    position: relative;
    z-index: 100;
    border-top: 1px solid #B1B3B5;
    text-transform: none;
}

/* ==============
    MOBILE: Finder
   ============== */

/* ==============
    MOBILE: Slider
   ============== */
.slider {
    width: 93.445%;
    margin: 0 auto;
    padding: 24px 0;
}

.slider article section h1 {
    color: #626366;
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
    text-align: center;
}

.slider article section p {
    margin: 0;
    font-size: 14px;
    line-height: 39px;
    font-weight: 600;
    text-align: center;
}

.slider article p a {
    color: #7A7C7E
}

/* ==============
    MOBILE: Highlighter
   ============== */

.highlighter { 
    background: #fff repeat 0 0;
    padding: 0;
}

.highlighter ul { 
    width: 100%;
    overflow: hidden; 
    margin: 0;
    padding: 0;
    text-align: center;
    clear: both;
}

.highlighter li {
    float: left; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 100%;
    text-align: center;
}

.highlighter a { 
    margin: 0; 
    display: block; 
    text-align: center; 
    font-family: "Open Sans", sans-serif; 
    font-size: 14px;
    line-height: 52px; 
    font-weight: 600; 
    color: #ffffff; 
}

.highlighter li.apply-btn a,
.highlighter li.donate-btn a,
.highlighter li.events-btn a,
.highlighter li.volunteer-btn a {
    margin-top: 16px;
    background: #7C7E80 repeat 0 0
}

.highlighter li.volunteer-btn a {
    margin: 16px 0 ;
    background: #7C7E80 repeat 0 0
}

.highlighter li.apply-btn a:hover,
.highlighter li.donate-btn a:hover,
.highlighter li.events-btn a:hover,
.highlighter li.volunteer-btn a:hover { 
    background: #ccc repeat 0 0
}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 0;
}

.main aside {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.main p {
    margin: 0 0 28px 0;
}

.main iframe,   
.main object,
.main embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main article {
    width: 100%;
    padding: 15px 0;
}

.main article section p {
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
}

.main article section h3 {
    margin: 0;
    padding: 0 0 15px 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.main article section h3 a {
    color: #6F7073;
}

.footer-container footer {
    padding-top: 10px;
    border-top: 1px solid #B1B3B5;
}

.footer-container footer .legal p {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

.footer-container footer .legal p a, .footer-container footer .copyright p a {
    color: #6F7073
}

.footer-container footer .copyright p {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
}

.footer-container footer .copyright small {
    color: #B1B3B5;
    font-size: 11px;
    line-height: 23px;
}

.page {
    margin-top: 20px;
    margin-bottom: 20px;
}

.page article {
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
    margin: 0;
    vertical-align: top;
}

.page article header h1 {
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
}

.page article p {
    margin: 0 0 20px 0;
}

.page aside {
    display: none;
}

.youtube {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.youtube iframe,   
.youtube object,
.youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.focus-box {
    padding: 10px;
    background-color: #F5F5F6;
}

.focus-box h3 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 45px;
    font-weight: 600;
}

.image img {
    display: none;
}  

.focus-box ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.focus-box li {
    margin-bottom: 10px
}

.focus-box li:before {
    content: "- ";
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .logo {
    padding-top: 20px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 600px) {

/* ====================
    INTERMEDIATE: All
   ==================== */
    .wrapper {
        width: 93.165%;
    }

    header nav h1 {
        margin: 10px 0 15px 18px; /* 3% 0 5% 4% */
    }

    .toggle {
        right: 25px;
    }

    .slider {
        width: 93.165%;
        margin: 0 auto;
        padding: 52px 0;
    }

    .slider article section h1 {
        font-size: 30px;
        line-height: 40px;
        width: 65%;
        text-align: left;

    }

    .slider article section h3 {
        font-size: 15px;
        line-height: 39px;
        font-weight: 600;
    }

    .slider article section p {
        font-size: 15px;
        text-align: left;
    }

    .highlighter li {
        width: 50%;
    }

    .highlighter li.apply-btn a {
        margin: 16px 10px 8px 0;
    }

    .highlighter li.donate-btn a {
        margin: 16px 0px 8px 10px;
    }

    .highlighter li.events-btn a {
        margin: 8px 10px 16px 0px;
    }

    .highlighter li.volunteer-btn a {
        margin: 8px 0px 16px 10px;
    }

    .footer-container footer .legal {
        float: left;
    }

    .footer-container footer .copyright {
        float: right;
        text-align: right;
    }

    .page article {
        font-size: 16px;
    }

    .page article header h1 {
        font-size: 30px;
        line-height: 40px;
    }

    .page article p {
        margin: 0 0 30px 0;
    }

    .focus-box {
        padding: 20px;
    }

    .focus-box h3 {
        font-size: 26px;
    }


/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    .oldie nav a {
        margin: 0 0.7%;
    }
}

@media only screen and (min-width: 768px) {

/* ============
    WIDE: Menu
   ============ */

    header nav {
        width: 93%;
        margin: 0 auto;
    }

    header nav h1 {
        margin: 16px 0 14px 0px;
        width: 100%;
    }

    .finder-container {
        display: block;
        background-color: #E6E7E8;
    }

    .finder {
        font-size: 13px;
        line-height: 23px;
        font-weight: 600;
    }

    .finder a {
        color: #787A7C;
    }

    .logo {
        width: 105px;
        height: 58px;
    }

    .social {
        position: absolute;
        float: right;
        display: block;
        width: 100px;
        top: 24px;
        right: 8px;
        font-size: 12px;
    }

    .social ul {
        display: inline;
        padding: 0;
        margin: 0;
    }

    .social ul li {
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        *display: inline;
    }

    .facebook, .twitter {
        width: 39px;
        height: 39px;
        display: block;
        margin-right: 1px;
        vertical-align: middle;
        background: url(../img/icons-social.png) no-repeat;
    }

    .facebook {
        background-position: 0 0;
    }

    .twitter {
        background-position: 0 -47px ;
    }

    .accordion {
        float: right;
        margin: 0;
        padding: 0;
        list-style: none;
        *zoom: 1;
        background: none;
    }

    .accordion:before,
    .accordion:after {
        content: " "; 
        display: table; 
    }

    .accordion:after {
        clear: both;
    }

    .accordion ul {
        list-style: none;
    }

    .accordion a {
        font-size: 13px;
        line-height: 23px;
        font-weight: 700;
        color:#626366;
        text-transform: uppercase;
    }

    .accordion li {
        position: relative;
    }  

    .accordion > li {
        float: left;
        margin-right: 42px;
        padding-bottom: 8px;
        line-height: 23px;        
        text-indent: 0px;
        background-color: transparent;
        border-top: 0;
    }

    .accordion > li:last-child {
        margin-right: 0px;
    }

    .accordion > li > .parent {
        margin-right: 0;
        background-image: none;
    }

    .accordion > li > a {
        display: block;
        color: #626366;
    }

    .accordion li ul {
        position: absolute;
        left: -9999px;
    }

    .accordion > li.hover > ul {
        left: 0;
        margin-top: 6px;
    }

    .accordion li li.hover ul {
        left: 100%;
    }

    .accordion li li a {
        display: block;
        padding: 4px 0;
        min-width: 175px;
        text-indent: 10px;
        font-weight: 400;
        color: #fff;
        background: #BBBDC0;
        position: relative;
        z-index: 100;
        text-transform: none;
        border-top: 1px solid rgba(141, 144, 146, 0.3);
    }

    .accordion li li a:hover {
        background-color: #BBBDC0;
    }

    .accordion li li li a {
        z-index: 200;
    }

    .accordion ul li:first-child a {
        border-top: 3px solid #7b7c80;
    }

    .accordion ul li:first-child a:after {
        content: '';
        position: absolute;
        left: 24px;
        top: -10px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #7b7c80;
    }

   .accordion li:last-child ul li:first-child a:after {
        left: 140px;
    }

    .accordion > li:last-child.hover > ul {
        left: -112px;
    }

    .slider {
        margin: 0 auto;
        padding: 40px 0;
    }

    .slider article section h1 {
        font-size: 30px;
        width: 70%;
    }

    .page {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .page aside {
        display: block;
        float: left;
        padding-right: 20px;
        width: 26.5%;
    }

    .sub-menu {
        position: relative;
        padding: 0px;
        border: solid 1px #D1D2D4;
    }

    .sub-menu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .sub-menu ul li {
        margin: 0;
        padding: 20px 0 0px 20px;
        font-size: 13px;
        font-weight: 700
    }

    .sub-menu ul li:last-child {
        padding: 20px 0 20px 20px;
    }

    .sub-menu ul li a {
        color: #808284;
    }

    .page article {
        display: block;
        float: right;
        width: 70.5%;
    }

    .image img {
        display: block;
        float: left;
        width: 226px;
        height: 220px;
        padding: 0px 20px 10px 0;
    }  

}
/* ============
    WIDE: Main
   ============ */

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */
   .wrapper {
        width: 86%;

   }

    header nav {
        width: 86%;
   }

    header nav h1 {
        float: left;
        width: 160px;
    }

    .logo {
        width: 160px;
        height: 88px;
    }

    .social {
        top: 10px;
        right: 68px;
    }

    .accordion {
        float: right;
        padding-top: 87px;
    }

    .accordion a {
        font-size: 15px;
    }

    .accordion > li {
        margin-right: 42px;
    }

    .slider {
        width: 86%;
        margin: 0 auto;
        padding: 62px 0;
    }

    .slider article section h1 {
        font-size: 35px;
        width: 65%;
    }

    .slider article section h3 {
        font-size: 18px;
    }

    .highlighter li {
        float: left;
        width: 25%;
    }

    .highlighter li.apply-btn a {
        margin: 16px 10px 16px 0;
    }

    .highlighter li.donate-btn a,
    .highlighter li.events-btn a {
        margin: 16px 10px 16px 10px;
    }

    .highlighter li.volunteer-btn a {
        margin: 16px 0 16px 10px;
    }

    .main {
        padding: 0 0 30px 0;
    }

    .main aside {
        position: relative;
        float: left;
        width: 47.75%;
        height: 281px;
        padding: 0 10px 0 0;
        overflow: hidden;
    }      

    .main article {
        float: right;
        padding: 0 0 0 10px;
        width: 48.75%;
        height: 281px;        
    }

    .page aside {
        padding-right: 24px;
        width: 23.35%;
    }

    .sub-menu ul li {
        font-size: 14px;
    }

    .page article {
        display: block;
        float: right;
        width: 74.25%;
    }

    .image img {
        display: block;
        float: left;
        width: 252px;
        height: 246px;
        padding: 0px 20px 10px 0;
    }  

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
\$\endgroup\$
  • 2
    \$\begingroup\$ I'd recommend trying to split the CSS section into separate parts since it's quite a large code block. \$\endgroup\$ – Jamal Dec 6 '13 at 20:15
  • \$\begingroup\$ Thanks Jamal. I've thought about using @import but I heard a mono-lithic format is better for speed. \$\endgroup\$ – Conor Dec 6 '13 at 20:17
  • \$\begingroup\$ I'm not familiar with this myself, but I received a flag concerning the code length. You could still wait for someone more experienced to weigh in on this. \$\endgroup\$ – Jamal Dec 6 '13 at 20:18
  • 3
    \$\begingroup\$ The CSS code is gigantic! Does it all really matter for the question? Focusing on a small important part may attract more answers. \$\endgroup\$ – Dmitri Zaitsev Dec 13 '13 at 15:49
10
\$\begingroup\$

HTML:

  1. You should adjust your Conditional Comments based on the browsers you need to support. For example having support for IE7 is rare these days. Some projects don't even need IE8 support.

    As an example if you need support for IE8, you can use this:

    <!DOCTYPE html>
    <!--[if lt IE 9]><html class="no-js lt-ie9"><![endif]-->
    <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
    
  2. Your viewport meta tag should look like this:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  3. You copied and pasted the Google Webfonts snippet. Just a little facelift, to match your coding style:

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700">
    

    I dropped the type attribute and used " instead of '

  4. Using headings for logos is wrong. A logo is branding, not a textual element. Headings should be used for site or page titles. Other than this, using a h1 there doesn't boost your SEO.

    <a href="/"><img src="img/logo.png" class="logo" alt="logo"></a>
    
  5. Your logo sits inside your navigation, but it's not a part of it. Move it outside the nav into your header:

    <a href="/"><img src="img/logo.png" class="logo" alt="logo"></a>
    <nav>
        <!--your navigation-->
    </nav>
    
  6. When to use target="_blank"

    A Bad Reason: "Internal" links and "External" links are different.

  7. Using a section inside an article which only has one section is unnecessary. The article itself creates a new document outline. Since there is a section inside, you have an untitled article and a section with a Lorem ipsum heading.

  8. You may want to use the main element to wrap your main content area. Remember to set main { display: block; } for it as well, because not all browswers have a User Agent Style for this already.

CSS:

  1. Use classes (e.g. site-title) instead of selecting things like header nav h1 (or in your case it's rather site-logo without a h1). Maybe you'll end up with another header element containing a navigation? What do you do then? Remember that the header element isn't limited for the use as a site wide header. You may have one in every article or even in your site footer.

  2. Use shorthand in cases like border-radius: 50px 50px 50px 50px; to reduce unnecessary repetition: border-radius: 50px;

  3. If you drop IE7 support, you can use this clearfix:

    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }
    
  4. If you set list-style: none; on an unordered list, you don't need to repeat it on its list-items.

  5. Don't omit closing semi-colons on the last property declarations inside of rule declarations. That will run yourself into troubles for sure. The performance gains of saving the few bytes will almost be non-existent.

I stop here for now, because your CSS you included is huge and there is probably a big room for further improvements. As a general advice: Think about these rules and reconsider if you really need such a deep structure.

\$\endgroup\$
10
\$\begingroup\$

Since I don't have high enough rep to comment, I'll post this instead...

fyi: @import vs https://stackoverflow.com/questions/7199364/import-vs-link I'd keep the same master stylesheet if it were me.


EDIT: <h1> or <img> as a logo? Debate on... short answer, It depends on the context of the website—is it a single page layout? a personal blog? the next Amazon? Here's a few articles on the subject that will shed some light: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ & https://webmasters.stackexchange.com/questions/4515/h1-vs-h2-vs-other-for-website-title-logo-and-seo & http://www.amberweinberg.com/the-logo-to-h1-or-not-to-h1/ make your own asumptions. I've gone both ways on different projects.


Here's a few links to look up and read into. On a smaller application such as this I doubt it would matter much, however, when you get into larger projects specificity and maintainability will cause you issues. http://css-tricks.com/efficiently-rendering-css/ & http://csswizardry.com/2011/09/writing-efficient-css-selectors/

http://smacss.com/ - if you don't like it, it's at least a great starting point for thinking about maintainability and organization. OOCSS and BEM are the alternative.

Also, there are many ways to approach a menu icon, here's some methods of approach: http://css-tricks.com/three-line-menu-navicon/ I prefer font icons in place of using three elements to make the bars but that's just my opinion.

normalize.css is great! However, http://nicolasgallagher.com/about-normalize-css/ read approach 1:

Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

Also, if you're going to use Conditional commenting for IE at least style the .browsehappy class so it isn't... you know... bare bones... ;)

I'd steer clear of using heading tags for items such as this <h3><a href="#">Learn More About What We Do &raquo;</a></h3> this isn't a heading, but the browser will read it as such, instead create a separate class for it and style it in a heading style if you want it to be bold and larger.

Also, bear in mind, <section>'s, <article>'s, <main>'s, <footer>'s, and <header>'s will always label a heading as null if you don't have one (e.g. untitled) in the semantic outline. I'd drop your code into this: http://gsnedders.html5.org/outliner/ and see if some of those tags shouldn't be replaced with <div>'s which hold no semantic value.

as for the html5 portion. It really depends on the support levels you require for browser compatibility. I tend to forego wrapping html5 tags e.g. <div class="header-container"> as it's a bit repetitive at this point and bulky (but I also tend to only target IE9+ too, anything under I feed a single column, but I'm lazy like that).

I use a very simple starting point for most projects. It's laid out like this:

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>

<meta charset="utf-8">
<link rel="dns-prefetch" href="www.google-analytics.com"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<meta http-equiv="cleartype" content="on">

<link rel="stylesheet" href="/libs/css/main.css">
<script src="/libs/js/vendor/modernizr-custom.min.js"></script>

<body>

<header role="banner">
    <a href="#"></a>
    <h1 role="heading">title</h1>
</header>

<nav role="navigation">
    <a role="link" href="#" accesskey="1">Who</a>
    <a role="link" href="#" accesskey="2">What</a>
    <a role="link" href="#" accesskey="3">When</a>
    <a role="link" href="#" accesskey="4">Why</a>
</nav>
<section>
    <form role="form" id="email-form" action="#" method="post" novalidate>
        <label for="email" id="email-label">Email</label>
        <input id="email" aria-labelledby="email-label email-form" type="email" placeholder="e.g. john@doe.co" name="email">
        <button role="button" aria-labelledby="email-form" type="submit">Submit</button>
    </form>
</section>

<main role="main">
    <h2 role="heading"></h2>
    <article role="article">
        <h3 role="heading"></h3>
        <section>
            <h4 role="heading"></h4>
            <p></p>
            <strong></strong>
        </section>
        <aside role="complimentary">
            <figure>
            <img role="img" src="" width="" height="" alt>
                <figcaption></figcaption>
            </figure>
        </aside>
    </article>
    <hr role="separator">
    <aside role="note">
    </aside>
    <hr role="separator">
</main>

<footer role="contentinfo">
    <h2 role="heading"></h2>
</footer>

<script src="/libs/js/jquery.min.js"></script>
<script>
    (function (a, h, d, c, g, f) {
        a.GoogleAnalyticsObject = c;
        a[c] || (a[c] = function () {
            (a[c].q = a[c].q || []).push(arguments)
        });
        a[c].l = +new Date;
        g = h.createElement(d);
        f = h.getElementsByTagName(d)[0];
        g.src = "//www.google-analytics.com/analytics.js";
        f.parentNode.insertBefore(g, f)
    }(window, document, "script", "ga"));
    ga("create", "UA-XXXXX-X");
    ga("send", "pageview");
</script>

P.S. If you're not going to use modernizr or jquery, make sure you don't include the libraries as they're unnecessary at that point. Additionally, you wouldn't need the conditional comments wrapping the <html> tag either, nor the class="no-js" class.

\$\endgroup\$
  • \$\begingroup\$ The difference hit from using selectors other than class/id is greatly exaggerated. Yes, they're faster, but not fast enough to make a difference: stevesouders.com/blog/2009/03/10/… \$\endgroup\$ – cimmanon Dec 9 '13 at 20:06
  • 1
    \$\begingroup\$ Using negative indentation for hiding text is rather antiquated and has poor performance in some browsers (see: zeldman.com/2012/03/01/…). \$\endgroup\$ – cimmanon Dec 9 '13 at 20:16
  • \$\begingroup\$ @cimmanon The objective of that particular recommendation was more aimed at semantics, but thank you for that article, I'll definitely look into the differences from both approaches. As for the performance, it matters less now with the improvements in devices and web, but still something worth mentioning. But the real issue with selectors is organization and maintainability on a larger scale. \$\endgroup\$ – darcher Dec 10 '13 at 18:06
  • 2
    \$\begingroup\$ Whether the image should be an <img> tag or a CSS background-image depends on whether it is significant or decorative. When printing a hard copy, for example, many browsers will omit CSS backgrounds (some optionally, some forcibly). A logo might be significant enough to be an <img>. If so, be sure to provide an alt attribute. \$\endgroup\$ – 200_success Dec 25 '13 at 8:41
  • \$\begingroup\$ Great point, I ran into that issue in the past and in that instance applied a work around using @media print{ .logo:before { content: url(images/logo.png); } } to make it work in the past, although I'm unsure whether or not it is actually good practice as you can't apply an alt attribute so it lacks any meaning. I've never looked into it enough tbh. Great comment! \$\endgroup\$ – darcher Dec 26 '13 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.