JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<!--
WRONG
-->
<div id="wrong">
    <div class="content">
        <div id="logo">
            <img src="http://www.insilico.dk/includes/css/~/media/InSilico%20Media/Logo/insilico_top_logo.ashx" />
        </div>
        
        <div id="header-big">
            FRONT-END BEST PRACTICES!
        </div>
        <div class="text">
            This is awesome. <span class="bold-text">FUCKING</span> awesome!
            <br/>
            <br/>
            Kinda...
        </div>
        
        <div id="submission">
            <div id="checkbox">
                <span class="tick"></span> Add newsletter?
            </div>
        </div>
    </div>
    
    <ul id="menu">
        <li class="menu-list-item">
            <a href="#" class="menu-list-item-link">
                <strong>Link #1</strong>
            </a>
        </li>
        <li class="menu-list-item">
            <a href="#" class="menu-list-item-link">
                <strong>Link #2</strong>
            </a>
        </li>
        <li class="menu-list-item">
            <a href="#" class="menu-list-item-link">
                <strong>Link #3</strong>
            </a>
        </li>
    </ul>
    
</div>


<!--
HOW IT SHOULD BE
-->
<div id="correct">
        
    <div id="logo">
        InSilico
    </div>
    
    <section class="content">
        <h1>Front-end best practices!</h1>
        <p>
            This is awesome. <strong>FUCKING</strong> awesome!
        </p>
        <p>
            Kinda...
        </p>
        
        <div id="submission">
            <label>
                <span class="checkbox">
                    <input type="checkbox" />
                </span>
                Add newsletter?
            </label>
        </div>
    </section>
    
    <nav>  
        <ul>
            <li>
                <a href="#">
                    Link #1
                </a>
            </li>
            <li>
                <a href="#">
                    Link #2
                </a>
       ...

SCSS

/*
WRONG
*/

#wrong {
    #logo {
        background: purple;
        width: 190px;
        height: 50px;
        
        img {
            margin-left: 20px;
            margin-top: 7px;
        }
    }
    .content {
        #header-big {
            font-size: 30px;
            font-weight: bold;
            margin: 0.7em 0;
        }
        
        .text {
            font-size: 22px;
            
            .bold-text {
                font-weight: bold;
            }
        }
    }
    
    #menu {
        .menu-list-item {
            background: blue;
            
            .menu-list-item-link {
                color: red;
            }
        }
    }
    
    #checkbox {
        .tick {
            width: 20px;
            height: 20px;
            background: grey;
            display: inline-block;
                
            &.checked {
                background: red;
            }
        }
    }
}



/*
HOW IT SHOULD BE
*/

#correct {
    #logo {
        background: purple url("http://www.insilico.dk/includes/css/~/media/InSilico%20Media/Logo/insilico_top_logo.ashx") no-repeat  scroll center center;
        text-indent: -9999px;
        overflow: hidden;
        width: 190px;
        height: 50px;
    }
    
    section.content {
        h1 {
            font-size: 30px;
            text-transform: uppercase;
        }
        
        p {
            font-size: 22px;
        }
    }
    
    .checkbox {
        width: 20px;
        height: 20px;
        background: grey;
        display: inline-block;
        
        &.checked {
            background: red;
        }
        
        input[type=checkbox] {
            opacity: 0;
        }
    }
    
    nav {
        li {
            background: blue;
            
            a {
                color: red;
                font-weight: bold;
            }
        }
    } 
    
    
}

JavaScript

//Checkbox
$("#checkbox").on("click", function() {
    var isChecked = $(".tick", this).is(".checked");
    $(".tick", this).toggleClass("checked", !isChecked);
});

//Checkbox
$(".checkbox input").on("change", function() {
    var isChecked = $(this).is(":checked");
    $(this).parents(".checkbox").toggleClass("checked", isChecked);
});