homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Hardware and OS Related Technologies / Website Technology Issues
Forum Library, Charter, Moderators: phranque

Website Technology Issues Forum

Sorting the contents of a CSS file - HOW?
Trying to manage css file content can be a right pain

 4:05 pm on Oct 2, 2008 (gmt 0)

I know this will seem a silly question to ask, and the fact that I have found nothing on Google even hinting at it suggests it's not a problem for many people, but...

How can I sort the contents of a CSS style sheet so that all the styles are in alphabetical order?

I know this might sound silly, but I'm currently working on a site with three css sheets and one of them is over 600 lines long. The others are about 300 lines each. Looking for a particular style would be so much easier to do if I knew they were in alphabetical order.

If anybody has an easy way other than to use 'Search', please let me know.

Many thanks



 4:18 pm on Oct 2, 2008 (gmt 0)

There are html editors which would allow you to search within and below, structured directories on your local machine.

I use "Search and Replace 98", however there are many more available.


 10:14 pm on Oct 2, 2008 (gmt 0)

Hi and thanks for that reply wilderness, but I'm not sure what you mean. I'm trying to sort the contents of a css style sheet into something searchable, I'm not trying to search a directory. I use Dreamweaver and Textpad both of which have exceedingly good search (and replace) functions, but that's not what I'm trying to do... or is it?


 2:00 am on Oct 3, 2008 (gmt 0)

the tool I suggested offers configuartion options to search specific file types (whether html or CSS) and the files contents across multiple directories (including sub-directories) in follders on your local machine that are a duplicate structure of your website.

The tools offers solitary words, single lines or multiple lines of html/css.
The replace or delete options are you choice as well.

The original file is renamed as an obvious backup and the newly edited file created.

All the above is simply an alternative to sorting your files manually.
Once you famailarize yourself with the tool, edits take a few seconds. Then you upload the files.

In the event your desire to "sort" the CSS files remains a goal, the tool will still be effective.


 9:14 am on Oct 6, 2008 (gmt 0)

There are CSS editors that will group like properties for you and reformat the output files automatically.


 9:58 am on Oct 6, 2008 (gmt 0)

That's the answer that I was looking for. I will search for one now but can you point me towards one? I am using DW MX, which does not have that capability, but then it's not a CSS editor as such.


 10:26 am on Oct 6, 2008 (gmt 0)

do you atually mean to sort the {property: values;} alphabetical by property or do you mean by selector (class name, ID, element)

it would be a tough job for the latter as even if something out there could do it, specificity and advanced selectors would catch it out..


body div div.myclass {}
div.myclass {}
.myclass {}

all target the same element but if sorted alphabetically would appear miles apart in the stylesheet.

if you simply mean the first option, so that your properties are always in the same order underneath the selectors,

div {
border: ..;
margin: ..;
padding: ..;
width: ..;

I've not heard of anything but it might not be very hard to write a script to parse the sheet and sort the rules

stylesheets are very personal to the people or software that write them and everyone has a different way of laying them out, with following the HTML document structure being one of the most popular.. however that doesn't always work well across different sheets. If yet others have separated their constants like colors/fonts into separate sheets then that is simply another form of organisation in itself.. and if the separate sheets are just for modules (nav menus, site section specific areas, widgets etc..) then that is also following the HTML structure, it is simply pulling out a whole section for ease of maintenance, often a comment in the main stylesheet will refer to the specific sheet as a visual placeholder for completing the semantic structure in the main sheet

there's so many ways to do it, and CSS doesn't really fit the alphabetical structure due to many ways to target an element, maybe that's why there's not a widespread solution?

anyway a note of caution.. if you find a script to sort the {property : value;} part, make sure there is always a semicolon after your last value within a ruleset, before running the script ;) That last semi-colon is optional, (the CSS will validate without it) some software or code writers won't generate it, but if that rule then doesn't land up being the last one in a set due to the sort.. you might have to go through the sheets and do a lot of punctuation adding


 10:34 am on Oct 6, 2008 (gmt 0)

sorry just saw your reply to Bill,

it might be helpful if there's editors that do that. I didn't know of any, so if you do try one let us know how it works out!


 4:09 am on Oct 8, 2008 (gmt 0)

The TopStyle CSS editor has a feature called Style Sweeper that will format your style sheets based on multiple rules. One of the options is to sort selectors by logical, class or specificity. The software will rearrange your stylesheet accordingly.


 7:37 am on Oct 8, 2008 (gmt 0)

Hi SuzyUK and bill,

Thank you both for your replies. Sorry I didn't make myself clear Suzy. It's not the properties within and ID or Class I want to sort, it's the actual selectors. Have you never looked at a 600 line CSS style sheet and wished you didn't have to use your editor's search function to find a specific one? Thanks bill, I'm off to look at TopStyle.

All the best. I'll let you know how I get on, I can't believe I'm the first code junky in history to want a function like this!


 11:26 am on Oct 8, 2008 (gmt 0)

OK, the promised update.

TopStyle Pro has exactly what I want and it is configurable chez configurable. What a lovely piece of software. For anybody who's interested you can find it here [newsgator.com] and for those of us who are on the right side of the exchange rate, it's only 79.95!


 11:28 am on Oct 8, 2008 (gmt 0)


It's $79.95! USD, Dollars, bucks!

About 45.


 7:47 am on Oct 9, 2008 (gmt 0)

Thanks bill/frank..

I also, as fate would have it, have now stumbled upon an open source one - CSSTidy [csstidy.sourceforge.net], which sorts in a variety of ways - I note that it contains a warning, before sorting selectors which is the one I spoke of too - In as much that sorting by selectors is fine but could alter the layout - if it did it would be because selectors of the same specificity have altered their place in the cascade. It also puts in any missing semi-colons too I think which negates the other problem I mentioned.. might do and it's cheaper i.e. free! :)

Nice little tool, you can install it for yourself, or use an online version, there are a few sites which have the online version available - This is the source author's version [floele.flyspray.org] -

It does a few other things, than simply sorting too.


 10:19 am on Oct 9, 2008 (gmt 0)

Thank you Suzi, for that... as fate would have it, indeed!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Hardware and OS Related Technologies / Website Technology Issues
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved