For Front-end development. Writing pure CSS is unproductive. You have to copy & paste the same style again and again. Once the project owner changed his mind, developers have to change each piece of code. I bet you will face this situation tons of times.
Sass helps you to build reusable CSS. When you have to change the style, you only have to change a part of code. To write reusable code is one of basic skills developers have to acquire. Reusable code is maintainable, maintainable code reduces both your work time and numerous careless bugs.
Tools I use personally. If you want to acquire CSS techniques, I encourage you to learn Sass's syntax first. Once you get to know it, learn SMACSS. Then you will understand what reusable CSS is. Compass is a good framework, not only that but also it's a great document for studying reusable CSS. When you are ready to develop in Sass, I recommend you to use Gulp.
- Great enough for most projects, unless you use ReactJS
- Easy to use
- Minimize CSS, uglify JS!
- config example
- A competitor of Gulp
- I barely use
- config example
- CSS3 extension
- Allow you to write reusable CSS
- Once you use this, you'll never want to write plain CSS
- Reusable components
- Great if you use Sass
- Design framework
- Not actual tool or library
- Guides you to think of reusable CSS
- code example
@mixinis reusable- I no longer maintain this file, but I think it's a good example
- I don't like using id, e.g.,
#aboutin CSS anymore though. I believe id is for JS, class is for CSS. So I can easily change CSS without thinking about JS
HTTP is a transferring protocol. There are so many HTTP requests sent when a page is loaded. See it in Chrome
With HTTP 1.1, browsers can download only one request at once. More requests will need more time to load a page. This is the reason why CSS Sprite technique is invented.
You will see multiple CSS files are loaded in a page. Here is the example. Although nobody wants to load a slow page. Gulp combines all CSS and JS files you implement to one CSS/JS file. Here is a good example. Obviously, loading one file needs only one HTTP request.
Try to reduce the number of requests for user experience.
If you are interested into performance, This is the note I made.
Image, CSS, JS files are cached by browser.
I sometimes see there are many CSS files loaded by different pages in a website. Page A loads page_a.css, page B loads page_b.css for example. Those CSS files are just slightly different.
This is bad. Because browsers have to load two similar CSS files. If those files are the same, browsers only need to load the file once. After the CSS file loaded, browsers will load cached file until the cache expires. It is much faster.
Intense! http://www.theguardian.com/international
I think you have used CDN. Like google fonts, jQuery, and Bootstrap.
What CDN does is to deliver contents from CDN server. CDN server caches the contents to deliver them quickly. It also helps optimizing web traffic. Additionally, if the contents are loaded in other websites, they are cached by browsers. Using CDN contents is highly recommended.
I recommend you to read Essential Javascript Design Patterns
Compass and Gulp help you to code cross-browser CSS