"default" CSS code for every project

[MC82]

Just out of curiosity, do any of you developers use a "default" CSS code for every project? If so, would you mind sharing, I would like to see if there is something in your setup that I might be missing.

[+Nik Louch Subscriber²]

I code a stylesheet per web app. That said, there is a LOT of generic stuff in there.

[primexx]

there's no "default" stylesheet that I use per-se, but what I do is I take the stylesheet of my previous project then blank out everything that doesnt apply, and start from there, saves me time from re-typing the styles that I will use later on. There are a few common styles that could be found in most of my stylesheets:

* {
 margin:0;
 padding:0;
}

This is in EVERY one of my recent stylesheets. Resets all margin and padding back to zero, goes BEFORE all other styles. This saves a LOT of time debugging because it overrides all default margins and paddings of different browsers.

img {
 border:0;
}

Removes all image boarders.

html,body {
 color:#000;
 font:86% Calibri, Tahoma, Verdana, sans-serif;
 text-align:justify;
}

Default body styles. There are other attributes in here that vary depending on the design.

a {}, a:hover {}, h1,h2,h3,h4,h5,h6 {}, p {}

These are usually found in my stylesheets, they define the basic elements' styles. Although the attributes vary depending on design.

[Paul]

I use the following:

The font and colouring different depending on the site, but it's always there as a "global" setting.

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
	margin: 0;
	padding: 0;
}

body {
	font: normal 12px "Calibri", Arial, Helvetica, sans-serif;
	background: #FFFFF;
	color: #00000;
}

ul,li {
	list-style-type: none;
}

hr {
	clear: both;
	visibility: hidden;
}

fieldset, img {
	border: 0;
}

[piXelatedEmpire]

check out this article about default CSS styles - it's invaluable :)

[+mrbester MVC]

  Primexx said:

...

img {
  border:0;
 }

Removes all image boarders(sic).

Strictly an image shouldn't have the border attribute anyway as it is deprecated (as that should be applied by styling), and it is only when it is wrapped by a hyperlink that a border will be applied (to denote its "clickability"), which incidentally aids accessibility, so I always have:

a img { border-style: none; }

at the top of my stylesheets.

I also tend to wrap styles in their relevant media type as a means of stopping older browsers attempting to (incorrectly) render pages using them:

@media all{
/* all mediatype selectors here such as the global no-margin etc. */
}

@media screen{
/* screen selectors here */
}

Other tricks to lock out older browsers include using the @imports rule and using a media attribute in the <link /> / <style></style> tags.

Edited March 21, 2007 by mrbester

[primexx]

  piXelatedEmpire said:

check out this article about default CSS styles - it's invaluable :)

The section "Have classes for floating and clearing" goes against guidelines of semantics and should not be used.

[jukeboxhero52]

  Primexx said:

The section "Have classes for floating and clearing" goes against guidelines of semantics and should not be used.

I don't fully follow how it goes against the guidelines of semantics...seems to make sense to me.

[primexx]

  jukeboxhero52 said:

I don't fully follow how it goes against the guidelines of semantics...seems to make sense to me.

k, to elaborate, semantic markup is part of the whole separation of content and style principle that aims to make it both easier for the coder to update websites and also for the reader to better understand what each element actually is (benefits screen readers mostly). It basically means that you should refrain from giving IDs or CLASSes that describe how it looks, but rather what it does. For instance a footer could be cleared, but instead of giving it class="clear" (or id="clear" for that matter) the better way would be to give it id="footer" (assuming there's only 1 footer) and then clear the footer. But what about redundant styles? Well if you have 3 elements that share a style, instead of giving them all the same class, name them according to what they do, like say #content, #navBar, #linkBar (note: leftBar and rightBar are not good either, because "left" and "right" describe how it looks) and then just put #content, #navBar, #linkBar {styles_here;} in the styleheet. Even in my example the word "Bar" suggests a certain look, and even that should be avoided, leaving something like #nav and #links would be sufficient. Yes it's a very tedious principle and very easy to be forgotten or overlooked, I make the same mistakes sometimes too, but at least try to separate the content and style whenever you can, instead of using obvious bad practise like that section suggests.

[+Nik Louch Subscriber²]

Just wanted to comment - I find this thread to be one of the most interesting I have read this week. Neowin at its best!

[The_Decryptor Veteran]

speaking of classes, you can also assign multiple classes to the same element, and then reference them that way (e.g. <span class="alert important"> then do .alert {} and .important {})

The aim is of course, to stop describing how the document looks in HTML, and instead describe what the document means (e.g. you can include a image of a mathematical equation, or insert some real MathML and then it becomes a much richer source of information)

Same thing could be accomplished with SVG and SMIL (e.g. can search google for subtitles in videos or such), anyway, gone way off topic here.

Default styles i try to use are basically setting a set of fonts i like (with a fallback like sans-serif of course), and a background colour, where possible i use the browser defaults

[primexx]

I find that SVG support kind of....SUCKS! Even in the browsers that do support it....kinda sad really.

[The_Decryptor Veteran]

Ohh yeah.

They are getting better though, text handling is still really bad, but it's quite hard to stuff up Paths.