Jump to content

mincss Primer - Getting Rid of Unneeded CSS

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 Linux

machine 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 yet

tried this out myself.

 

>>> p.inlines[]
And this searches the document for linked CSS stylesheets and puts the results

into 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 will

give 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 stylesheet

before it has been processed...

 

>>> len(one.before)83108
...and after processing:

 

>>> len(one.after)10062
By entering the following commands, you can print out the entire stylesheets

onto the screen if you wish:

 

>>> one.after>>> one.before
Now, this is nice and all, but what we would really like is generate a new, slimmed down

stylesheet, 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

BUILD LOGS: HELIOS - Latest Update: 2015-SEP-06 ::: ZEUS - BOTW 2013-JUN-28 ::: APOLLO - Complete: 2014-MAY-10
OTHER STUFF: Cable Lacing Tutorial ::: What Is ZFS? ::: mincss Primer ::: LSI RAID Card Flashing Tutorial
FORUM INFO: Community Standards ::: The Moderating Team ::: 10TB+ Storage Showoff Topic

Link to comment
Share on other sites

Link to post
Share on other sites

I don't think there's much to do than thank you for sharing this. Such an useful tool! I'm not working with websites anymore but I'll surely keep this in mind for a future project.

Link to comment
Share on other sites

Link to post
Share on other sites

Happy to be of service. I'm not currently doing any web dev'ing either, but

it definitely is a nifty little tool which I'll keep in mind as well. :)

Cheers,

-aw

BUILD LOGS: HELIOS - Latest Update: 2015-SEP-06 ::: ZEUS - BOTW 2013-JUN-28 ::: APOLLO - Complete: 2014-MAY-10
OTHER STUFF: Cable Lacing Tutorial ::: What Is ZFS? ::: mincss Primer ::: LSI RAID Card Flashing Tutorial
FORUM INFO: Community Standards ::: The Moderating Team ::: 10TB+ Storage Showoff Topic

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×