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.
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 9 years ago.
I'm diving into web design and development. I wrote a couple of website (just client code) from scratch, starting with just a touch index.html. Is this practice still used or most of the web is made out of templates, Wordpress or some other expedient?
I think 3 things are enough to create good websites (showcase websites or small web app):
Server-side = Understanding a CMS , its structure, and its core functions + Having
basic server language notions. In the case of this OP (Wordpress-PHP combination is good).
Client-side : CSS3 + HTML5 + Javascript (Jquery or equivalent).
AJAX as a 'bridge' between the two sides.
Doing things from scratch without using a CMS is good for knowledge but requires more time.
I think there are 2 questions here:
1) Is this practice still used?
Yes, you just used it. Browsers will support it, so someone out there will be doing it.
2) Is most of the web made out of templates, Wordpress, etc...
Yes, I would think so.
You could go the other direction and bypass a web server and create a program that responds directly to HTTP requests on port 80, but using a webserver saves you the trouble of programming and allows you to work with files. Using something other than touch index.html is just another step beyond that, using a more expedient way to get to the html files you need.
It's not saying that all websites must be dynamic - for example, my own blog is written with middleman, which is very like writing a Rails app except that you compile the app into static HTML files. It's just so much easier to write in something like Markdown that gets generated to a nice page instead of having to edit the HTML by hand.
One rule : if you are building a quite complex website, you will spend plenty of time to do something (or many things) you could have done themn in seconds.
Writing websites from scratch is a student task/homework.
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.
The question is simple: it is a good practice we have one "master CSS file" (the same concept of master pages) and, for each page, one specific and unique CSS file?
I ask this because I think that it's useless to have very different code on a page that will not use it — can you all understand me?
From a UI point of view...
Use separate CSS if:
You have almost independent pages with less common stuff
You need to reuse specific pages in different projects
Use single CSS if:
You have lot of common styles
The greatest advantage when using one master CSS file than having a master and several specific CSS files is that
You save on HTTP request times and resources. If you have several files, you need to call your server a few times and waste on the metadata.
Everything is in one place, you get to edit them more easily. CSS becomes more managable for your website.
Caching helps greatly.
The redundant / unused style rules in your master file may be too little to matter much.
In my opinion it is best to have as less number of stylesheet (css) and JavaScript files as possible to reduce number of HTTPS requests.
Having one large css file is better then having 5 different files as most likely the css file will be cached in the user's browser after initial request and cached CSS file will be served after first request.
Yes, it is best practice for the following reason:
When the user loads your website they will take the hit of downloading the singel CSS file on first load - thereafter it will be cached by their browser for every page on your site under your main domain. This means no more loading of the CSS file from the server for surfing your site and faster page loads.
If you have separation concerns from a code structure point of view I would encourage you to consider some CSS pre-compilers such as SASS or LESS that will allow you to structure your code in a nicer way.
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
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'm a beginner at web development, i've just learned about XHTML 1.0 and CSS and had a brief look at HTML5.
And i don't know. Should i start reading about Javascript now or do exercises in HTML & CSS ... I really think i should exercise, but i don't know how to, or what sites that good for this .
Please help me, thanks in advance.
I recommend you start by getting a strong sense of how HTML and CSS work before playing around with JavaScript.
Consider yourself to have a strong sense of those skills when you can do and feel comfortable with the following:
Create several webpages by hand on
your own
Learn a bit about using Divs, and play
with styling them using classes and
IDs
Learn to import your CSS from an external file, and then create an HTML page that can use one of a number of CSS files to code it. Look at CSS Zen Garden to see what I mean
Learn how to use Firebug in Firefox, and particularly play around with styling padding and margins on content on an existing page using Inspect Element. 2013 update: Chrome's dev tools, are getting much better. Link
]2
For the more interesting JavaScript you are going to want an understanding of the Document Object Model (DOM) and you will build that up by doing the above.
If you are at the point that you feel you have done all of the above, then you are probably ready to dive into JavaScript.
Do note that HTML5 is also supported somewhat differently between browsers right now, so focus more on HTML for the moment before diving in to HTML5, that way you can avoid having to deal with some odd quirks still present in HTML5, and the fact that HTML5 has somewhat less documentation.
I highly recommend this book: http://www.sitepoint.com/books/html2/
Its the Build Your Own Web Site The Right Way Using HTML & CSS book, for those who don't want to follow the link.
It is written for newbies and is the book I always recommend for people wanting to learn html and css.
Build your website with HTML/CSS first. Get comfortable with writing semantic HTML. Know how to use floats and how to contain them. After you've made a couple websites with different layouts progressively enhance that with Javascript.
Once you get comfortable with Javascript, take a look at one of the libraries out there to make your job easier (Jquery, Prototype, MooTools).
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.