Home CSS Properties

Property Ordering

Alphabetize the order of the properties of every style rule, always. As much as is reasonable, also alphabetize the order of selectors in a rule that contains more than one selector (like with h1 and p below). 

p, h1 {
    font-size: 16pt;
    text-decoration: underline;
    font-family: serif;
    color: red;
}

h1, p {
    color: red;
    font-family: serif;
    font-size: 16pt;
    text-decoration: underline;
}

Redundant and Unused Rules

Minimize Redundant CSS

If you repeat the same styles two or more times, and the styles are related in some way, find a way to remove the redundant code so that it appears only once.

For example, place it into a common style rule that is used in both places. Note that not every common style should be combined; if two completely unrelated tags happen to share a style attribute (such as both being bold), this does not necessarily mean that they should be combined.

A good example of when styles should be combined is if a site has a common font or color scheme that is used on several elements. The style should be written once and used throughout the page so it can be changed easily later if needed. 

p {
    font-family: "Comic Sans MS", sans-serif;
}
h1 {
    font-family: "Comic Sans MS", sans-serif;
}

h1, p {
    font-family: "Comic Sans MS", sans-serif;
}

Avoid Unnecessary CSS Rules

If a rule is not ever used in the page, remove it from your CSS file.

a {
  color: #111111; 
  font-size: 16pt; 
}

div {
  color: #222222; 
  font-size: 18pt; 
}

p {
  font-family: Helvetica, Arial, sans-serif;
}

Blank Lines

Place a blank line between each CSS selector. You should neve rhave more than one blank line in a row. 

a {
  color: #111111; 
  font-size: 16pt; 
}


div {
  color: #222222; 
  font-size: 18pt; 
}
p {
  font-family: Helvetica, Arial, sans-serif;
}

a {
  color: #111111; 
  font-size: 16pt; 
}

div {
  color: #222222; 
  font-size: 18pt; 
}

p {
  font-family: Helvetica, Arial, sans-serif;
}

Vendor-Specific CSS

Some CSS3 properties have browser-specific versions with prefixes like -webkit- and -moz-. Do not use these vendor-specific properties in your homework assignments unless you are specifically granted permission to do so. 

div {
    -webkit-border-radius: 10px;
}

div {
    border-radius: 10px;
}