CSS for templates in MusicBrainz

After doing some background search, some lurking around the server files and getting some basic idea on how things work, I then decided to start working on the Explore page. It is the main deliverable of my GSoC project. I decided to design the basic GUI of the page first while complying to the existing coding standards of the MusicBrainz server. That is when I started struggling with getting some CSS incorporated with the page I am working on.

I tried to figure out where hell the CSS for the pages come from but couldn’t find any luck. Later, through a discussion on the IRC channel, I came to know that MusicBrainz server does not have a per page CSS architecture. All the style sheets are placed in the directory musicbrainz-server/root/static/styles/. And all the style sheets are written in LESS, not directly in CSS

Less is a dynamic style sheet language that can be considered as something that lies above CSS. It provides everything CSS allows to do in a more convenient, easy to understand, clear and structured way. LESS allows writing style sheets with variables, functions, nesting etc. which would make the life of the programmer easy. At the end of the day, the LESS file will be compiled to a CSS file that will be linked to the templates in the usual manner.

So in the server, the file musicbrainz-server/root/static/common.less contains all the LESS files that are there to be linked with the templates. All those files that are imported there would be linked with each and every template in the MusicBrainz server. So in a case where we need to link a style sheet with a single template page, all I have to do is put the code

[%- css_manifest('style.css') -%]

in that same page which will link that particular style sheet only with that particular template.

Last but not the least, when ever a new LESS file is created with some LESS code in it, for us to use it, it first needs to be compiled. Linking the file in the common.less wont do anything until the LESS file is compiled. The compilation is done by running

musicbrainz-server/script/compile_resources.pl

script. Once that is run and the less file is imported in the common.less file, you are done!