Tech Hive

I don’t know about other people but I, for one, use a lot of classes in every design project. So with every project that I have to code, I have to put all of them again and again and again that there are moments that I was not able to add some of them altogether.

For example are the classes that enables you to float a certain element (to use for images and whatnots), I always call it alignright or alignleft, always. I have never thought how slow that made me in creating CSS because every time I do one I tend to forget one or more class (or element) or worse, I forget how I was able to do it in one site (e.g. losing the quotation marks in quote tags) that I have to open the CSS file for that site again. I have always thought of creating a default CSS that will have all of the classes that I always use plus the default appearance of almost all of the elements.

Classes it is understandable but why elements you ask? Well, one main reason is still the pesky IE. IE does not render quote tags the same way that the new browsers do, i.e. they do not put quotation marks before and after the quote tags to signify that it is a quote. So what I do is take out the quote on all of the browsers in CSS and instead put the hex decimal for quotation marks — &ldquo ; (minus the space) for left quote and &rdquo ; for right quotes. If we have to lose support for IE 6, I have to say that it will be pretty hard to maintain. But that may not for how many years from now.

So, here is what my default CSS looks like, feel free to use it if you like:

a img {
   border:0 none;
}
q:after, q:before {
   content: ''
}
code, samp, kbd, pre, tt {
   font-size: 115%;
}
pre code, code pre {
   font-size:100%;
}
acronym, abbr {
   border-bottom: 1px dotted #000; cursor: help;
}
dfn {
   font-style: italic;
}
dl dt {
   font-weight: bold;
}
dl dd {
   margin-left: 0; margin-bottom:.8em;
}
ul li, ol li {
   margin-bottom: .3em;
}
fieldset {
   border:0 none;
}
th, caption {
   text-align: center;
}
legend {
   font-weight: bold;
   font-size: 120%;
}
input, select, textarea {
   padding:.2em;
}

.clear {
   clear: both;
}
.right {
   text-align: right;
}
.left {
   text-align: left;
}
.alignright {
   float:right;
   margin-left: .8em;
   margin-bottom: .8em;
}
.alignleft {
   float:left;
   margin-right: .8em;
   margin-bottom:.8em;
}
.center {
   text-align: center;
}
.strong {
   font-weight:bold;
}
.italic {
   font-style: italic;
}
.navigation {
   padding: .8em 0;
   text-align: center;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 105%;
   font-weight: bold;
}
	.navigation ul, navigation li {
            list-style: none;
            margin: 0;
            padding: 0; }
	.navigation li {
            display: inline;
            list-style:none;
}

Have I missed to style any important element?

I used relative measurements so that I don’t have to edit it anymore whenever I have to use it. I also do not put any specific rule such as borders, background colors and those that depends on the look and feel of the site.

What do you do to make your coding easier?