Efficient CSS Algorithm

Created 2005-09-08 / Edited 2005-11-03

While thinking about Code Selectors I started contemplating how CSS gets applied to a webpage. Based on my readings, it is done the hard way. (stick link in here to mozilla's description of the process). I've also been using the improved PHP fork of html2ps, but the more CSS you use the slower it gets. So here is an idea for a CSS algorithm, at least for the context selector.

Example CSS:

#a .b c {
a1: 5;
a2: 10;

.b c {
a1: 10;
a2: 20;

During the parsing of the CSS text, we create a data structure which is element-centric. So maybe something like:

$css{c}{context}{'.b'}{context}{'#a'}{attrs} = {
a1 => 5,
a2 => 10,

$css{c}{context}{'.b'}{attrs} = {
a1 => 10,
a2 => 20,

Then if we have some markup:

This is content
This is more content

We traverse the tree. Lets traverse down to the first 'c' tag. Now we traverse the css hash-tree we built, starting with the current node. We go through the 'c' tag's list of contexts...

Each node has three things -- its tag name, its ID, and its class list.

See Also