3

The CSS sourcecode I have retrieved is very and very unstructured and I'm looking for a software or similar that can make it into structured code.

I'm using Windows 8 and the software should be freeware or open source.

The unstructured code is for instance:

p.small { line-height: 10px;} p.big { line-height: 30px; } p.small { line-height: 10px;} p.big { line-height: 30px; } p.small { line-height: 10px;} p.big { line-height: 30px; } p.small { line-height: 10px;} p.big { line-height: 30px; } p.small { line-height: 10px;} p.big { line-height: 30px; } p.small { line-height: 10px;} 
p.big { line-height: 30px; }p.small { line-height: 10px;} p.big { line-height: 30px; }p.small { line-height: 10px;} p.big { 
line-height: 30px; } p.small { line-height: 10px;} p.big { line-height: 30px; } p.small { line-height: 10px;} p.big { line-height: 
30px; }

I would like the code to be structured for instance below.

p.small {
    line-height: 0.5;
}

p.big {
    line-height: 2;
}

p.small {
    line-height: 0.5;
}

p.big {
    line-height: 2;
}

p.small {
    line-height: 0.5;
}

p.big {
    line-height: 2;
}

p.small {
    line-height: 0.5;
}

p.big {
    line-height: 2;
}

p.small {
    line-height: 0.5;
}

p.big {
    line-height: 2;
}

Do you know any?

Thanks!

Improve this question
5
  • 2
    Hello, HelloWorld :-) Welcome aboard. We would love to help you, but you need to give us some help too. Which operating system? Should it be free (use the "gratis" tag), or do you have a budget? And, can you tell us what you mean by "structured"? Please read How to Ask. The more we know about what you want, the better a match we can find for you. – Mawg says reinstate Monica Aug 11 '15 at 7:22
  • 1
    as @Chop says, it's not clear what you mean by 'structured' - do you want to format it so it looks cleaner? If so, as Chop said, you want a 'code beautifier'. If not, please explain, and if possible, give an example! :) – ᔕᖺᘎᕊ Aug 11 '15 at 11:43
  • 1
    @HelloWorld Your CSS is what is "minified". This is to make it lighter when users browse the page and have to download it (making things lighter is part of making a website faster). To make it the way you want, you are looking for a CSS beautifier. Many are available online inside your browser: you paste your minified version and get a legible one. Here is the first relevant result I had on a search engine. I don't know if some are better than others, most of them are pretty basic. Hope someone will have a good one for you. – Chop Aug 11 '15 at 14:04
  • @Chop You should post it as an answer – default locale Aug 13 '15 at 11:53
  • 1
    @defaultlocale I was not sure it met the quality standard of this SX, but I sure can add some detail to the current answer. Thanks for the ping. – Chop Aug 13 '15 at 12:07
4

What happened to the CSS?

"Not structured CSS" doesn't exist: if it is not (correctly) structured, it does not work.

Your CSS has been minified. This means any superfluous space (line breaks are considered as superfluous space) are removed. The purpose of this operation is to make the file lighter, thus reducing the load on the server and making the website faster (lighter file, faster to load).

How can I get something legible?

The opposite of minifier (or, in case of JavaScript, an uglifier) is called a beautifier.

OK, but which one should I use?

That is a hard question. In my experience, beautifiers are a one-time-use tools. As a consequence, I ask my favorite search engine to look for CSS beautifier or CSS beautifier online (running that search now gives me this as first result, and it seems to work: http://www.cleancss.com/css-beautify/).

Thus, I get an online version. I can upload or paste my minified CSS and get a beautified version instead.

I can therefore not really speak as to my experience with any, since I use one, get my result and ASAP forget which one it was. Most of them looked equivalent to me.

Improve this answer
2
  • A good explanation of what happened (+1), even if the actual recommendation was weak. Perhaps the new OP should post a new question, asking for a CSS beautifier - but only if he can list the features which he requires. – Mawg says reinstate Monica Aug 13 '15 at 14:13
  • 1
    @Mawg Yes, this was initially a comment. I'm not sure there really is a good beautifier. They should not really be used except to understand code or update your own minified code (but then you should have your original somewhere). – Chop Aug 13 '15 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.