CSS

Cascading Style Sheets (CSS for short) provides the design and layout aspect of Web and mobile sites. If HTML builds sturcture, then CSS allows for visual themes and paterns suchs as color, font family, positioning, width, height, margins, padding and borders of elements, sections, pages and entire sites. While there is design overlap between HTML and CSS, savyy developers will purposely seperate the two, letting HTML strictly provide strucutre while allowing CSS to control design.

Separating design from structure

I follow the school of thought that CSS should dictate the design of a Web site, while HTML should hold its structure. Separating design from structure allows for semantically written Web pages that pull higher in search results and load correctly in as many browsers and devices as possible.

This site employs CSS in all aspects. Transitioning from legacy table-based HTML to tableless divs allowed me to eliminated more than 100,000 lines of code on more than 500 pages. I used regular expressions to dramatically lessen the growing pains of finding and replacing hundreds of tables with <div>; tags. I used classes for repeating patterns and to speed browser render time, but also exploited CSS specificity to drastically reduce the amount of classes.

Specificity versus classes

Do class-heavy css files load quicker than those that rely more on specificity?
Yes, simply because the caching-nature of browser allow them to store these variables in memory rather than having to iterate the specific pattern for each HTML/CSS pair. But the time compared for both is negligible, and would go unnoticed in most cases. Best practice may include using classes when they repeat often and specificity for more unique cases.

.photos {
  margin: 0 16px; 
}
.photos div {
  margin: 16px auto;
  outline: 1px solid #4d4c4c; 
  padding: 1.5%; max-width: 1250px; 
}
.photos img { 
  width: 100%; 
  height: auto; 
  outline: 1px white solid; 
}
div.vert { 
  max-width: 800px; 
  margin: 16px auto; 
}
h2 { 
  font: 2.5vw Helvetica, sans-serif; 
  color: #dddddd; 
  text-align: center; 
  margin: 16px 0 6px; 
}

Layout of CSS document

I format my CSS in a hierarchical manner similar to the way it's associated HTML pages are coded.

body { 
   background-color: black; 
 }
header { 
   display: flex; 
   justify-content: center; 
   margin: 0 5%; 
   padding: 0; 
   color: #555555
 }
nav { 
   margin: 2% 0 1%; 
   font-size: 14px; 
   color: #666666;  
 }
 h1 { 
    margin: 10px 16px 30px; 
    font: 5vw/1em Essays-1743, Courier; 
    color: #cccccc; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
 }
section.photos { 
   margin: 0 16px; 
 }
footer { 
   margin: 0; 
   padding: 0; 
   color: #555555;
 }

Vertical alignment

Here are several ways to win the CSS vertical-align battle. First, let’s use flexbox:

.parent {
   display: flex;
   align-items: center;
}

Another method using the vertical-align declaration:

.center {
  line-height: 200px;
  height: 200px;
  border: 1px solid gray;
  text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

And another method using position & transform:

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox

CSS Toolkit

CSS & multiple browser compatibility (legacy)

To even out the playing field in the browser wars, I use a reset.css script that forces all HTML elements to look and behave the same way in all browsers. Now when I style my HTML, I am one step closer to multiple browser compatibility perfection.

On occasion, you have to trick browsers to behave. This code only affects Internet Explorer:

margin-top: expression("-20px");

And here are some other browser-specific declarations:

border: 1px solid green; /* works in all */
*border: 1px solid red; /* targets IE6 and 7 */
_border: 1px solid blue; /* targets IE6 */
local_airport