So a long story short, cut to the chase, whatever you want to say… I’m going to start a new job in a few weeks, and they’ve asked me to get quite familiar with CSS. I won’t need it so much, but they said it’s good to know. I have a basic understanding of CSS, but I need to find a great compression/optimization tool to make my code cleaner. What modern online or offline tools are considered the best?
Cheers!
I’m not sure a CSS minifier (if that’s what you’re after) makes code any cleaner. Minified code is certainly more difficult to read. When I minify CSS I either use http://www.cleancss.com/css-minify/ (only because it comes up first in my search) or CSS Crush pre-processor.
There are browser add-ons to check for unused classes etc.in your CSS.
SASS/SCSS + BEM Naming convention, would force you to write cleaner, modular and more maintanable CSS code.
I don’t know does you have experience with Gulp but there is gulp-uglify plugin that could compress your CSS and JS code.
Look like some pretty solid options. Cheers. I did a bit more digging on the subject and came across this blog post https://www.1and1.com/digitalguide/websites/web-design/css-compression-for-consistent-loading-times/ and it suggested ‘CSS Minifier’ as one of the tools. It says it “shortens the code by removing line breaks and spaces as well as deleting the final semicolon in the list”, which is more or less what I’m after.
Is CSS Minifier essentially the same as the ones you guys suggested? And do the ‘pros’ use the same ones?
I would only use CSS compression if I modularize into multiple CSS files (which I don’t). If you have a single CSS file then I would just leave it. All it does is remove the new lines and empty spaces. You can’t compress any actual values. I believe it does ‘optimize’. I would just google ‘gulp css compress’ and use those.
Your assumption that code compression somehow produces cleaner
code is, in my humble opinion, rather ill founded.
Further reading:-
coothead
This is a handy tool for tidying up dirty code:
That looks like it does a good job of formatting everything nicely.
Despite the topic title, I have a feeling what is wanted is a linter not a minifier.
Hi there Mittineague,
why would your “CSS LINT” give this warning…
“Disallow IDs in selectors Don’t use IDs in selectors.”
coothead
‘Specificity’ I gather. The sooner you resort to ID’s, the more difficult it becomes to override them, and before you know it, you’re into using !important. I get the very distinct impression that class is favoured instead.
I don’t think that message should be so severe.
Id selectors have high specificity value and if used indiscriminately for “convenience” can cause problems if less specific rules try to over-ride them.
But I think at times they can be useful, and maybe even needed.
IMHO, much better that using !important
Hi there ralphm,
your “dirtymark” tool works well. 
the only change that it made to my test code was to change this…
border-right: 0.06em solid #999;…to this…
border-right: .06em solid #999;coothead
Two I’ve used online are:
https://css.github.io/csso/csso.html
Cool, thanks for all those options. I’ll try out a few tonight 
Which code editor do you use? Most of them can have linting tools installed as a plugin, and they are usually configurable to your own tastes, or can be turned off when not required.
I should have mentioned that there are also add-ons for code editors like Sublime and Atom that tidy code for you.
Hi @ralphm, which add-ons would you recommend (if any) for Atom?
Hm, not sure off the top of my head, although it’s worth seeing how much you can do with Atom without an add-on. See this for example: https://www.sitepoint.com/12-favorite-atom-tips-and-shortcuts-to-improve-your-workflow/#autoindent
A quick search suggests there are plenty to choose from. E.g.
Hi @ralphm thanks for that. Linter has a ton of open issues, but Beautify looks great, and appears to be well-maintained.
Kudos,
Jeff
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.