Structuring CSS for HTML Components. Separation of concerns.
Structuing CSS/HTML (Separation of concerns) First, I will divice CSS into categories: Settings
1 2 |
/** ========== settings ========== */ $font-family: 'Tahoma'; |
Color Scheme
1 2 3 4 |
/** ========== color scheme ========== */ $black: black; $white: white; $grey: whitesmoke; |
General (eg. *, body, Scrollbar, etc.)
1 2 3 4 5 6 |
/** ========== general ========== **/ *, body{ padding: 0; margin: 0; font-family: $font-family; } |
Rows (or wrapper components)
1 2 3 4 5 6 7 8 9 10 |
/** ========== row/wrapper components ========== **/ .row{ } .row-full{ } .row-fixed-width{ } |
Layout (or grid components)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** ========== layout/grid components ========== **/ .content{ background: $white; padding-left: 30px; padding-right: 30px; } // ----- default content .content-default{ } // ----- other types .content-black{ } |
Content components A default content-default style Different types of content eg. content-title, content-description
1 2 3 4 5 6 7 |
/** ========== content components ========== **/ .content-title{ } .content-description{ } |
Spacing components
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** ========== spacing components ========== **/ .line{ border-bottom: 0; width: 100%; height: 0.1em; margin: 10px 0; &-no-bottom{ margin-bottom: 0; } &-no-top{ margin-top: 0; } &-4-top{ margin-top: 4px; } } |
Individual components
1 2 3 4 |
/** ========== individual components ========== **/ .logo{ } |