First of all, I’d like to say thank you to BoagWorld.com for this post and to all those who have shared their thoughts and experience in working with CSS/HTML preprocessors and frameworks in their comments.
The question we asked in that post isn’t accidental. We provide PSD to HTML coding as a service for lots of designers on a daily basis. Clients always expect to get the best result, so we strive to keep abreast of the best practices of front end development. In other words, it’s not just a curiosity, to understand the future of HTML/CSS coding and the most efficient ways to convert designs into high quality markups is a practical need for us. IMO, it’s important for any webdev services and freelancers, especially in today’s competitive business environment.
Below you’ll find a collection of opinions, thoughts, and case studies twittered recently which may help to clarify the role of CSS/HTML preprocessors, frameworks and libraries in the modern web design. Of course, these tools are too “young” to say exactly what they mean for the future of webdev and whether they are here to stay, at least in their present form. So all opinions and experience are important. If you have your own thoughts, feel free to share them in comments.
What They Are All About and Which Is the Best
1). CSS Preprocessors: Focused Decisions
http://www.awwwards.com/css-preprocessors-focused-decisions.html
by Nick Walsh: “CSS is, intentionally, a simple language. With the rise of the complex webapp, the front-end developer specialization, and an increasing feature set, that simplicity is quickly dissipating. For the uninitiated, CSS preprocessors (namely Sass, LESS, and Stylus) enhance your stylesheet writing capabilities through functionality additions like variables, nesting, and mixins – allowing far greater command over large amounts of style.”
2). Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained
http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained/
by Joshua Johnson: “CSS frameworks have been around for years now, but the arrival of responsive design practices has rendered many of our old favorites useless. Fortunately, lots of really talented developers have jumped in to fill the gap with the next generation of CSS frameworks and boilerplates.”
3). Responsive CSS Framework Comparison
http://responsive.vermilion.com/compare.php
“Bootstrap vs. Foundation vs. Skeleton”
4). Sass vs. LESS
http://css-tricks.com/sass-vs-less/
by Chris Coyier: “‘Which CSS preprocessor language should I choose?’ is a hot topic lately. I’ve been asked in person several times and an online debate has been popping up every few days it seems. It’s nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let’s do this thing.”
5). Battle of the LESS Mixin Libraries: LESS Elements vs. LESS Hat vs. Bootstrap
http://designshack.net/articles/css/battle-of-the-less-mixin-libraries-less-elements-vs-less-hat-vs-bootstrap/
by Joshua Johnson: “LESS is a friendly, easily-approachable CSS preprocessor. Though ultimately, Sass and Stylus are more powerful and robust, LESS has a certain charm that keeps it as a forerunner in the battle of the preprocessors.”
6). Compass, Sass and CSS3 greatness
http://www.my-html-codes.com/compass-sass-and-css3-greatness
by Matt Walker: “This one will introduce us to Compass and all the great functionality that comes with it.”
7). Why I switched from LESS to Sass
http://hugogiraudel.com/blog/less-to-sass.html
by Hugo Giraudel: “…please note I’m not a hardcore CSS preprocessor user. I’m more like a novice with these tools, but I’ve already worked a little bit on 2 of them: firstly LESS then Sass. I recently moved from LESS to Sass and don’t plan on going back.”
8). Responsive CSS Frameworks You Will Love
http://www.creativebeacon.com/responsive-css-frameworks-you-will-love/
by jgeorge: “We all like to save time and effort when creating websites for our clients. No one wants to reinvent the wheel. One way that we can do this is by implementing responsive CSS frameworks to get us started in our projects. Responsive design has exploded lately. These responsive css frameworks will help you to create beautiful responsive websites much faster than if you had to create them from scratch. You can get the layout of a site set up in little or no time at all. Below are some responsive css frameworks that you will love using in your web design projects.”
9). Poll Results: Popularity of CSS Preprocessors
http://css-tricks.com/poll-results-popularity-of-css-preprocessors/
by Chris Coyier: “From this we can infer that ‘most’ people have tried or currently use a CSS preprocessor (54%).”
10). A Look at Responsive CSS Frameworks
http://blog.teamtreehouse.com/a-look-at-responsive-css-frameworks
by Ben Gremillion: “Today’s frameworks have an added feature: The ability to change when viewed on mobile devices. I reviewed 15 responsive CSS frameworks to see how each approached the problem of adapting to mobile.”
11). Benefits and Pitfalls of Using Code Frameworks
http://speckyboy.com/2012/01/18/benefits-and-pitfalls-of-using-code-frameworks/
by Jake Rocheleau: “There are reasons both for and against building on top of web frameworks. You need to spend time learning the code and adjust your website accordingly. But in the long run you’ll save a lot of frustration as many common features are already created for you! Let’s delve into these ideas a bit more and consider some of the most popular frameworks today.”
Experience and Case Studies
1). Preprocess THIS!
http://cognition.happycog.com/article/preprocess-this/
by Allison Wagner: “…the point of this article is not to debate the benefits of one preprocessor over another. They each exude awesomeness in unique ways that fuel devoted fan bases. Sass is simply the best solution for me and my workflow.”
2). David Walsh on Redesigning with Sass
http://css-tricks.com/redesigning-with-sass/
by David Walsh: “Creating any website without using a CSS preprocessor seems a horrible decision. Even if only to be able to quickly modify a few colors or element dimensions, or even just to easily merge and compress CSS files, CSS preprocessors are becoming essential. For my recent redesign of the David Walsh Blog, I decided now was the time to dive face first into CSS preprocessors. Here are a few thoughts about my experience, and hopefully you pick up a few tips along the way.”
3). Using LESS as a Live CSS Engine
http://css-tricks.com/using-less-as-a-live-css-engine/
by Andrew Powers: “Andrew wrote to me about how they use LESS in their product and how they think it’s better than Sass for what they do. …I can’t argue that they way they use it is pretty cool and works for them.”
4). Skeleton Boilerplate: Learn How To Convert Artthatworks From PSD To HTML
http://www.1stwebdesigner.com/css/psd-to-html-artthatworks-skeleton-boilerplate/
by Michael John Burns: “I found the Skeleton Boilerplate Framework which makes it very easy to convert PSD files into HTML, by calling the right classes you can create a quick responsive layout. Sounds great right?”
5). 30 Amazing Resources for Sass Lovers
http://designshack.net/articles/css/30-amazing-resources-for-sass-lovers/
by Joshua Johnson: “Despite the predictions of countless skeptics, Sass hasn’t proved to be a fad at all, but rather a remarkably robust set of tools that genuinely improve CSS authoring.”
6). How to Make Your Site Look Half-Decent in Half an Hour
http://24ways.org/2012/how-to-make-your-site-look-half-decent/
by Anna Powell-Smith: “‘Programmers like me are often intimidated by design – but a little effort can give a huge return on investment. Here are one coder’s tips for making any site quickly look more professional… If you’re not already using Bootstrap, start now.”
Opinions – Pros and Cons
1). Is there future for hand-coded markups or preprocessor, frameworks, libraries and other tools will totally run the show?
http://boagworld.com/dev/hand-code-or-frameworks/
Note: There are 11 answers.
2). Libraries enable devs to build without understanding
http://www.netmagazine.com/opinions/libraries-enable-devs-build-without-understanding
by Thierry Koblentz: “Libraries enable people to build websites without learning proper front-end skills, which can leave deeper problems unsolved.”
3). Preprocessors
http://daneden.me/2012/05/preprocessors/
by Daniel Eden: “…preprocessors can be fantastic tools in the right hands. Tread carefully. In my experience, the longer you use them, the less useful they become. More than anything, it depends.”
4). CSS Preprocessors: A Review
http://thecodezombie.co.uk/thoughts/review-of-css-preprocessors/
by Jason Hobbs: “I figured it was about time I wrote something substantial to properly explain why I like CSS preprocessors so much. Firstly, you’ll find no heavy code here; it’s more of a ‘what and how’ than a ‘why’ kind of article. Secondly, most of what I’ve covered can be done in either LESS or SASS, just look for the relevant links.”
5). Are Frameworks the New Cookie Cutters?
http://www.markdixon.ca/design/blog/are-frameworks-the-new-cookie-cutters/
by Mark Dixon: “I do not use a CSS grid framework. To be honest I do not see those point. I understand the rational behind them – that they could speed up certain work – but in a sense it seems like using a sledgehammer when a simple hammer could be used.”
6). CSS Architecture
http://engineering.appfolio.com/2012/11/16/css-architecture/
by Philip Walton: “…whatever you do to organize your code, make sure you judge your methods by whether or not they actually help make your development easier and more maintainable in the long term.”
7). Baseline Grids on the Web
http://jasonsantamaria.com/articles/baseline-grids-on-the-web
by Jason Santa Maria: “This is very much my personal take on baseline grids as they apply the web. I’m not trying to convince anyone; these are just the reasons I’m not a fan of them on the web. However, I am very much in support of them in print design.”
8). Average Page Weight Increases 30% in 2012
http://www.sitepoint.com/web-page-weight-2012/
by Craig Buckler: “I suspect two primary reasons for the page bloat. …The second reason is more endemic: developer laziness. Do you or colleagues… Rely on one-size-fits-all frameworks and never remove redundant code? Use multiple libraries or cut-and-paste coding to achieve different effects? Not concern yourself with the consequences of page weight?”
8a). SitePoint Podcast #189: Websites Got Fat
http://www.sitepoint.com/podcast-189-websites-got-fat/
by Louis Simoneau, Stephan Segraves, Patrick O’Keefe and Kevin Dees: “…It feels to me like a big part of this increase is going to have to do with the spread of a lot of premade libraries. …Another thing that might be worth pointing out, not only frameworks, but even things like preprocesses like SaaS or CoffeeScript. …I think web developers may be a little bit too trigger-happy just to reach for a big JavaScript library or a CSS framework to get an off-the-shelf solution, to be able to develop it quickly and not pay as much attention to how much of a jump that causes to the weight of the website.”
9). How to Become a Perfect Coder on your own?
http://www.dzinepress.com/2012/12/how-to-become-a-perfect-coder-on-your-own/
by admin: “Write the framework” but “Say no to developer tools; avoid the code generators; write by hand; and use the vanilla text editor.”
Pingback: Tweet Parade (no.47 Nov 2012) | gonzoblog
Pingback: 20+ Thoughts on CSS/HTML Preprocessors and Frameworks « human being | #INperfeccion®