image décorative : une jeune pousse

A methodology for CSS (3)

16 January 2009 — 08:55

Redefine the default HTML layout

One cause for the discrepancies of web pages layout among browsers lays in the default HTML layout that have been choosen by each browser developpment team. Thus the first thing a CSS stylesheet must do is setting this default layout explicitely : this is called "CSS reset stylesheet".

Example

This site uses the following reset stylesheet :

/*======================================================================
 *Réglages "utilisateur" pour ne pas dépendre des valeurs par défaut
 *du navigateur.
 */
address,
blockquote,
body,
caption,
center,
dd,
dir,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
li,
menu,
ol,
p,
table,
td,
th,
ul
{
font-size: 1em;
font-family: sans-serif;
}

a
{
cursor: pointer;
}
a:link
{
color: #3364a1;
background: transparent;
text-decoration: none;
}
a:visited
{
color: #337;
background: transparent;
text-decoration: none;
}
a:active
{
color: green;
background: transparent;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

address
{
margin: 0em 0% 0em 0%;
font: italic 1em/1em sans-serif;
}

big
{
font-size: 1em;
}

blockquote
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

body
{
margin: 0em 0% 0em 0%;
font: 1em/1em sans-serif;
background: #fff;
cursor: default;
}

button
{
cursor: auto;
}

caption
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

code
{
font-size: 1em;
font-family: monospace; /*evite de redéfinir le gras/italique, ce qui
arrive avec font*/
}

div
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

dd
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

dl
{
margin: 0em 0% 0em 0%;
}

dt
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

h1
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h2
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h3
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h4
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h5
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h6
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

hr
{
margin: 0em 0% 0em 0%;
}

html
{
margin: 0;
background: #fff;
}

input
{
cursor: auto;
}

kbd
{
font: 1em monospace;
}

li
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

ol
{
margin: 0em 0% 0em 5%;
list-style: decimal;
}

ul ul ol ol,
ul ol ul ol,
ol ul ol ol,
ol ol ul ol,
ol ul ol,
ol ol
{
list-style: lower-alpha;
}

ol ul ol ol,
ol ol ul ol,
ul ol ol ol,
ol ol ol
{
list-style: lower-roman;
}

ol ol ol ol
{
list-style: decimal;
}

p
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

pre
{
margin: 0em 0% 0em 0%;
font: 1em/1em monospace;
}

samp
{
font: 1em monospace;
}

small
{
font-size: 1em;
}

sub
{
font-size: 1em;
}

sup
{
font-size: 1em;
}

td
{
line-height: 1em;
}

textarea
{
cursor: text;
}

th
{
font: bold 1em/1em sans-serif;
}

tt
{
font: 1em monospace;
}

ul
{
margin: 0em 0% 0em 5%;
list-style: disc ;
}

ul ul,
ol ol ul ul,
ol ul ol ul,
ul ol ol ul,
ol ul ul,
ul ol ul
{
list-style: circle;
}

ol ul ul ul,
ul ol ul ul,
ul ul ol ul,
ul ul ul
{
list-style: square;
}

ul ul ul ul
{
list-style: disc;
}

img
{
border-width:0;
}

A methodology for CSS (2)

29 Septembre 2008 — 22:30

Using a master file

In order to be able to maintain , One has to understand what does a stylesheet in order to be able to maintain it. Our ability to understand is reduced when the number of rules is becoming high enough.

The usual solution to this problem consists in grouping rules that are somehow related in separated units, one CSS file by unit.

Then, one loads each unit either from the HTML page or through a master file that is in charge of loading them.

I recommand the latter, because in this case the HTML page does not have to care with the stylesheet organisation. In other words, subfile might be added or removed, the HTML page will not change.

Example

Here is the master file of sporniket-studio.com, as of the day I wrote this article :

@import "_base.css";
@import "_global.css";

@import "_part_accessibility.css";
@import "_part_header.css";
@import "_part_body.css";
@import "_part_poster.css";
@import "_part_footer.css";

A methodology for CSS (1)

25 Septembre 2008 — 08:20

It is necessary to have a methodology when writing a CSS that will be easy to maintain. I will present my thoughts on this topic accross a few articles.

  • Using a master file
  • Redifine default HTML formatting
  • Gathering rules by their usage in the fonctionnal structure of the page
  • Writing a variation of the CSS file for a specific media