Blog++ | My Way Of Styling Part 1

My Way Of Styling Part 1

October 26, 2010 Written By

Well i’m a webdeveloper, therefore much of my work is making an idea come to reality, or making the website “alive”. That can be achieved with css among other things. This is my favorite thing to do on my daily work, styling a website. With this article i’ll be trying to show my process of doing this.

First of all i try to use only one css file, but sometimes the file get’s so big that you might find useful to make some divisions. So, if you can’t use only one file try not to use more than 3, after that you will see the difference specially when someone is arriving to the website for the first time. Using only one file i would say that there’s no perfect way of coding, but still i’ll give it a go and show you mine.

First bit of code: One thing that most developers tend to forget is the credits, hell if you have the hard work of making the code, and if in the end you are proud of what you done so why not put a little signature? This is my signature on every project i’ve worked so far:

/*
# -----------------------------------------------------------------------
# Project name: here goes your project name
# -----------------------------------------------------------------------
# Copyright information:
# Copyright (C) 2008-2009 ( company name ) All Rights Reserved.
# @license - Copyrighted Commercial Software
# This file may not be redistributed in whole or significant part.
# -----------------------------------------------------------------------
# Project information:
# version: 0.0.0 (00/00/0000)
# Tested in: Firefox; Chrome; Opera; Safari; IE8; IE7;
# (this CSS will not be optimized for IE6 or any other before that)
# -----------------------------------------------------------------------
# Author info:
# Name: Marco Monteiro
# Country: Portugal
# E-mail: mpmont@gmail.com or marco.monteiro@live.com
# Twitter: http://www.twitter.com/MarcoM0nteir0
# HomePage: http://marcomonteiro.net
# -----------------------------------------------------------------------
*/

Let me explain why all of this is very important. The project name is self explanatory, you always want your projects to have a name. The copyright information is also very important, and always be very careful with this. Your client may not like what you put there if is not completely true.

Next we have the project information, this is not only for other developers in case someone will be picking up where you left but also to keep track of your work. Always keep the version field up to date among with the date field. The “tested in” field is also important in case someone try to debug your code. One more thing, stop developing for IE6 at all cost, always try to explain to your client that you will probably need more time to debug the website for it to work in IE6 than making some cool features for the website.

And the last one but not the least, your information! So, now you can see how this is a big deal, first you want to speed the word about your work, then if you are a webdeveloper like me you find yourself sometimes snooping around other peeps code, and sometimes you even want to contact the team that put all the work together but some other times you want to contact just the guy that made a portion of the job. That is why you should always do this, so get your own signature or use this one.

The next step is to pick a good reset styles, this is very important and some developers tend to forget this, without this you will be having a lot more problems with different browsers and a bunch of other problems like strange margins or paddings that wasn’t suppose to be there in the first place.

/* --------------------------------------------------------------
reset.css
* Resets default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
em {
	font-style: italic;
}

table {
	border-collapse: separate; border-spacing: 0;
}

caption, th, td {
	text-align: left; font-weight: normal;
}

table, td, th {
	vertical-align: middle;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: “”;
}

blockquote, q {
	quotes: ”” “”;
}

a img {
	border: none;
}

html, body{
	margin:0;
	padding:0;
	text-align:center;
	background: none;
}

This is the one i use, but there’s much more you just need to google it for a bit, the last one that i’ve seen and that caught my attention was this one: http://developer.yahoo.com/yui/reset/

So this is the first part of my way of styling and the thing you have to retain on this one is: always put your signature on your work, and use a good “reset styles” so you don’t get in trouble in the near future.

Next week i’ll be covering on how to divide your file and and some rules that i always apply when i’m styling some markup.

Like it? Tweet it.

"My Way Of Styling Part 1" via @marcogmonteiro
Tweet