As i said in previous post, i have some tips and advices for
Use CSS reset
This is my CSS Reset:
/* 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{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ul {list-style: none;}
body {line-height: 1;}
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}
input[type="checkbox"],
input[type="radio"],
input.radio,
input.checkbox {
vertical-align:text-top;
}
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}
/* -----------------------------------------------------------------------------------------*/
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) 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:
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
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
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!