My Personal Junkyard

Category: HTML/CSS

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{
 
}

Back to top