Sorting CSS styles and classes in your files with a Python script



When editing CSS files, it’s quite common that the length of the file gets so big that it’s hard to find the classes in it. Some IDEs like Eclipse help you to show a sorted outline of the CSS file, but it will not sort the file for you as you want to.

I’ve barely seen any larger projects with nicely structured CSS files, which is partially because neither the editors nor the tools are perfect for CSS editing.

To highlight one of the many problems with CSS, let’s see a simple snippet:

#mystyle li{
      color:green;
}

input
{
background-color: red;
}

#mystyle
{
      /*should not use . and # with the same name!*/
}

b{
font-size: 1.2em;
}

.mystyle{
      font-weight: bold;
}

It’s a bit mixed up here and there, not well formatted, the DOM level CSS styles are mixed with the ID and class definitions, the names are not in sorted order. It’s pretty hard to read.

How about we sort and pretty print it a bit:


b {  
      font-size: 1.2em;
}

input {   
      background-color: red;
}

.mystyle { 
      font-weight: bold;
}

#mystyle { 
      /*should not use . and # with the same name!*/
}

#mystyle li {    
      color:green;
}


Looking at the second output, it’s much easier to see what’s going on. It’s fairly obvious now that B and INPUT are the only DOM elements that are overridden and we have some issues around the ‘mystyle’ naming. Moreover, it’s easy to see that any LI within ‘mystyle’ will be green.

To sort a CSS file styles like the above, I’ve created a simple Python script (70 lines) that reads the original CSS and outputs the sorted version to the STDOUT. It does not handle special cases like one line CSS styles and commented out styles, but to be honest I don’t really create those so I don’t need to handle them either.

import re
import argparse

class CSSClass:
    def __init__(self, name, body):
        self.name = name
        self.body = body
    pass

    @staticmethod
    def parseFile(filename):
        f = open(filename)
        name = ''
        body = []
        prev = ''
        cssarr = []
        
        for lineOrig in f:
            line = lineOrig.strip()
            
            slineopen = line.split('{')
            slineclose = line.split('}')
            
            if len(slineopen) > 1:
                body = ['']
                sline0 = slineopen[0].strip()
                if sline0 == '':
                    name = prev # // { in new line
                else:
                    name = sline0 # // { in line with name
            elif len(slineclose) == 2:
                css = CSSClass(name, body)
                cssarr.append(css)
                body = []
                name = ''
            else:
                body.append(line)
            
            prev = line
        
        return cssarr

    @staticmethod
    def csscomparator(cssx, cssy):
        x = cssx.name
        y = cssy.name
        xsw = False
        ysw = False
        
        if re.match('^[.#]', x):
            x = x[1:]
            xsw = True
        if re.match('^[.#]', y):
            y = y[1:]
            ysw = True
            
        if xsw == ysw: # both class or top level
            return cmp(x, y)    
        
        return 1 if xsw else -1 # // if X is class, it's larger
    
    def __str__(self):
        return '%s {\t%s\n}\n' % (self.name,'\n\t'.join( self.body ))
    
if __name__ == '__main__':
    
    parser = argparse.ArgumentParser(description='Sort the style names in your CSS file')
    parser.add_argument('input', metavar='style.css', help='input CSS to be sorted. Output is STDOUT')

    args = parser.parse_args()
    
    cssarr = CSSClass.parseFile(args.input)
        
    cssarr.sort(CSSClass.csscomparator)
    
    for css in cssarr:
        print css
    
    pass


To run it, simply do:

$python cssSorter.py styles.css > sortedstyles.css

Comments

Post a Comment

Popular posts from this blog

MurMurHash3, an ultra fast hash algorithm for C# / .NET

Image
Finding good hash functions for larger data sets is always challenging. The well know hashes, such as MD5, SHA1, SHA256 are fairly slow with large data processing and their added extra functions (such as being cryptographic hashes) isn’t always required either. Performance and low collision rate on the other hand is very important, so many new hash functions were inverted in the past few years. One of the most notable ones is MurMurHash3, which is an improved version of its predecessor (v2). The new version can create both 32 bit and 128 bit hash values, making it suitable for a wide range of applications. 64 bit architecture The 32 bit hash isn’t too important for large amount of data matching, so I only worked with and tested the 128 bit version. The latter one is optimized for x86-64 architecture, giving amazing speeds for data processing. As a 128 bit value consists of two 64 integers, the processor is fairly good with working with such large hash values – they are not byte...
. . .

Read more »

Quick select algorithm - find the Kth element in a list in linear time

Image
Quick select algorithm (Hoare's selection algorithm) – select the Kth element or  the first K element  from a list in linear time Working with large datasets is always painful, especially when it needs to be displayed in a ‘human readable’ format. It is a very frequent task to display only the largest, newest, most expensive etc. items. While sorting the whole dataset definitely gives a correct result, it is much slower than it needs to be – it needs at least O(n*log(n)) time and an it often uses recursion for the sorting, so in practice it can be quite slow. The quick select algorithm can get the top K element from a list of N items in linear time, O(n), with a very reasonable multiplication factor. The quick select does not use recursion so the performance is great for even large datasets. Algorithm The idea of the quick select is quite simple: just like with quicksort, select a random element from the list, and place every item that is smaller to the first half o...
. . .

Read more »

ESP32 - send a push notification from the Arduino ESP32 device to your phone

Image
Sending a push notification to your phone from an event from an ESP32 is simple. What you'll need (if you are using a Mac for development): Arduino IDE Arduino for ESP32 Serial port simulator for ESP32 to upload your code to the board Wifi network IFTTT account IFTTT app on your phone Wifi network that your ESP32 board can access Architecture Create an IFTTT applet This should read something like this: If Maker Event "notification", then Send a notification from the IFTTT app Change the notification template Go to the settings of your new IFTTT applet and change the template to include "Value1", like this: Get your Webhook endpoint in IFTTT On your applet, click the triangle looking thing (webhook), then Settings, or simply go to this URL  https://ifttt.com/maker_webhooks/settings   Visit the private URL in your browser, replace the trigger name with "notification", so it reads like ...trigger/notification/ with/... and in the Value1 field type in a ...
. . .

Read more »