You are on page 1of 12

Top 10 Best Practices For Front-

End Web Developers


By Jean-Baptiste Jung

Explain which div you’re closing


Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almost
endless list of closing </div> tags. In fact, many beginners think they just have to use divs instead of
tables to produce quality code. Divs are cleaners than tables, but without proper code organization, it
can be as (or even sometimes more) messy as table based code.

Using indentation is a good start. But a tip that can definitely make you save lot of time is to comment
every div tag you’re closing, as shown in the example below:

1. <div id="header">
2. <div id="sub" class="first left">
3. ...
4. </div><!-- #sub.first.left -->
5. </div><!-- #header -->

Use a CSS reset


Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you might
already know how useful a CSS reset it. Because by default, browsers don’t apply the same default
styling to HTML elements, a CSS reset will ensure that all element have no particular style so you
can define your own without the risk of many cross-browser rendering issues.

01. html, body, div, span, applet, object, iframe,


02. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
03. a, abbr, acronym, address, big, cite, code,
04. del, dfn, em, font, img, ins, kbd, q, s, samp,
05. small, strike, strong, sub, sup, tt, var,
06. b, u, i, center,
07. dl, dt, dd, ol, ul, li,
08. fieldset, form, label, legend,
09. table, caption, tbody, tfoot, thead, tr, th, td {
10. margin: 0;
11. padding: 0;
12. border: 0;
13. outline: 0;
14. font-size: 100%;
15. vertical-align: baseline;
16. background: transparent;
17. }
18. body {
19. line-height: 1;
20. }
21. ol, ul {
22. list-style: none;
23. }
24. blockquote, q {
25. quotes: none;
26. }
27. blockquote:before, blockquote:after,
28. q:before, q:after {
29. content: '';
30. content: none;
31. }
32.
33. /* remember to define focus styles! */
34. :focus {
35. outline: 0;
36. }
37.
38. /* remember to highlight inserts somehow! */
39. ins {
40. text-decoration: none;
41. }
42. del {
43. text-decoration: line-through;
44. }
45.
46. /* tables still need 'cellspacing="0"' in the markup */
47. table {
48. border-collapse: collapse;
49. border-spacing: 0;
50. }

Source: http://meyerweb.com/eric/tools/css/reset/index.html

Don’t use @import


CSS files can be included using the @import directive. This can be useful when, for example, you
want to include a stylesheet into another. Another common practice is to include CSS file in html
documents using the following:

1. <style type="text/css>
2. @import url('a.css');
3. @import url('b.css');
4. </style>

While it works, the @import directive is much slower than the other way to include stylesheets into a
html document:

1. <link rel='stylesheet' type='text/css' href='a.css'>


2. <link rel='stylesheet' type='text/css' href='proxy.css'>

It will not make a difference on low traffic websites, but if you have the chance to own a popular
website, don’t waste your visitor’s time using @import.
Source: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

“Smush” your images


Being a developer, I always found that optimizing my images for the web wasn’t easy. I tried the
good old “Save for web” Photoshop command, but most of the time, I ended up with images that
were either too big or without a sufficient quality.
As a result, I had the bad habit of using unoptimized images on my websites. This isn’t a problem
when you don’t have to care about your site’s bandwidth, but after my recent switch on my vps.net
virtual private server, I had to be careful with image sizes.

At this time, I found a very cool tool named Smush It: You enter your unoptimized image url, and
Smush It will create a perfectly optimized image for you. You can save up to 70% of the file size,
while keeping the original quality. As an example, all the images from my list of online code editors
have been “smushed”.

Don’t mix CSS with HTML


As a markup language, the right use of HTML is to organize documents by defining a header, a
footer, lists, blockquotes, etc. Some time ago, front-end web developers often used now deprecated
HTML attributes to style a particular element.
Nowadays, the style attribute allows developers to insert CSS directly into a html document. This is
very useful for testing or when you’re in a hurry. But the style attribute is bad practice, that goes
completely against the CSS philosophy.

The following example illustrates how dirty and hard to read a simple line of code can become, with
the style attribute:

1. <a href="http://www.catswhocode.com"
style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who
Code</a>

Don’t mix Javascript with HTML


Just like mixing your html code with css is bad practice, you shouldn’t use any Javascript in your html
documents. The following bad practice illustrates an onclick event:

1. <a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this


site!');">Cats Who Code</a>

The same result can be achieved using unobstructed Javascript. In this example, I’m using the
popular jQuery framework:

1. $(document).ready(function() {
2. $('#cwc').click(function() {
3. alert('I love this website');
4. });
5. });

This may seems a bit harder at first, especially for beginners; but it is definitely not, and it will keep
your html document clean.
Use conditional comments
You know it, IE sucks, and some clients suck even more by requiring you to create webpages which
are compatible with this obsolete browser. To target specific versions of IE, you can use the well
known IE hacks, as shown below:

1. height: 200px; /* normal browsers */


2. _height: 300px; /* IE6 */
3. .height: 250px; /* IE7 */
4. *height: 350px; /* All IEs */

Those hacks are extremely useful sometimes, but they are not the best way to target a specific
version of IE, and it will cause your CSS validation to fail.

Instead, you should use the conditional comment shown below to target IE6.

1. <link href="style.css" rel="stylesheet" type="text/css" />


2.
3. <!--[if lte IE 6]>
4. <link href="ie.css" rel="stylesheet" type="text/css" />
5. <![endif]-->

Place Javascript file at the bottom


A popular practice of the late 90’s/early 2000’s was to place Javascript files within the <head> and
</head> tags. The problem is that your javascript files will be loaded first, and consequently your
content will be loaded after.

By placing Javascript files at the bottom of your documents, you’ll ensure that JS files will be loaded
only when the content has been properly displayed.

1. ...
2. <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
3. </body>
4. </html>

Use HTML semantically


HTML is not a programming language. It is a markup language, used to create structured documents
by denoting structural semantics for text such as headings, paragraphs, lists, and more.
If you started to create websites in the good old 90’s or in the beginning of the century, you know
how dirty the markup was at the time. But happilly, it has evolved.
Among other things, it is important to use html element semantically. As an example, a navigation
menu should always be an unordered list:

1. <ul>
2. <li><a href="#">Home</a></li>
3. <li><a href="#">About</a></li>
4. <li><a href="#">Contact</a></li>
5. <li><a href="#">Blog</a></li>
6. </ul>
Test WHILE you build to avoid cross-
browser issues
One of the biggest mistake I ever made when developing html, CSS, and javascript, was not to test
my pages on multiple browser while I was writing them. Instead, I used to write all my code and just
view in Firefox to see how it was rendered.
In theory, this should be good. But as you know, cross-browser issues are a major problem for front-
end developers, especially due to IE. If you test your documents on Firefox/IE/Chrome while your
writing it, cross-browser rendering problems will be much easier to fix. I have lost hours not doing it,
so I hope this final tip will help you saving your precious time. To test on multiple versions of IE, I use
this very handy tool. Happy coding
15+ techniques and tools for cross browser CSS coding
Part 1 – Techniques
Of course, efficient crossbrowser CSS development starts with techniques and good practices. In the first part of the
article, I’ll show you X techniques that will make your crossbrowser development easier.

Internet Explorer conditionnal comments

Let’s face it: Internet Explorer, especially the dinosaur IE6, is the front-end developer nightmare. In order to minimize
their errors, Microsoft implemented conditionnal comments in their browser, which allow you to link a stylesheet that
will be interpreted by a browser alone.

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

You can also target only a certain version of IE:

<!--[if IE6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Internet Explorer hacks

While conditionnal comments are better, you can also target some versions of Internet Explorer using the following
syntax:

.class {
width:200px; /* All browsers */
*width:250px; /* IE */
_width:300px; /* IE6 */
.width:200px; /* IE7 */
}

This technique is not W3C compliant (this is why you should use conditionnal comments instead) but sometimes, it is
a real time saver.

Targeting Opera only

Opera isn’t the popular browser, but that isn’t a reason not fix problem that may occur. The code below will only
target Opera, allowing you to add CSS rules only for this browser.

@media all and (min-width: 0px){


.classname {}
}

Targeting Safari only

Safari is one of the most standard-compliants browsers, so it is rare that you have to fix Safari-only problems. But it
can happen sometimes. Here is a nice hack to write Safari-only CSS rules.

html:lang(en)>body .classname {}

Targeting Google Chrome only

After Opera and Safari, here is finally the same kind of hack, to target only Google Chrome:

body:nth-of-type(1) p{
color: #333333;
}
“Browser Detect” PHP Class

While Internet Explorer is most of the time the reason of crossbrowser compatibility problems, sometimes you may
need to detect a wide range of browsers
If you’re working with the PHP language, the Browser Detect class is a very useful tool for detecting more than 20
different browsers.
Get the class

JQuery browser detection

Another great piece of code to detect the most common browsers (Safari, Firefox, Chrome, IE and Opera) is the
browserdetect.js Jquery plugin.
Once you inclued JQuery and browserdetect.js in your html file, the script will automatically add a css class to the
body tag.
For example, your body tag will look like this if the visitor browser is Firefox 3:

<body class="browserFirefox3">

Get the code

WordPress browser detection

A while ago, I’ve explained on my other blog WpRecipes how WordPress can detect the browser used by your
visitors. The code below will automatically add a CSS class to the <body> element of each page of your blog. Simply
paste it on the functions.php file of your theme.

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

if($is_lynx) $classes[] = 'lynx';


elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';

if($is_iphone) $classes[] = 'iphone';


return $classes;
}

IE6 crash

Sometimes (Who said always?) Internet fucking Explorer 6 gives us, developers, lots of headaches. Although this is
definitely not the best method to make your clients happy, it can be really fun to implement on your own website.
You guessed it, the following line of code will make IE6 crash. Goodbye, dinosaur.

<style>*{position:relative}</style><table><input></table>

If you’re interested in more “IE6 killer” techniques, you should definitely have a look on here.

Part 2 – Tools
Techniques are the required knowledges for efficient cross browser development, but tools can make you save time,
hasle, and in three words, make your life easier.
In this second part of this article, let’s have a look at the most usefull tools freely available over the Internet.

Xenocode Browsers
This tool is what I’ll definitely call a must-have. Xenocode Browsers allows you to launch a wide variety of Windows
browsers (IE 6, 7 and 8, Firefox 2 and 3, Google Chrome and Opera) directly from the Internet. You only have to
install a small plugin, and that’s all.
The only weak point of Xenocode Browsers is that the tool can only run on Windows machines (XP with SP2 and
later). This is a sad news for mac users like me, but the tool is still very good.
Visit Xenocode Browsers

IE6 CSS Fixer

I know I already said it earlier, but Internet Explorer is the developer’s nightmare. An experimental tool has been
created to transform a “normal” css stylsheet into a “IE” stylesheet.
For example, it apply new sizes for your boxes, according to the fact that IE have this well known box model bug.
Visit IE6 CSS Fixer
Browsershots

No one can have something like 3 OS and 25 browsers on his/her office. Personally, I remember when I used to ask
my friend running another OS than mine “ hey, do that site looks good on your computer?“. This is exactly
Browsershots purpose: You select the OS, you select the browser, you wait a bit, and the site show you screenshots of
your website under the selected OS and browsers.
While Browsershots is obviously an usefull version, there are a few bad points. The worst of it is the waiting time for
being able to see your screenshots, depending on how many browsers you selected.
Note that Browsershots offers a paid version, that I haven’t tried for now, which promise slow waiting times.
Visit Browsershots

Browsrcamp : How your sites looks on a Mac


MultipleIES : Run multiples version of IE on your PC

MultipleIEs is a Windows-only program allowing you to install and run multiples versions of Internet Explorer (from
version 3 to version 6) on your computer.
Althought sometimes some render difference between a “real” IE and multipleIE can occur, it is still an useful tool, if
for some reason you can’t use Xenocode Browsers.
Download MultipleIE

ie4osx: IE on the Mac


10 Cross-Browser CSS Properties You’ve Probably
Forgotten | Impressive Webs Toronto
By Louis Lazaris on May 3rd, 2009
Categories: Markup & Style, Web Design Articles |

Humans are creatures of habit, and web developers are naturally no different. We develop certain techniques that work,
and we stick with them — because, well, they work. But once in a while it’s good to refresh our minds and recall some
aspects of development that we’ve probably forgotten. In this article I’ll go through 10 CSS properties that
accomplish very specific, practical tasks, that are often overlooked.

1. Overflow

I know what you’re thinking: Nobody’s forgotten about the overflow property. It’s used all the time on <div>
elements when you want them to scroll. That is certainly the most well-known use of the overflow property, but I
personally find that this property comes in quite handy when you want to give “auto height”, or natural vertical
expansion, to a block level element that you don’t want to float.

This problem usually occurs in Firefox; the element is essentially “collapsed” — unless you float it. But floating often
brings about other layout issues, and using float in this manner goes against the purpose of the float property.

So, use overflow: hidden to allow a block level element (usually a <div> that does not have a set height) to
expand vertically with the content it contains, even when it contains floated elements.

2. Visibility

Using visibility: hidden is easily confused with display: none, but the difference between them is very
important. 99% of the time, when you want to hide an element on your page, you’ll use display: none. Using
display: none will ensure that the space occupied by the “invisible” element disappears along with the element
itself. But there are some rare instances when you don’t want this to happen. Instead, you want the space that the
element occupies to remain exactly the same (possibly because it’s being replaced by another element that was
previously invisible). So in this case, the correct CSS would be visibility: hidden.

Thus, display: none affects the flow of the document; visibility: hidden doesn’t.

3. White-Space

Any time you want to keep an inline element from breaking onto a second line, simply apply white-space:
nowrap.

While this property comes in handy for short anchor text and span elements, it should be used with caution, since it can
potentially cause an element to become larger in width than the element that contains it.

4. Font-Variant

The text-transform property is used quite often, and is highly recommended for controlling the case of text. It
offers values of capitalize (also called “title case”), uppercase, and lowercase. But only the font-variant property
allows us to set text to “small-caps”.

5. Letter-Spacing

In almost 10 years of web development, I think I’ve used letter-spacing twice, but it provides a very simple, yet
practical, effect, and it does exactly what it says — it adjusts the space between letters. The only thing to keep in mind
is that the space set by letter-spacing is not absolute space, but rather, it is relative to the space that already
exists by default. So, the letter-spacing property legally accepts negative values. Therefore, using letter-
spacing: -1px will decrease the space between elements by 1 pixel. And letter-spacing: 3px will
increase any already existing space.

6. Z-Index

I think z-index is one of a few CSS properties that has caused the most head-scratching in the web development world.
You would think that, since it sets the stacking order of the element to which it’s applied, then it should be quite
simple: If you set the z-index to a high value, it will stack the element on top of everything; if you set it to a low
value, it will stack the element below everything.

But, unfortunately, it’s not that simple. First, the element that has a z-index value must have its position
property set to either relative, absolute, or fixed. In addition, in order to cause the specified element to actually
override the page’s default stacking order (which is the order in which the elements appear in the XHTML), the other
elements must also have a specified z-index and a specified position of one of the three values mentioned
above.

In short: z-index only works on positioned elements, and only restacks in relation to other positioned and z-indexed
elements.

z-index is probably not a “forgotten” property — but it’s most certainly a constantly abandoned one.

7. Border-Collapse

Tables are not dead. They have their place in standards-compliant, accessible web pages, and they should still be used
— just not for layouts. When they are used, they most often have a visible border, so be sure to useborder-
collapse: collapse to make sure the borders aren’t doubled.

8. Background-Attachment

If you want to see this one in action, visit the css Zen Garden. I haven’t used this property much lately, but it always
serves a practical purpose when it is needed. background-attachment allows you to force a background image
to be “fixed” in relation to the viewport, preventing it from scrolling with the rest of the document. With some
creativity, you can make some neat effects. Here is one of my favourite examples.

9. Text-Indent

You would think the only reason this property was created was to allow text to be pushed completely off the page
when using image replacement techniques on titles or navigation bars. That is definitely the most common reason for
using text-indent. But don’t forget it’s actual purpose: To indent the first line of text in a paragraph, similar to
what you see in print media.

10. Font-Weight / Font-Style

Although these are different properties, and could easily be numbers 10 and 11 on this list, I’m putting them together
because what is “forgotten” about them is exactly the same: They replace something that you could just as easily
accomplish via markup.

Usually the font-weight property is set to “bold” and font-style is set to “italic”. But why not just use
<strong> and <em>? Well, it depends on what you’re using them for.

Basically, if you want the “bold” or “italic” text to be emphasized for keyword optimization, then you should apply
the change via markup, so search engines will see the marked up words and give them more weight. On the other hand,
if you want to add visual emphasis to specific words or phrases for the reader’s sake, but don’t want search engines to
give more weight to those words, then use font-weight: bold or font-style: italic instead.

That’s it. I hope you enjoyed reviewing these sometimes-forgotten elements. I think a lot more could be added to the
list, but many properties are not available in some browsers, so for this list I tried to stick to CSS properties that work
fairly well in all popular browsers.

You might also like