Web Do's & Don'ts » CSS

Use CSS for generating purely presentational content

Siniša — Wed, 09 Jun 2010 11:42:09 +0000

The content property was introduced in CSS 2.1 to add generated content to the :before and :after pseudo-elements. Given that IE 8 also now supports content, we really are getting to the point where can use this CSS feature in our production work. Just be sure to use it only in appropriate circumstances, and be mindful of the accessibility implications that generated content still has.

Use the CSS cascade

Bojan — Tue, 16 Mar 2010 09:33:58 +0000

Many website coders do not make good use of the cascade, ending up with more complicated code. Learn how to use the cascade properly and define the importance of individual styles.

Don’t use protocol relative paths to CSS files

Siniša — Wed, 24 Feb 2010 18:53:03 +0000

Internet Explorer 7 & 8 will download stylesheets twice if the http(s) protocol is missing.

Get familiar with CSS escape sequences

Siniša — Sat, 02 Jan 2010 11:38:43 +0000

Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules.

Combine screen and print styles to save a HTTP request

Bojan — Tue, 01 Dec 2009 23:14:08 +0000

Save a HTTP request by combining print and screen styles into one single stylesheet. You can do this by using @media rules, which will speed up your website.

Organize your CSS with flags

Bojan — Fri, 27 Nov 2009 10:03:17 +0000

Use flags (text hooks) in your CSS code to quickly find what you are looking for. By doing this, you can jump to certain sections of CSS and speed up your work significantly.

Avoid CSS expressions

Bojan — Thu, 17 Sep 2009 08:04:40 +0000

While JavaScript expressions in CSS have their upsides, they are very resource intensive. That will affect the speed of the website because the expressions are frequently evaluated by the browser, causing the site to be sluggish.

Don’t allow CSS caching

Bojan — Tue, 08 Sep 2009 08:30:00 +0000

When updating the HTML and CSS in your site, CSS file(s) can get cached. This can cause your site to break if your users are served the new HTML but not the new CSS. You can avoid this by adding a variable to the *.css file you are updating and prevent caching.

Consider using Diagnostic styling

Siniša — Wed, 02 Sep 2009 09:06:13 +0000

Using Diagnostic Styling can help you reveal specific problems within an HTML document.

Use negative CSS margins

Bojan — Tue, 04 Aug 2009 08:39:54 +0000

A clever CSS trick coders often take advantage of is the use of negative margins. It’s a technique that you, once you master it, will come back to over and over again.