Best Practices for CSS

July 12th, 2015

Programming is more of an art than a science. The most artistic kind of programming is, of course, is building user interfaces (the part of a program or website that a human actually sees). In this post, I’ll share some tips I’ve learned about styling websites using CSS (cascading style sheets).

In case you don’t know, CSS is special code for controlling the way an HTML document renders in a browser. It’s what controls the color, font, and placement of objects on the page. As you learn about CSS and UI design in general, it’s important to keep a few things in mind when working with CSS. Here are a few basic things a front-end web developer should know.

1. Understand CSS Selectors

Understand how CSS identifiers work and how to use them. There are two kinds of CSS selectors: class (which can be reused on multiple HTML elements) and id (which points to a unique HTML element with the given identifier). The qualifier, “cascading,” refers to the hierarchal nature of CSS, meaning that CSS classes are nested. In the following example, derivatives of the paragraph class will inherit properties of the paragraph class. The only time a child class wont inherit the properties of a parent class is when the child class uses ID-specific styles (see below).

/**************************
 * style.css 
 **************************/

/** 
 * Sets the default style of ALL paragraph text. 
 */
p {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: normal;
  color: #2A2C34;
}

/** 
 * Sets the style of PARAGRAPH text with the given class. 
 * Inherits the properties of p.
 * Overrides the color property of p.
 */
p.orangeText {
  color: #FFA500;
}

/** 
 * Sets the style of elements with the given class.
 * Inherits the properties of p.
 * Makes the text in the HTML element bright blue.
 */
.blueText {
  color: #51CBEE;
}

/** 
 * Sets the style of elements with the given ID.
 */
#specialText {
  color: #3C78D8;
  font-weight: bold;
}

!-- a snippet of the HTML page --
p
  Here is a default paragraph.
/p
p class="orangeText"
  Here is a paragraph with orange text. 
/p
p class="blueText"
  Here is a paragraph with blue text.
/p
p id="specialText"
  Here is a paragraph with bold, dark blue text.
/p

2. Use Stylesheets

Encapsulate your website’s CSS in its own separate file. The only time I’ve ever used inline CSS in my HTML, I was either just learning web programming or else I needed to hack together something really quick and didn’t want to bother with creating and linking a separate CSS file (or style section). There are two basic ways of including an external stylesheet in a web page. The first example below shows you how to include a local stylesheet in the same directory as your web page. The second way is how to include a remote stylesheet (via CDN).

Including a local stylesheet:

/**************************
 * style.css 
 * The local stylesheet.
 **************************/

/** Header text (h1 is biggest, h2 is second biggest, and so on). */
h1, h2, h3, h4 {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: normal;
  color: #2A2C34;
}

/** Control the way paragraph text renders on the page */
p {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: normal;
  color: #2A2C34;
  font-size: 12pt;
  margin-top: 0;
  margin-bottom: 2em;
}

/** Text resembling computer program code snippets */
code, pre {
  background: #2A2C34;
  color: #FFA500;
  font-family: Consolas, Courier New, monospace;
  font-size: 11pt;
}

!--
**************************
* index.html
* The web page.
**************************
--
!DOCTYPE html
html
    head
        !-- Include the stylesheet which is in the same directory --
        link rel=”stylesheet” type=”text/css” href=”style.css”
    /head
    body
        h1Welcome/h1
        p>Hello and welcome to my web page!/p
    /body
/html

Including a remote stylesheet via CDN:

!--
**************************
* index.html
* The web page.
**************************
--
!DOCTYPE html
html
head
!-- Include Bootstrap (version 3.3.5) remotely --
link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/head

!-- Include the Bootstrap JavaScript remotely --
script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"/script
body
h1Welcome/h1
p>Hello and welcome to my web page!/p
/body
/html

3. Use a Table of Contents

Use a table of contents comment in your stylesheet to organize your CSS. Assuming that you already are in the habit of commenting your code, this tip may seem a bit too obvious. Even so, if your CSS file is a contains a gargantuan amount of code, it will be tedious to navigate through it without a “map” of sorts. That’s why a “table of contents” comes in handy. For example, in the stylesheet for this website’s theme, I’ve created a “table of contents” comment block for organizing the CSS code in a modular fashion.

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
  1.0 Page Components
      1.1 Header 
      1.2 Body
      1.3 Sidebar
        1.3.1 Jetpack Subscribe Widget
      1.4 Footer
  2.0 Typography
      2.1 Fonts
      2.2 Links
  3.0 Media
      3.1 Navigation Tabs
      3.2 Forms
          3.2.1 Archives Dropdown
          3.2.2 Search Box
          3.2.3 Comments Form
      3.3 Responsive Videos
      3.4 Images
--------------------------------------------------------------*/

4. Cross-Browser Compatibility

Aim for cross-browser compatibility. Professional-quality websites tend to create a uniform experience for the user no matter what kind of device or platform the site is being viewed from. When testing the CSS styling of your website, be sure to have multiple browser windows open so that you can see how various elements render. There are certain style elements that render differently depending on the browser. For example, the CSS property for setting the color of placeholder text is different for various browsers, so it makes sense to include the code for all major browsers.

::-webkit-input-placeholder {
   color: #51CBEE;
}

:-moz-placeholder { /* Firefox 18- */
   color: #51CBEE;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #51CBEE;  
}

:-ms-input-placeholder {  
   color: #51CBEE;  
}

5. Use Normalization

Override styling defaults through normalization CSS. This tip is a followup to the one about cross-browser compatibility. Browsers will impose their own default styles to an HTML document. To override the browser defaults, you can use normalization CSS (a.k.a. style resets) to “initialize” your CSS. Here is a stylesheet that contains normalization CSS (aptly named normalization.css).

6. Use Front-End Libraries

Take advantage of front-end libraries. There are numerous pre-made, professional-quality front-end libraries that provide the CSS and JavaScript your site needs to function in the modern web. If you are really lazy or just not a front-end person, libraries can give your website an acceptable, cookie-cutter interface. I personally recommend Bootstrap since it’s easy to implement, especially for beginners, and allows you to easily create websites that render nicely in mobile and in desktop.


Categories: designtechnology

Next Post: