Best practices and advices

15 May

As i said in previous post, i have some tips and advices for

Use CSS reset

I personally don’t use any of existing CSS reset file and i use only few line for this, including the blamed * {margin:0; padding:0} technique:

* {margin:0;padding:0}
img, fieldset {border:none}
table {border-collapse:collapse}
td, th {text-align:left;vertical-align:top}
button {cursor:pointer}
input, button, select {vertical-align:middle}
textarea {overflow:auto}
 
html { font-size:100.01%; }
body { font-size:1em; }
 
a {text-decoration:none}
a:hover {text-decoration:underline}
 
input.text, input.password, textarea {border: 1px solid #7f9db9}
 
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}

Not only i reset all styles, but i also use a smart way for clearing floats. Just add class=”clearfix” to some floatet box container and here you go. No more clear both extra tag, no more other tricks.

Don’t get me wrong. Every time i’m in a middle of a project i remember to NOT use * {} CSS reset for next project. And every time i forgot :(

(Don’t) Use CSS frameworks

I don’t like to use code that is not mine. And CSS frameworks is this kind of code. Beside that, when you start to use a framework (no matter what framework is), you MUST learn it. Too much waste of time to learn another people code. Again, you have plenty of CSS frameworks to pick and try.

Validate your code and search for browser bug

Some times a page is not displayed well. Either you have a bug in your code or bug in your favorite browser, you need to figure in a way or other what is guilty for headaches. The best way to eliminate code bugs is to validate your code. If all lines is ok, you should search for bugs in browsers.

Comment your code

You probably say: why should i bother to comment my own code? I wrote it, i will remember! Yeah, sure! Over the past years i convinced myself how much i can be WRONG! I try to read some past code (yes, written by myself) and i ask: what the heck i wanted to do here? So now i comment my code: CSS i split in blocks and on html i comment the closed div/class for big containers:

<div id="wrap">
<div class="header">
  content goes here
</div><!--/.header-->
</div><!--/wrap-->

Read news, blogs and forums

I have a many RSS feeds in Google Reader and half of them is about development. CSS, Javascript or only news, is all good. Of course, i don’t spend too much time reading all articles. I read only headers and if is worthing, i read it all. Is the BEST way to stay informed about web technologies.

Test in many browsers

Don’t matter if you made a website for yourself or for a client, because that site MUST be rendered in the same way in ALL browsers. Or at least to degrade graceful and remain usable.

Use your own javascript vs. libraries

Well, if you read constantly this blog, you know that i’m in love with jQuery :D And for most projects i need speed in development and just to be sure i achieve same results in all browsers. I can use my own JS or i can use my own JS powered by jQuery. The second way is always preferred :D

More to come?

Sure! If i remember any other tips, i will surely tell you! Just add this blog to your reader and stay tuned!

Tags:

Bookmark this article!

Del.icio.usDiggStumbleUponFurlRedditTechnorati

SlashDotWindows LiveYahooGoogleFacebookBlogLines

7 Comments »

  1. May 15, 2008 latest-mtv.net said:

    I agree with you.I really like your technique for clearing floats ;)

  2. May 16, 2008 Catalin Nicolescu said:

    You might want to try out Eric Meyer’s css reset. It’s clean and only touches generit aspects.
    http://meyerweb.com/eric/tools/css/reset/

    I use it on all projects, with few minor personal addons.

    Also we need to have a talk about you not using those nasty * hacks, even in IE6 and letting go of IE on Mac.

  3. May 16, 2008 stfalx said:

    I also use Eric Meyer’s css reset. But i import it with

    @import url(cssreset.css);

    It’s a simple way to clear all browser default styles and to keep the main css file clean.

  4. May 16, 2008 msd said:

    “(Don’t) Use CSS frameworks” is one of the greatest advices!

  5. May 16, 2008 web development said:

    I also wouldn’t like to use frameworks, css, js, or any other technology. However, some of them are really good, and give you a big boost in terms of productivity.

  6. May 23, 2008 Gavin Doolan said:

    Hi there, I just subscribed to your RSS feed. I like your advice on not using a CSS Framework. I spent ages looking at Blueprint and Yahoo!’s framework for CSS grids.

    I found it confusing and somewhat bloated - although I like Yahoo’s! I don’t like their naming conventions though.

    How do you deal with form elements when you set * {margin:0; padding:0;} ? I have always found its a pain to reset all elements on a page. As some elements like headings and paragrahps should have some spacing.

    Do you have a base class or standard setting you give these elements in all projects?

  7. May 23, 2008 Ionut Staicu said:

    Hi Gavin and thanks for your subscription :)

    Most problem with form elements i fixed with vertical-align:middle.

    Anyway, i started a project few days ago and i start to use Eric Meyer’s CSS reset (because i started to see the “unseen” problems with * reset):

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

     
 
/* resetting some default styles */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
:focus {outline: 0;}
a:focus {outline:1px dotted #999;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
 
html { font-size:100.01%; }
body { font-size:1em; }
 
textarea {overflow:auto}
button {cursor:pointer}
a {text-decoration:none}
a:hover {text-decoration:underline}
/*  -----------------------------------
	a better and smarter way to clear floats
--------------------------------------*/
 
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}

    Anyway, most CSS frameworks (actually all existing frameworks, for ANY language - php, ruby, java, and so on) is full of what developers of that framework need. So i prefer to make my own skeleton for CSS and xHTML and work on that (i don’t know how much time you save for having a ready to use 2 columns when you know is THAT EASY to make your own in less than three steps)

Leave a comment