A Small Introduction to mincss
Note: I'm a not experienced with Python. I have some general knowledge about it
and some scripting experience with other languages as well as some programming
knowledge in C/C++, but Python is mostly uncharted territory for me. So if
anyone spots some serious flaw or something that could be done alot better, feel
free to point it out (politely ) and I will happily correct it.
I'm mainly doing this because I have found the info on mincss which is out there
not very beginner friendly. That also means that I may not always describe the
most clever way of doing things for the sake of preserving understandability.
Having said that:
What Is It?
A tool which strips your CSS files of unneeded stuff. You give it a URL, it will
download that and parse it. Be careful though: If you have a CSS file used for
several pages on your site, it will mark stuff that is not used on the URL
you've given as unneeded. Completely logical of course, but important to keep
in mind.
What Do I Need
Python2 (not Python3, as of 2013-OCT-08)
mincss, obviously
lxml (a Python extension)
cssselect (also a Python extension)
PhantomJS is optional
I'm trusting you can manage to install this stuff yourself, if you're on a Linuxmachine it should be in the repositories (it is for Arch as of 2013-OCT-08).
Let's Get Started
Note: I'm doing this on a Linux machine, if you discover something I'm
describing here not working on a Win PC, please let me know.
Start a command terminal and change into the directory where you have stored
mincss' files. Then start a Python2 console. On my Linux machine I simply type
python2 into the console and hit return. If it's worked you should be greeted
with a screen that has three > at its left:
>>>Then, type in the following:
>>> from mincss.processor import Processor>>> p = Processor()This will basically load mincss into the console (yes, I know: a simplification)and initialize an object named p of type Processor.
After that, you give it an URL to download and instruct it to process whatever
it has found there.
>>> p.process_url('http://www.yourdomain.com/')>>> p.process()This will detect any inline CSS if I understand things correctly, I have not yettried this out myself.
>>> p.inlines[]And this searches the document for linked CSS stylesheets and puts the resultsinto an array, starting at index 0 (so, the first stylesheet will be located at
links[0], the second one at links[1] etc.). Don't mind the funky output.
>>> p.links[<mincss.processor.LinkResult object at 0x10a3bbe50>, <mincss.processor.LinkResult object at 0x10a4d4e90>]Now you grab the first stylesheet and initialize it into object one(again, the name is arbitrary). If more than one stylesheet has been found,
iterate through the array links[k] until you've initialized each stylesheet into
an object (alternatively, you can of course grab one stylesheet, proceed
further, then come back and initialize the second stylesheet into the same
object etc.).
>>> one = p.links[0]You can check which CSS sheet has been grabbed by entering this command, it willgive back the name and location of said stylesheet.
>>> one.href'//d1ac1bzf3lrf3c.cloudfront.net/static/CACHE/css/c98c3dfc8525.css'Now for the interesting bit: This will give out the length of the stylesheetbefore it has been processed...
>>> len(one.before)83108...and after processing:
>>> len(one.after)10062By entering the following commands, you can print out the entire stylesheetsonto the screen if you wish:
>>> one.after>>> one.beforeNow, this is nice and all, but what we would really like is generate a new, slimmed downstylesheet, wouldn't we?
Thought so. Alright then, first we open a new filehandle for writing:
(It is entirely possible mincss has some sort of integrated function/method for creating
new, stripped down, files, but I have not been able to find anything on that so until
informed otherwise I will presume it does not.)
>>>filehandle=open('yournewfilename.css','w')>>>filehandle.write(one.after)>>>filehandle.close()And voilà, you should now have a new file of the name yournewfilename.css in your current directory.What Next?
As said I'm no Python guru, and I only encountered mincss for the first time a day or so ago, so there's
certainly some stuff missing from here, but it gets the job done which I think is probably at the top of
many people's list. I've also read that it can do Javascript, but have not played around with that yet.
If you wanted to automate this process, you could also write a script taking advantage of mincss, for an
example see mincss' own examples here.
Sources
Official Site
mincss Github
Stackoverflow
If you have any corrections, amendments, suggestions etc. feel free to post.
Happy coding,
-aw