css-long-hand.css

/* 
    We do this lots. A seemingly innocuous block with margin 0 auto on it.
*/

.block {
    margin: 0 auto;
}

.some-other-block {
    margin: 2em auto 0;
}

/* 
    This works, but it's really brittle. We might need a .m class to add a margin,
    and this might be really tricky if we've set the margin-top to 0 with our block
    selector. 

    By writing things out long-form, we can be explicit about what we mean to do.
    
    Our real goal is to center the object horizontally. We can collect these properties:
*/

.block,
.some-other-block {
    margin-left: auto;
    margin-right: auto;
}

/* 
    And then apply our special styling without needing another selector, or !important
*/
.some-other-block {
    margin-top: 2em;
}
    
/*
    Here's another contrived example:
*/
.block--one {
    border-bottom: 1px solid green;
}

.block--two {
    border-bottom: 1px solid yellow;
}

/*
    Look for the bits that are the same. Most of the time, we want 1px solid borders on things. 
    We can refactor this code to change all the shared styles at once:
*/
.block--one,
.block--two {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.block--one {
    border-bottom-color: green;
}

.block--two {
    border-bottom-color: yellow;
}