Optimer og ryd op i CSS-kode med CleanCSS
Kender du det at du får overdraget en CSS-fil eller på anden måde skal ind og rode i en CSS-fil som du ikke selv står bag?
Det gør jeg i hvert fald. Somme tider får man en fil som er overskuelig og fint sat op, men andre gange får man en fil hvor der er skrevet CSS-kode ud i en lang køre.
I det sidste tilfælde er det rent ud sagt ”pain-in-the-ass”, og utrolig demotiverende at gå i gang med. Men det er der råd for nu.
På siden, cleancss.com, har du mulighed for at kopiere en uoverskuelig CSS-kode ind og få den optimeret på få sekunder. Vi kan tage et eksempel:
Microsoft.com har bl.a. et stylesheet som ligger her. Det er skrevet ud i én lang køre, og er temmelig uoverskuelig. Se et udpluk af CSS’en herunder:
Efter en tur i CleanCSS-møllen bliver koden på to sekunder lavet om til noget meget mere overskueligt CSS-kode, som du kan se et udpluk af herunder:
Der er flere forskellige ting man kan indstille inden man laver sin ”forvandling”, men man kan også bare bruge de indstillinger som allerede er valgt, og det virker fint.
Så hvis du på et tidspunkt får overdraget en uoverskuelig CSS-fil som du skal ind og rode i, så er CleanCSS, sitet for dig. Håber det kunne bruges…
Skrotpræmie:
Jan:
Simon fra Besvaret.dk:
Damn, den er for sej. Og selvfølgelig stod jeg og
Søren Sprogø | 24. september 2008 | 10:36Damn, den er for sej. Og selvfølgelig stod jeg og havde brug for den for 3 dage siden.
Tak for link til et super tool!
Det kan være super træls at rode med andres CSS.
Søren Hugger Møller | 24. september 2008 | 11:20Det kan være super træls at rode med andres CSS. Jeg kender det absolut godt. Det er dog ikke altid fordi det er rodet, ofte er det fordi andre har en anden “kode-stil” end mig. Det kan CleanCSS nok ikek gøre noget ved, men det ser stadigvæk ud til at være et interessant værktøj!
Tak for tippet.
Cool værktøj, Kim. Meget brugbart, da alle de andre altid har
Niels Gamborg | 24. september 2008 | 13:08Cool værktøj, Kim.
Meget brugbart, da alle de andre altid har et forbandet rod i deres stylesheets. 😉
Det er godt at høre at i kan bruge det
Kim Andersen | 24. september 2008 | 13:17Det er godt at høre at i kan bruge det til noget. Jeg synes også selv at det er mega smart. Og som Niels og SHM siger, så har alle andre end én selv, altid et forbandet rod i deres kode 😀
@Søren:
Jeg er ked af at jeg ikke lige fik posted denne artikel tre dage tidligere, men håber du får brug for det en anden gang 🙂
Nu kan Dreamweaver rydde op i HTML, så kan den
Michael Østergaard | 24. september 2008 | 17:37Nu kan Dreamweaver rydde op i HTML, så kan den vel næsten også klare det med CSS (har dog ikke tjekket).
Men ellers jeg selv meget pernitten med den slags. Det skal altså bare stå ordentlig – er meget efter mine kollegaer på det område 😀
Super værktøj, og endnu et godt blogindlæg fra dig Kim Da
Martin Nielsen | 24. september 2008 | 22:06Super værktøj, og endnu et godt blogindlæg fra dig Kim
Da jeg prøvede den, redde den dog lige et par ting som den ikke havde fået besked på, men den fandt til gengæld også alt det møg som jeg har været for doven til at rydde op i 😀
Super indlæg Kim om at få orden på sine CSS-filer. Jeg
Dennis Aaen | 25. september 2008 | 13:06Super indlæg Kim om at få orden på sine CSS-filer.
Jeg skrev for et par dage siden også et indlæg om CSS, dette omhandlede, dog at bruge CSS på den rigtige måde. Ikke så meget med at rydde op i sin CSS, men mere at bruge det effektivt og rigtig. Og dog alligevel på sin vis også at få ryddet op.
Nemlig da flere CSS-filer henviste til de samme id´er og derfor kan det være svært at holde styr på hvis man ændre et sted, hvor har man så ikke lige fået ændret. Du kan læse indlægget på min blog. 🙂
Ja, det er et meget fedt værktøj!
Kevin | 5. oktober 2008 | 21:55Ja, det er et meget fedt værktøj!