CSS best practises 1

by Richard Hunter

HTML

<div class="oocss">
    <div class="parent">parent</div>
    <div class="parent child">child</div>
    <div class="parent child grandchild">grand child</div>
</div>
<div class="modular">
    <div class="alpha">alpha</div>
    <div class="beta">beta</div>
    <div class="gamma">gamma</div>
</div>
<p>Inheritance has for a lengthy period of time being recognised as being problematic in the programming field. It therefore seems strange that we would want to intoduce it into the css domain. It turns out that the problems which inheritance causes in traditional programming languages also surface in CSS</p>

<p>The problem with the OOCSS pattern is it assumes that there is a defined hierarchy between the different modules, but really they are simply different things which appear on the site. The hierarchy exists purely at the programming level not at the design level. Hence the designer could make changes which are inconsistent with the order aribtrarily established by the programmer. For example, the designer may want to make changes in the so-called 'parent' component but not in the child components. This would require having to manually override the new parent style in all the children.</p>

<p>In the modular pattern, the modules are not designed to be extended therefore it is safe to make changes to them without breaking any styles which may be dependent on them.</p>

<p>
    We can however share styles between modules using sass variables. For example, we can define a $standardFont variable containing the value 'arial' and use this in the appropriate place in each module. If we wish to change the font family we can do it in one place. On the other hand, if we wish to not use the common font in a module we simply set font-family to something else. In the OOCSS pattern, we can create a global change by changing a property in the parent. However we can't create a local change in just the parent without affecting the descendant rules. the child rules may be in a...

SCSS

.oocss {
    background : pink;

    .parent {
        
        font-size : 20px;
        font-family : arial;
        margin : 20px;
        background : red;
    }
    
    .child {
        border : solid 5px blue;
        background : green;
    }
    
    .grandchild {
        
        background : red;
        
    }
}

.modular {
    background : pink;
    $standardBorder : solid 5px blue;
    $standardFont : arial;
    $fontSize : 20px;
    
    .alpha {
        font-size : $fontSize;
        font-family : $standardFont;
        margin : 20px;
        background : red;               
    }
    
    .beta {
                
        font-size :  $fontSize;
        font-family : $standardFont;
        margin : 20px;
        background : green; 
        border :  $standardBorder 
    }
    
    .gamma {        
        font-size :  $fontSize;
        font-family : $standardFont;
        margin : 20px;
        background : red; 
        border :  $standardBorder; 
    
    }
    
    
    
    
    
}