What's the best tool to automatically organize or alphabetize your CSS properties? [closed]
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this questionI'm looking for a way to automatically organize (alphabetically, or by any other accepted "standard") all of my CSS properties. I would prefer a method in Dreamweaver, but I'll take anything at this point!
Example:
.div-name {
padding: 5px;
width: 300px;
margin: 10px;
color: #000;
}
would be converted to:
.div-name {
color: #000;
margin: 10px;
padding: 5px;
width: 300px;
}
There was formerly a tool called "CSScomb" (at csscomb.com) to sort and group your CSS. It had plugins for a wide variety of code editors.
Unfortunately, it is no longer online; the domain was for sale, and now it redirects to…something else.
There does appear to be an active repository here: https://github.com/csscomb/csscomb.js/
Try this:
http://www.cleancss.com/
Haven't used it, but it appears to do what you say.
Bob
I personally would not find this useful, but that's just me. I use my own hierarchy based on importance, and I keep this consistent throughout my stylesheets. Each person may have different preferences in regards to this. I personally like to do any positional formatting first, followed by layout parameters, then sizing and then colors and other text formatting properties.
This allows me to identify and edit the most important properties quickly, ones that may affect layout are to me the most important.
Here's a recap:
1.positional formatting such as display
, position
... because this can affect the layout greatly
2.layout such as margin
or padding
... same as above
3.sizing such as width
, height
or font-size
... this has the ability to affect layout.
4.color and text formatting such as color
, background-color
, letter-spacing
or text-transform
CSSTidy is an executable and PHP script you can use to make formatting changes like this (as well as optimizations). In fact, cleancss.com that @rcravens mentioned is "based on" this tool.
i use visual studio 2010, this extension allows you to comment css and alphabetize your css and some other pretty handy tools too
http://visualstudiogallery.msdn.microsoft.com/6ed4c78f-a23e-49ad-b5fd-369af0c2107f
精彩评论