Less and Sass vs traditional css methods and thoughts on performance and seo etc
I've been trying to create a decent workflow for building sites using html and css.

I want good performance but can't figure out whether using sass or less would significantly help with this.

The reason why, is firstly I see how using variables and mixins allows you to keep certain things in one place but once the css is compiled you could end up with, for example, lots of styles with the same border radius prefix settings and this could lead to a large css file or a larger one than you might have had you followed a more traditional approach... So even though the less file keeps certain code to a minimum, once it's compiled the file has the potential to be quite large like in the below example. Is this right?

    input, textarea {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }
    
    .box1, .box2 {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }
    
    .btn, button, .btn a {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }

Another approach would be to create a class for border radius with each of the browser prefixes and add this to each html tag where you'd want this. And you'd do the same for with other styles so each html tag uses multiple classes. The downside to this would mean going back and fourth between the css and the html every now and then and the upside is the size of the css may be reduced considerably.

    .radius2 {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }

And then another approach would be to create one style for radius with all the browser prefixes and add all the classes and ids, etc of the elements you want to it like so:

    input, textarea, .box1, .box2, .btn, button, .btn a {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }


**So to summarise, I'm wondering what's the best approach or if there's maybe a better way to do things. I'm also wondering if I'm missing something with sass and less. They seem like great tools but I'm not quite sure if there's a signigicant reason why I should use either on any project.
And finally, what's a large stylesheet nowadays. I've been trying my best to get all my stylesheets down below 15kb or 20kb but find it hard. Then I see that twitters bootstrap css is 56kb (47kb minified)! What's a good size and what are the impacts on things like pagerank, seo etc if you have a "large" stylesheet?**
Less and Sass vs traditional css methods and thoughts on performance and seo etc
===

I've been trying to create a decent workflow for building sites using html and css.

I want good performance but can't figure out whether using sass or less would significantly help with this.

The reason why, is firstly I see how using variables and mixins allows you to keep certain things in one place but once the css is compiled you could end up with, for example, lots of styles with the same border radius prefix settings and this could lead to a large css file or a larger one than you might have had you followed a more traditional approach... So even though the less file keeps certain code to a minimum, once it's compiled the file has the potential to be quite large like in the below example. Is this right?

    input, textarea {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }
    
    .box1, .box2 {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }
    
    .btn, button, .btn a {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }

Another approach would be to create a class for border radius with each of the browser prefixes and add this to each html tag where you'd want this. And you'd do the same for with other styles so each html tag uses multiple classes. The downside to this would mean going back and fourth between the css and the html every now and then and the upside is the size of the css may be reduced considerably.

    .radius2 {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }

And then another approach would be to create one style for radius with all the browser prefixes and add all the classes and ids, etc of the elements you want to it like so:

    input, textarea, .box1, .box2, .btn, button, .btn a {
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    }


**So to summarise, I'm wondering what's the best approach or if there's maybe a better way to do things. I'm also wondering if I'm missing something with sass and less. They seem like great tools but I'm not quite sure if there's a signigicant reason why I should use either on any project.
And finally, what's a large stylesheet nowadays. I've been trying my best to get all my stylesheets down below 15kb or 20kb but find it hard. Then I see that twitters bootstrap css is 56kb (47kb minified)! What's a good size and what are the impacts on things like pagerank, seo etc if you have a "large" stylesheet?**