As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Any recommendations for a CSS minifier?
I’ll be rooting around Google and trying some out, but I suspected that the smart, proficient and curiously handsome StackOverflow community might have already evaluated the pros and cons of the heavyweights.
The YUI Compressor is fantastic. It works on JavaScript and CSS. Check it out.
There's also a .NET port of YUI Compressor which allows you to:-
intergrate the minification/file combining into Visual Studio post-build events
intergrate into a TFS Build (including CI)
if you wish to just use the dll's in your own code (eg. on the fly minification).
UPDATE 2011: And it's now available via NuGet also :)
I like Minify. In PHP and works with CSS or JavaScript.
CSSO is currently best minifier/optimizer.
If you use Python I would recommend slimmer which is probably not as fast as YUI Compressor but unlike csscompressor.net it doesn't choke on CSS hacks.
I'm biased since I wrote slimmer and I'm currently evaluating YUI Compressor to see how it handles hacks. An example of slimmer in action can be seen if you view the source of crosstips.org
Check out CSSTidy: http://csstidy.sourceforge.net/usage.php
And online at: http://cdburnerxp.se/cssparse/css_optimiser.php
If you are looking for an online tool, try this: https://csscompressor.net/
I've written an ultra fast CSS minifier in C#. The algorithm does not handle Javascript though. Thy this: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx.
Try closure-stylesheets.
Beside minification it also supports linting, RTL flipping, and class renaming.
It can also add variables, functions, conditionals, and mixins to CSS.
Also note that some of these features depend on rest of Closure Tools (which are very powerful on their own).
If you're looking for something in PHP, here's the link:-
Fat-Free Minify
Although it's part of the PHP Fat-Free Framework, it can also be used stand-alone.
I find that isnoop's CSS SuperScrub works very well. It can only handle direct links to CSS online though :/ You can get around that though by using your preferred pastebin service to hold the css code and just giving SuperScrub the raw link.
If your site is in ASP.NET, you can let your site do the CSS minification on the fly (so you don't have to do it manually each time you make a change). For example with this:
http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx
Perl has CSS::Minifier (and an XS version for extra speed).
Others have mentioned YUI Compressor, then the .NET port of it, and I'll add another link to the chain. StyleManager is a server control which wraps up the .NET port of YUI Compressor so you can use it just like you're used to using ScriptManager. It adds a bunch of other nice features too, like CSS constants, tilde (~) resolution w/in your background-image definitions, etc etc. It's tight, well documented, and I've used it on all my recent projects w/o an issue. Check it out - gStyleManager.com
Still "in beta", but should work fairly well. I use the code behind it in every project: http://claudiu.phpfogapp.com/ It's built in PHP and also hosts your *.css file for a fairly large amount of time, surely enough to let you test your code with the minified css. (I would only delete old css files if the space gets crowded on the server).
There is a codeplex project that will plug in to .net websites that will minify and compress the CSS and the JS files. There is also a comparison between the Microsoft AJAX Minifier and the YUI Compressor which shows the YUI coming out slightly better. There is an extra variation which combines the Microsoft Minifier and compression which drastically srunk the file.
Anyway the link is
http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers)
This is how I did it for MVC3:
http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html
The beauty of this approach is that it does it all on the fly and you don't have to pre-process files manually or configure post-build.
An online tool (much better than www.csscompressor.net which jacked my css up): http://www.cssdrive.com/compressor/compress.php does an excellent job.
C# example:
css = css.Replace("\n", "");
css = Regex.Replace(css, #"\s+", " ");
css = Regex.Replace(css, #"\s*:\s*", ":");
css = Regex.Replace(css, #"\s*\,\s*", ",");
css = Regex.Replace(css, #"\s*\{\s*", "{");
css = Regex.Replace(css, #"\s*\}\s*", "}");
css = Regex.Replace(css, #"\s*\;\s*", ";");
zbugs.com will be a good online tool for you, it will minify your css in a single click
Have a peek at the latest HTML5BoilerPlate by Paul Irish - it contains a build script to minify all your assets (including PNG's and JPG's). You can see a demo video here.
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have knowledge of HTML, CSS, and jQuery. Recently I knew about Sass and less. As they both are the style sheet language I am a little bit confused about where to use both of them as CSS is already there and it is also widely used in every website. So how to know where to use these (Less, Sass) in that particular field.
Another doubt comes to my mind is, is it fine to use Sass and Less in wordpress instead of default CSS?
As zzzzBov said, LESS and SASS are css preprocessors.
Basically, you pick one and write your style definitions in that language. When done you run it through the preprocessor and it will generate a normal CSS file for you. That normal file is what you would use in your site.
I'd highly suggest that you skip using SASS/LESS or any other preprocessor until you are more familiar with CSS in general.
A little more information about LESS.
LESS can be run ahead of time as an actual preprocessor OR you can simply link the less.js file and your .less file and let the browser do it. The problem with letting the browser do it is that every single browser that hits your site, for every single page, will have to "recompile" the css in order to render your site correctly. Considering you have zero control over the computers hitting your sites this might result in a "slow" site from some peoples perspective.
Further, that javascript only works in some of the browsers, further limiting it's usefulness.
Quite frankly, CSS is one of those things that you generally set up once for a site and leave alone for a year or more. So, it may simply just not be worth it.
SASS and LESS are two Domain Specific Languages that are converted to CSS via a preprocessor. The preprocessor can run client-side in Javascript or server-side via PHP, Node.js, Rails, etc.
Either SASS or LESS would be excellent for a new project. Or if you're using a framework that makes use either technology. (Such as Bootstrap or Rails).
If you're modifying an existing web site which uses pure CSS (such as Wordpress) you should almost always extend and build off of the existing styles. Mixing plain CSS with SASS/LESS can be a mess especially if you are just learning the technology.
Both are here to make your job easier //save time, make your CSS more readable, you will no longer forget colors/margins or specific values that you used, because you can create variables, mixins etc.
If you feel like you would benefit from any of features provided, why wouldn't you use it? It's not mandatory to use those, it's not like I would use CSS for every project I create (majority though). Try it out, it won't take more than an hour to know basic features.
For my website, I'm considering using Less.
Can I have some problem of compatibility in browser, problem with JavaScript or other problems? I know that is better than CSS but I don't know if I can have problems.
Although I prefer SASS over LESS (better syntax [loops and control structures] and it has some more capabilities => my opinion), it's generally a good idea to use a CSS-Framework. It safes time and unneccesary work. Just be sure to precompile your styles in Production mode. Don't do it clientside (might cause problems: disabled javascript, performance-issues...). If you precompile the CSS, you don't have to fear any problems, since native CSS gets delivered to the browser.
You can take a look at a good comparison here:
https://gist.github.com/820035
from the LESS docs:
As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. [...] if in doubt, lets you fall back to CSS.
The best approach in production is to server-side compile it, while in development you can simply use the client-side javascript compiler:
http://lesscss.org/#-client-side-usage
also note that LESS is not strictly a framework (opposite of what Twitter Bootstrap is) but can easily be paired to one. Bootstrap itself has a LESS-enhanced version as well.
I agree with #Christoph. I prefer SASS too. Also Less or Sass aren't used to browser compatibility. They are used to add functionality to css.
You can look at that article here.
http://nittygrittyjs.com/blog/why-less-is-a-pain-in-the-sass/
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
How do you guys do maintenance on CSS built with Less/Sass?
One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?
Chrome Developer Tools now supports Sass debugging out-of-the-box.
Updated to include source maps:
Previous versions used inline comment in your css to provide a refernce to the source code (see below how-to). recent versions of sass (3.3+) and chrome (31+) use source maps for that:
Make sure you have Sass 3.3.x
Compile your Sass with the --sourcemap flag.
In Chrome/ium DevTools open settings and click general.
Turn on "Enable CSS source maps".
More info is available on the Chrome dev tools blog:
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
Older versions:
1. First, you should compile your Sass with --debug-info turned on.
2. In Chrome/ium go to about:flags
3. Enable Developer Tools experiments
4. In your inspector (F12), open "Settings", then go to the "Experiments" tab
and check "Support for SASS".
If you're making a choice as to which you should be using, this article on css-tricks might be of interest to you.
I have come to experience that using LESS or SASS has more advantages than disadvantages. Though this is certainly a disadvantage I can only suggest you structure your files well so any styles you seek are easily found using other references, here are a few things you can do:
Document areas of your stylesheet; ie /* General */, /* Header */ and /* Footer */
Use logical and sensible names for classes you can recognize quickly (and don't number them like error1-error10 or something)
Learn to dissect the class/element/id selectors and think about how/where you would have written them.
Use CTRL+F, often the precise attribute or one near it is fairly easily found this way
SASS
There is now a way to debug SASS in firefox using an extension that reads and displays the sass files in the firebug inspector. To use, install the extension and enable the respective debug flags.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
Edit: as of 2014-07-06, this plugin is no longer available for download. FireSass has been discontinued.
Chrome/Webkit versions have been popping up around the net and theres a beta feature in chrome to add support for SASS debugging. It's based on the same debugging information used in the firefox version. Haven't been able to judge any of them properly as of yet, nor found something which is publicly accepted as being the plugin for the job as of this writing.
LESS / STYLUS
As this tweet #jaketrent points to explains, there is progress on the debugging side in chrome, but nothing baked in yet and given the state of the LESS github it might still take a while... Both solutions are based on the beta feature for SASS debugging support in chrome, basically adding the same debug information as SASS does.
https://github.com/cloudhead/less.js/pull/1038
https://github.com/LearnBoost/stylus/pull/886
I rarely have issues with maintenance/debugging in LESS -- we always compile on the server end and reference only the CSS file in the HTML page. This makes it so there's always a one-to-one correspondence with the webpage and a file on disc.
And then when I have to edit the LESS file, I find that LESS, since its pretty much CSS+extra markup, it's quite easy to backtrace anything I'm confused about to the originating statement in CSS. If it's a mixin, it's pretty obvious (since I usually use mixins to prevent having to do all the vendor prefix stuff repeatedly), and then it's just a logical hierarchy since we use the class nesting feature, so finding:
div#awesome aside ul
is as easy as finding:
div#awesome{
aside{
ul{
padding: 0;
}
}
}
(although we try to not go more than 3 layers deep)
I have no real experience with SASS but I didn't like how far removed from CSS it was when I first looked at it a few years back (and haven't been back since...)
Some tips:
Include both the .sass and the .css files in version control. This way everyone has the most current changes.
If you organize your stylesheets into logical areas, maintenance is a breeze.
Also: try to use fewer than three main colors, and then use SASS color functions to modify them and store results in variables that you can reuse throughout your design/theme.
Ex:
$chartreuse: #7fff00
$olive: darken($chartreuse, 32%)
That way, you only have to maintain one color. And the rest will be recalculated.
Until recently, there were no in-browser SASS debugging tools.
There is now a Firefox plugin called FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)
In your sass --watch command, add a -g for --debug-info so that it will output the hooks needed for the plugin to run.
I switched from less to sass, because of firesass.
With this you get the original sass line in firebug.
install firesass if you use sass
Yesterday I asked a question here that got more momentum that what I thought it would. Here is the question link since it is related. I am interested now in the possibility of that using two frameworks together will be worst than using a JS framework and CSS from scratch or the other way around.
The question is clear, if you think there are arguments against using a CSS framework like Blueprint CSS please tell me what you think they are.
The main argument is that CSS is not really a programming language. A framework is meant to include reusable functions and data structures. CSS has neither of these constructs. A CSS "framework" is more akin to a template in a word processor. It provides ready-done design work, but it also imposes more constraints than starting from a blank slate.
Incidentally, this was what drove the development of Compass. It's similar to a CSS framework, but instead it uses the CSS metalanguage Sass, which does have functions and variables. Thus rather than (for example) having columns baked into the framework, you can write something like +columns(5) +column-margins(1em) and it will generate the appropriate CSS.
Browser compatibility? We're continually struggling to maintain IE6 support for the 1/3 of our clients that cannot or will not upgrade. Lots of CSS issues.
I use the YUI CSS libraries, but I'm not sure if that counts as a framework.
YUI handles the basics for fonts, layout (grids) and other formatting and makes it consistent across browsers and Operating Systems. It's under a free software license, also.
They also have a very useful interactive grid designer.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I am working with some CSS that is poorly written to say the least. I am not a design/CSS expert, but I at least understand the C in CSS. While the builtin CSS support inside of VS-2008 is far improved over previous versions, it still doesn't quite do what I am looking for.
I was wondering if anyone know of a good program or utility that will help me to refactor and clean up my CSS like what ReSharper allows to do with C#.
Some features that would be nice to have:
Examine CSS files and determine ways to extract common styles like font-style, color, etc...
Plugin to VS-2008 would be awesome!
Examine markup files and make some suggestions on improving the current use of classes and styles.
The Dust-Me Selectors Firefox extension can scan a website and tell you what CSS is used and what is not. Removing unused CSS is one good first step in refactoring.
I have often found that when some section is removed from a website, the HTML is removed but the CSS is not.
TopStyle is popular and always the one I hear recommended. It has recommendations on styles etc.
I use Aptana but this doesn't do an refactoring just flags up errors and allows you to target certain browsers. Using this a a decent CSS book may help.
Firebug is a very good Firefox extension that allows you to examine which CSS declarations are active for which DOM element in your document tree.
Although it does not make any suggestions for improvements, it's a great help when debugging/simplifying CSS code by hand.
The Web Developer extension is also a great help.
If you're using ASP.NET 2.0, there's ReFactor! for ASP.NET
I've had good luck using Stylizer in the past. It's nicer and only costs 1/6 of TopStyle.
There's a Ruby gem called HAML that ships with an executable called css2sass. That executable translates CSS into SASS, which is a metalanguage on top of CSS that makes it much easier to refactor (by better illustrating the relationships among your selectors). Might be worth taking a look.
I used to use WestCiv's StyleMaster, which is a pretty good CSS editor / inspector / debugger app. Combine that with the afforementioned Firebug, and you can't help but stay on top of your CSS.
My attempt at playing around with Less for .NET.
I might be a little late but the ReSharper 6 early access preview (EAP) does this for you!
In a CSS file, entering "#" will auto-complete every ID from your project. Same with a period "." to list all your classes.
Best part: when you rename the selector it will rename it project-wide. It makes refactoring CSS much faster, if not pleasurable.
I like Expression Web's CSS facilities. But it doesn't do much for minimizing or unifying your CSS. You have to understand how CSS works to use it properly.
EditCSS for firefox is amazing.
This site at least helps to sort and minimize your rules: http://www.cleancss.com/
It doesn't get you to where you want to be, but it's a good first step.
Maybe CssTidy or CssOptimiser can help to clean-up and make smaller