Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl-Sensitive Sunglasses

Simplifying CSS

by BigLug (Chaplain)
on Oct 29, 2002 at 10:01 UTC ( #208695=snippet: print w/replies, xml ) Need Help??
Description: Melbourne PMer Scott Penrose asked on the Melbourne-PM mailing list about merging and simplifying CSS. If you view the source of the page you're currently looking at you'll see the default Perl Monk CSS at the top, then if you've set your own, yours is underneath it.

Scott wanted a way to merge multiple sheets to provide a single simplified CSS. Thinking about this I've cobbled together the following solution. Its not elegant and it doesn't run fast. But it was fast to write and it does the job. Well I assume it does. Scott, if you're reading this let me know :)

Basically this script will take input from one or more CSS files:
File 1
P { align: left; font-family: sans; font-size: 12pt; }
File 2
TD { text-align: left; font-family: sans; font-size: 12pt; } P { text-align: left; width: 80%; }
It will then return a simplified 'cascading' (inherited) style sheet:
P, TD { text-align: left; font-family: sans; font-size: 12pt; } P { width: 80%; }
use CSS;
use Strict;

#   simplify(list_of_files);
#   list_of_files should be in _increasing_ importance. Styles from th
+e last
#   file will overwrite any duplicate styles of all previous files.
#   Simplified formatted CSS
# is very strict in its parsing. Make sure your style sheets 
+use a 
#   semi-colon after every parameter, even at the end of a block:
#   body {
#      font-family: 'times';
#      font-size: '12pt';  <--- this semicolon MUST exist
#   }                           even though its at the end of the bloc
#                               This ain't perl buster!
# Author's jottings: This is probably not the most 'golf' way to do th
+is, but
# its a working solution.

print simplify('pmdefault.css','pmuser.css');

# The routine

sub simplify {
    my ($output, %usedby, %css);
    my @files = @_;
    die("You have to tell me at least one css file to simplify.") unle
+ss @files;
    my $stylesheet = CSS->new(-source=>$files[0]);
    shift @files;
    foreach my $file (@files) {
    my @styles = $stylesheet->styles;

    foreach my $style (@styles) {
        my %props = $style->properties;
        foreach my $property (keys %props) {
            $props{$property} = "'$props{$property}'" if $props{$prope
            push (@{$usedby{sprintf("%19s : %s",$property,$props{$prop
+erty})}}, $style->selector);

    foreach my $style (sort keys %usedby) {
        my $stylename = join(', ',sort @{$usedby{$style}});

    foreach my $style (sort keys %css) {
        $output .= "$style {\n";
        $output .= join(";\n",@{$css{$style}});
        $output .= ";\n}\n\n";
    return $output;

Replies are listed 'Best First'.
Re: Simplifying CSS
by jryan (Vicar) on Oct 30, 2002 at 01:03 UTC
    Shouldn't the simplified sheet be:
    P, TD { text-align: left; } TD { font-family: sans; font-size: 12pt; } P { width: 80%; }

    Also, how does the script handle:

    Sheet 1:

    P { text-align: left; }


    P { text-align: center; }
      Firstly, no. Sheet 1 defines P as having 'font-family: sans' and 'font-size: 12pt', then sheet two defines TD as having the same. In your example, only TD gets these attributes.

      Secondly, the script's comments tell you (as does the C for Cascading) that any later definition overrides the earlier ones. Something PerlMonk's code takes advantage of. Thus in your example, the script would return 'text-align: center'.

Log In?

What's my password?
Create A New User
Node Status?
node history
Node Type: snippet [id://208695]
and all is quiet...

How do I use this? | Other CB clients
Other Users?
Others chilling in the Monastery: (4)
As of 2017-06-28 10:56 GMT
Find Nodes?
    Voting Booth?
    How many monitors do you use while coding?

    Results (632 votes). Check out past polls.