example: separation of concern - JS/CSS

by scheinercc

HTML

<div class="generic-text">element text</div>

CSS

.generic-text-type2 {
    width: 150px;
    height: 150px;
    border: 1px solid black;
}

JavaScript

(function( window, $ ){
    
    $('.generic-text').on({
        mouseenter: function() {

						// bad
            /*
            $(this).css({
                'width': '150px',
                'height': '150px',
                'border': '1px solid black'
            });*/
            
            // good
            $(this).addClass('generic-text-type2');
        },
        mouseleave: function() {
            $(this).removeClass( 'generic-text-type2' );
        }
    });
    
})( window, jQuery );