Ⓑ

CSS

Painting the Web: The Artistry of CSS

Cascading Style Sheets (CSS) deliver the design and layout dimensions of web and mobile sites. If HTML lays the groundwork, then CSS breathes life into the scene with visual themes and patterns such as color, font selection, positioning, dimensions, and the styling of margins, padding, and borders across elements, sections, pages, and entire sites.

While there’s a design overlap between HTML and CSS, discerning developers purposefully separate the two. This way, HTML is solely dedicated to providing structure, allowing CSS to be the master of 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%);
}

CSS Toolkit

Frameworks Tools Articles

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