Look at this website layout:
You’ve probably coded up something like that, right? How many times? A lot? Did you do it from scratch each time?
I think more discussion about front end code reusability is worth having. Theoretically I would think CSS would be some of the most reusable code we have available, but that doesn’t seem to be true in practice.
I have more thoughts, but I’ll save them for the comment thread.
I do reuse some css, but not something as fully-formed as an entire layout. Mostly that’s because I find I can build it better and better each time I do it, as I learn more… but also I feel there’s the trap you can get into of reusing so much code that your sites end up being too similar down in their bones. Each design should be unique, even if they’re made from the same building blocks. I do reuse components all the time.
I agree completely. If I want to make something like a really quick site that will only be in use for a week, I may use Bootstrap or a similar framework. However, if it’s something more important, I will design completely from scratch, maybe implementing past ideas, but never just changing the content.
About getting better at site design: just for fun, I recently opened up my first website; back then I was so proud of it, but… it is terrible. It has dull colors, isn’t responsive or in any way cool, and it is based entirely on tables, using font tags and outdated standards. Now my sites are better, but I wonder what I’ll think in ten years looking back on them.
Same here. Specially the part where you said ” I can build it better and better each time I do it, as I learn more” is exactly my insight into the matter of reusability. although I do maintain some basic structural approach everytime but I prone to write each line from scratch. and this gives me a peripheral concept from the begining to the finishing up codes!
OK ! I Have to say that the Discission is Great ! Thank you are.
Beyond normalize.css and a couple of bootstrap attempts, I haven’t reused more then one class at a time. Boy do I wish I could reuse CSS more often, but it never seems to work out that way.
Same here.
It would be silly not to reuse some components if you are working on a fixed-price project with unreasonable timelines. I keep a library of commonly-used assets, such as a horizontal nav bar with drop downs or a CSS-based table – these can take time to build from scratch so why bother when you can cut, paste and tweak from another project? Of course I am always looking for better ways to do things so I replace those components when I find better options.
More than often I might copy an old site that’s close to the new design I am doing then add or remove CSS as needed.
That’s what I do mostly, too. Of course, my reset css is same for almost all sites I developed. For layout styles, I make little changes and voila!
Mee too!
I also copy old sites that are similar and rebuild what needs to be different. I also find myself reusing code for buttons, sprites, and other small things like that. Of course, I need to get better and defining my reusable pieces to save time down the road. Good discussion!
Exactly! We always have a bunch of CSS ready to reuse after a few websites done. Every new project I check new trends in boilerplate, normalize and some others. CSS Tricks is my shepard also. After setting LESS as my default CSS preprocessor everything became more easier to reuse.
Yea, I reuse as much of my already written CSS as much as I possibly can. For a site like that, I’d reuse any modular pieces that I’ve developed elsewhere. With each site, the goal should be to modularize everything that’s likely to be repeated. Of course, not everything is likely to be repeated, so that’s where I typically put it in a specific stylesheet, to be used only on a specific site. But each new site should be used as a chance to refine/enhance your library of code.
I don’t reuse css. I remember practices that I liked from my previous work and implement them in the project i’m working on. Every project I work on usually is different from the one before. I do however find myself reusing JavaScript.
When I know that I’ll be reusing styles (large project, lots of modules), I usually create a Compass plugin so that I can more easily use the styles in multiple projects/workspaces.
I very rarely copy whole stylesheets, as my Computer Science professors insist that duplicate code is a disaster (and for good reason).
I like to reuse code, but not just blindly as CSS develops and my skills do over time. So I may not always attack a problem the same way each time. But I try not to reinvent the wheel over and over again. But it’s just not reusing CSS, its also JS and backend code as well.
If a developer needs a login function for a website, do they write it from scratch? I bet very rarely. They use an existing project (e.g. a CMS like WordPress) or a modular component to a framework (e.g. a Rails gem).
What makes back-end so code much more reusable?
I think that back-end code is more reusable because the function is concrete, literal, and tightly-constrained. Design function is a lot more nebulous and subject to a wider array of factors beyond a piece of code written to accomplish one specific task. A login will always do the same thing, but a header block will do something different every time.
I think Zak hit it on the head, its usually much tighter and an easier beast to tame.
Yes a header block may act different inside the block, but the things that are reusable are things like types of navigation systems, general layout for a site, all the way down to specific problems you encounter. Code is code, you should have a folder with code for problem/situations saved. (or however you want to manage that).
No need to waste your time writing everything from absolute scratch once you have done it once.
For better or for worse, most code is designed to do one thing, and usually does that one thing only in a specific way in a specific context… think methods on OOP classes.
However, CSS should be used in multiple ways, in multiple contexts. CSS must be more flexible, and therefore should be thought of more like lisp (or even better… scheme, where you have a limited set of basic constructs and everything more complex must be composed). If you can think of it in that sort of mindset, CSS is just as reusable.
The problem is that CSS isn’t just three basic constructs, it’s a lot. Plus, while the way things are rendered is documented, it’s difficult to learn, and has a high learning curve. Therefore, it takes a long while before people are comfortable enough to think about CSS in an abstract way that promotes code reuse.
Yes! That’s why I love the idea behind OOCSS, the media object, abstractions, etc. You can build up a library of structures and apply them to your designs, rather than reusing the designs themselves.
Car makers sometimes re-use the same engines, frames, transmissions etc on different cars, but they couldn’t re-use the same body and call it a different car.
But having said that, I tend to re-use markup patterns and class names, but the css always ends up different because of the design.
I develop for both front end and back end. And the biggest reason that I reuse backend code a lot more than I do with css is because css is just a lot easier to remember. Instead of pulling out a code snippet from past project, it would probably be faster for me to just write it out.
I think code is much easier to reuse since no one really cares about what it looks like in the end. The front-end is what everyone sees and everyone wants to have a say in how it looks. There are so many objective ways to work a back-end, just making it work is all that’s needed (obviously it can be tweaked and optimized to work better and faster), The front-end is much more subjective – and relies on CONTENT. Every site hopefully has different content, and so will look differently, and should have different front end code. I think we can reuse techniques on the front, but reusing code? Nah, I choose handcrafted every day.
Most of the websites I built are quite different in many ways, and, like @Zak mentioned, I like to think that I get better at what I do, making the code even more distinct. However, what I reuse most often is the technique or ‘tricks’. Sometimes I find myself trying to remember how I accomplished a certain effect or task and going back to one of my old websites.
Either way, if we were just stamping CSS like it was all the same, why hire a person when CMS can do it? My 2cents.
For instances like drop shadows, text effects, buttons and other small items – I think it’s perfectly alright to re-use code.
When it comes to re-using a complete stylesheet, I think you run the risk of not knowing your code, line for line – which is something I try to do (for the most part). You also decrease the amount of potentially wasted code thus potentially reducing file size.
Agreed, specific “effects” like drop shadows, gradients, etc get reused all the time. Its when we start reusing both layout and ‘atmosphere’ (to use @malarkey’s term) together from one design to the next that we get into trouble territory.
Modular objects are a great way to reuse CSS that are also easily and rapidly re-stylable to morph or adapt into a new environment or context.
For example, the Twitter bootstrap dropdown menus. Really, it’s just a container with links. If you want to change the way the dropdown menu looks from one site to another, use the exact same markup and CSS, except add a “skin” class to the parent object, and bada boom bada bing, you got a whole different animal.
There are very few objects/modules with high-frequency use that enable an everyday user to quickly recognize, navigate and engage with them? And, if those high-frequency objects are mutated too much, it runs the risk of reducing conversion, ease-of-use, engagement, etc.
I’m all for reusing CSS. Then making it look like I totally didn’t.
That’s typically how I roll too. When I find myself re-using a little cluster of code, I pop it into my snippets library in Coda (and even assign it a tab key if it’s that important). That way they’re always handy, and I don’t have to go digging through past projects to find them.
Re-using a whole style sheet doesn’t feel right to me, like I’m violating the principles of innovation and originality. I guess it falls into the same category as using a template. I just can’t bring myself to do it.
I’ve been trying to adopt a style similar to what Brian and Andy have mentioned. After reading an article on BEM methodology, I started to create snippets of code that grouped HTML/CSS code together for commonly used Block+Element combinations like one shown in the image above where “Our Team” consists of blocks containing image, title, text, and button elements. From project to project, the HTML and CSS are going to be practically the same. So I agree with reusing small snippets of code to speed up the coding process and allow time for some more experimentation and creativity on the side.
I think CSS can never be ‘reusable’ in the way that, for example classes in object oriented programming are. When you design a new site or whatever, no matter how similar it is to your previous project, chances are high that you will need to change a few details here and there.
And ofcourse you copy old code for new projects if you need it, but that is not the real reusability we’re talking about. Maybe induct the whole OO paradigm in CSS? Don’t know much about that, as I haven’t got time to play around with SASS and such tools.
If time is often an issue, you can’t afford to NOT use something like SASS or LessCSS, with a collection like Less Elements. It takes a little time to set up but saves lots of time in the end.
Backend is a function, login function is all the same (to the most part). CSS is style – in my experience nobody wants to have the same style as everyone else, but again, if they do, might as well get pre-packaged templates.
I do reuse certain general modules – navigation, buttons – but for the most part I rewrite my css especially when I come across a new technique I’d like to try. I do start out with HTML5Boilerplate, however.
Nothing, except maybe it’s written cleaner. I try to divide up my CSS so that it is more reusable. With different sections it’s easy to just change one font or color for different sites, or just use whatever sections apply.
I never write CSS specific to the site i’m working on, unless there’s a one off custom page with its own styling. It really defeats the purpose otherwise and gets extremely boring carving out the same stuff. I don’t use LESS or SASS for ‘faster development’, I just write proper CSS i can use time after time!
CSS is not ‘code’. That’s just the way it is, although I am not saying it cannot evolve or something.
I disagree. Just because it doesn’t have for loops or logic doesn’t mean it’s not code. Code is just a set of abstract written directions.
Rather than not being code, it’s not turing complete?
It’s lacking a lot of the features that let you reuse stuff, and besides, unless you want things to look exactly the same, you can’t just reuse stuff. this project might need a 5px radius where the other needs a 10px radius AND a green border…
stuff like sass and less makes mixins and such reusable though.
I think we need to organize the ways we write CSS. Then you can think about reusing code. SMACSS and OOCSS are nice approaches for that. Together with the power of CSS proprocessors like LESS or SASS it’s quite easy to reuse code.
Hogwash. CSS is read by browser and executed. That, is code.
The problem is that CSS is effectively assembly, which is also really hard to reuse.
The answer to the reuse question is higher-level programming languages. check out less CSS. Variables Mixins, functions, imports, compiling.
It seems to be more about tooling than objectives or artifacts
Like everything any design coding must start from scratch (meaning using a template like html5bolierplate) but never start copy/pasting from another layout huge chunks of CSS, I don’t think CSS should be reused – reusing it just makes you lazy and does not give you room for creativity in the way you write a layout.
I believe that through writing code from scratch sometimes you discover new things, new ways to write that same line or maybe a nice accidental effect, but that’s my view … good question anyway!
Reusing CSS is lazy?
That’s like telling a house framer that using a nail gun is lazy. I bet he’d respond, yup, I’m the lazy mofo that just framed 4 houses in the time it took you to frame a wall!
I suspect that the reasons most designers don’t reuse CSS are many. But Maybe those that accuse others of laziness are covering up their own laziness. If u are still coding in raw CSS and not using less or sass or stylus or some other preprocessor, I’m gonna bet its because you haven’t tried. Now that’s lazy! :)
Starting with a reset is a simple form of reuse. Most sites have headers and footers. The long footer with sitetree is an excellent design for 90% of websites. And take a look at your browsers history. Pick out the top 100 sites you visits. 99% of the tools for layout and visual features are in twitter bootstrap. Have you learned that yet? If your not using it because you think it will limit your creativity then maybe you aren’t that creative. Every thing is overridable. It’s CSS! and why code ‘highlight row on mouseover’ (also excellent design practice) one more time, when it’s built into the .table class?
Two additional benefits of using tbootstrap are:
1. You’ll learn to write better CSS. Do you really think you’re better than the guys that publish twitter bootstrap? Well, publish that shit you selfish bastard! The world needs it!
2. Teamwork. I bet I can pickup any bootstrapped project and be an order of magnitude more productive than the best designers working on some else’s handcrafted project. Any who has used it for a week knows what the following code does.
.row
.span3
.span9
I challenge you to post similiar CSS from your project that can communicate 1% of the information in the above 15 characters.
If you think that all bootstrapped projects look the same, it because they don’t, when done well. Those that aren’t done well, look better than they would if they hadn’t used it.
If you’re writing over 10% of your projects CSS then you are not spending enough time learning how to do it better. (probably because you don’t have time)
“good coders write good code, great coders copy great code” – someone smarter than me.
(see how effective reuse is!)
The differences between reusability of backed code and CSS are small.
Much more significant is that programming is an older craft so we have masters to learn from. Learning also seems much more deeply ingrained.
Also, the impact of code not working is frequently complete failure to function rather than marginal loss of aesthetic. (not that broken CSS can’t render a site completely incomprehensible).
But most significant is that until recently, with CSS precompilers, we haven’t had good tools to organize our CSS for easy reuse. Precompilers bring the reusability of programming to CSS.
Chances are, if your a programmer doing some design, you find plenty or ways to reuse your CSS that empowers your creative expression. if you’re a designer, learning about reuse patterns from your peers or programming coworkers might be just as empowering… Maybe more.
I think the biggest risk of trying to make CSS into a re-usable block is that you might find yourself trying to constrain a design to fit into your “reusable” building blocks which only leads to websites that look templated and boring.
You’re so right !
I do reuse a lot of my code. In fact, I have a base framework that I start from for new websites. Writing reusable code is harder than one might think. It’s important to target functionality for reuse, not design or structure. Consideration needs to be given to inheritance and make sure reusable code isn’t too greedy. Lastly, reusable code need to have proper namespacing so other frameworks and custom code isn’t polluted.
Does writing CSS that is intended to be reused mean that it serves any one site less well than it could?
That really depends on multiple things. The introduction of a new framework to a project may effect other frameworks. This maybe because the framework is poorly implemented or certain HTML structure is required which doesn’t play nicely with existing frameworks. This is an issue that can be seen when implementing new plugins to WordPress. You’ll like have to modify a plugin eventually.
I think the biggest factor is HTML. CSS is tightly coupled to HTML, and HTML is tightly coupled to content. Content from site to site varies. Thus HTML from site to site varies, thus it’s hard to use identical CSS from site to site, even in small bits.
Very true, especially when multiple developers are concerned. But do we want that? I think the tight coupling of content and presentation is a real asset. Spinning our CSS out into apply-everywhere blocks might be good for large sweeping changes (global font switching, background colors), but any more than that would be a detriment I think.
That statement totally depends on whether you own the html or not. If you do, it’d be foolish not to re-use your styles.
In your example the HTML stays pretty much the same, you mentioned that you’re re-making a similar layout over and over again and wanted to re-use some CSS. If you are the designer of the sites as well as the coder and you’re not changing your CMS then it stands to reason that you could re-use a big chunk of the CSS.
Obviously you could re-write it and probably make it better or re-think something, but that takes more time, the goal of this article was to try to re-use. We’ll put this theory to the test for you; we’re finishing the design of a site where the blog section is pretty much the same layout as a different blog section of another site we’ve made in the past and we’re going to try to re-use the CSS for that section/template. I’ll let you know how it goes.
Also if you have a minute check out html5.mimoymima.com — our boilerplate for WordPress — we’re big fans of re-using code :D
b r e n t
HTML is tightly coupled to CSS but thanks to the preprocessors and such (that allow us to create ‘functions’) it doesn’t come to be a big problem (from ie9+ [1])
Object oriented CSS is a very useful way of reusing, but having preprocessors I’m starting to appreciate other ways of coding.
For example, imagine we code semantic HTML with semantic classes and tags. Then we could define styles in the website less/sass affecting the semantic html. These styles would be in charge of calling mixins of our less/sass library/base framework.
This way we can maintain a huge library of useful stuff (the way compass does as a base), and we can reuse it everywhere. The great thing is that doing this we decouple HTML and CSS, because the HTML is semantic and does not define styles. So we end up with layers like this:
HTML semantic – Defines HTML content wise, not based on style
App css – Defines styles for the content, new ones or linking to functions we have in our libraries
Libraries & Base frameworks – Group of libraries and functions (compass, our own, etc)
This way, we can use identical CSS but that references different HTML in different projects.
We could go on talking about how hard this is, and how would you separate your library.
This coding style requires lots of discipline, and the library has to be clearly separated, parametrized and documented.
In a certain way, it is what bootstrap does, but their perspective is mixing pure functions and with CSS that applies to the HTML.
I would certainly love to see a bootstrap-like library, with better configuration options and that would not apply a single style to the HTML. Also, that would separate structure from style.
This way, we could use it as a reusable base keeping the HTML and CSS decoupled just doing the work of linking the semantic html with our preferred functions/styles/structure.
[1]:
Why from IE9+? New CSS3 selectors and capabilities empower us to style semantic html without mixing the html with the styles. IE is the biggest offender and from IE9 is the least usable version regarding that matters.
That was a brilliant statement that just put everything else in perspective.
I think re-using code is the most important thing there is. It help keeping your projects maintainable and consistent.
CSS is one of the most difficult things to re-use IMO, since (as said before) each app/website needs to have a totally different design, not to mention the different HTML structures.
But I do have a “boilerplate” I usually use, which is very very basic:
http://pastebin.com/EnuWRXNX
Nothing too fancy.
For UI I usually use another CSS file specific to the purpose.
And I also keep stylesheets-per-component, i.e. – if I have a reusable widget, I would extract its CSS into a separate file and reuse it as well.
I am a developer and also a designer,
What I think happened to me is that functionality and programming developer modules are easier to think in an abstract and reusable manner than css…
For me CSS tends to get specific very soon, when I realize it I already have some stuff that only works on that part of the site and won’t be reusable without modifications in other sites….
I guess i had the same problem with developing and programming before I studied computer science and started learning that it’s harder to think in a modularized and abstract way than just throw in some copy and pastes…..but the time you will save at the end is enormous.
The thing is CSS wasn’t easy to re use, modularize, mix-in, etc… Until Now!
Thanks to less and sass I am starting to have more and more reusable abstract classes that solve common problems.
I think the era of reusable CSS code is just starting with the power of pre-processors.
Out of curiosity, do you think that you would have begun to think about reuse after more time, or was it less/sass that held your hand over that steep learning curve?
I already knew I needed to start re-using more my CSS…. But it wasn’t easy or nice to work with before pre processors..
I did try to re use my CSS but having to go to the latest project and copy some big chunk of CSS wasn’t good enough, having some imports with other files was nice…but having to concatenate them at the end when the site was ready for prod or having lots of http requests wasn’t
Now I can just have my reusable mix-ins and styles and import them using sass… And with the help of any of the great auto compile apps out there, have it all in one working CSS file every time I hit save
That site design above? It’s from ThemeForest: http://themeforest.net/item/barbara-html-and-css-template/
I figure that factors into this discussion somehow =).
wow, no disrespect to the author, but how did that get approved? :)
I’ve seen a dozen better templates rejected in the past few months.
“Better” is subjective.
It seems that the links doesn’t work. @rkoma I don’t see anything bad about this template. Not the best but usable.
I usually save css snippets that I use the most in various projects, and reuse it when needed. Other than that I write from scratch. Obviously when you work on a new site you will have different css class names, so it may be more of a hassle to re-use code unless you have a good method for saving the code in a generic manner for re-naming purposes. I do tend to use SASS a ton though, that makes re-using css super handy because you can just extend it onto any new classes you might have in a new project. I just keep a file of commonly used mixins/variables I like and build off of that.
I agree wholeheartedly with Zak.
Plus, I rather enjoy rewriting bits of CSS. It’s a new project so even if I’m repeating myself slightly the whole thing still feels new and different. And it cements things…builds an almost “reactionary” style of coding where it’s like breathing. I don’t have to think about the code…just visualize what I want and my fingers do the CSS’in.
I’ve admitted defeat to spellcheck/autocorrect as far as the war on my writing skills go and I don’t want to do the same with coding.
It seems to only make sense with time-sensitive projects.
I think reusable CSS should be a must on a lot of projects.
I agree that as I lean new tricks I try to add these in to new projects, but that does not mean that will be the only project I use it on. I have a base set of variables and mixins ( I use LESS) that I have for most of my projects. If I need to change colors, fonts, etc, I change those elements but not the naming convention etc.
This allows me to reuse the majority of my previous CSS while still creating custom sites.
Also not just reusable CSS from project to project, but inside projects as well. Useful for when you have the time to actually make a nice style guide for a site and you can target areas that will be able to leverage reusable sections of CSS. Yes CSS is modular like this and meant to be used that way, but many times I’ll see same blocks of CSS repeated throughout a page.
Yes, I reuse my CSS. I worked very hard to create it, to make sure it is future friendly, cross-browser compatible, and that the semantics and structure of the HTML it is styling is well formed, so why ever not? However, I do not blandly copy and paste from someone else’s work (even boilerplates or frameworks) because I feel like you must first examine anything you are using to make sure 1) you understand it, 2) it is relevant and proper for what you are working on, and 3) there isn’t unnecessary bloat. (Also, craftsmen [or craftspeople] build their own tools.)
I work in an agency environment, where we have many projects in the works simultaneously and new ones starting up all the time. We must work efficiently but also with quality (craft). I keep my own boilerplate files (HTML, CSS, JS; much influenced by the HTML5 boilerplate), that I have customized and augmented to work for me and the projects I work on regularly. This is my foundation for each and every project. I work hard to keep this boilerplate as up-to-date as I possibly can (if I figure out something new from a project built upon its foundations, it goes into the boilerplate). This gets me started on new projects quickly. I know what my layout hooks are likely going to be and I already have the foundations of my CSS in place for me to get started (a solid reset, some layout components, and helpers).
Additionally, where I work we create style guides (or style tiles) for every project and, in general, we try to keep some small degree of design consistency between projects to assist with modularity and development speed. I am speaking mostly about standard HTML components (audio, video, lists, simple tables and forms, etc.) rather than layout. In this way, we can customize the look-and-feel (layout) extensively while keeping the semantics the same and saving time for well-used components. Depending on the design, there many be drastic style changes, but I find that even in these situations, I have many opportunities to reuse my CSS, especially when it was written with modularity in mind and general best practices (we’ve all seem many articles of this nature, such as OOCSS and CSS selector intent). After all, wasn’t that the idea behind the Zen Garden?
Since I now work in an environment where all new sites should try to look the same, I’ve re-styled entire sites using only 30 lines of non-library code.
In a previous lifetime, however, usually the split was 40%-60% (old vs. new), but that was before grid systems, etc.
If I may, I’d like to ask everyone what do you “feel” (inexact) your reused code to new code ratio is at the moment?
Other than a reset I start from scratch every time. I’ve only been doing this a year so it helps from a learning point of view but I also want to look at each project as a fresh start with out any constraints, in the hope of creating something new and interesting.
I don’t reuse and don’t advice to anybody to reuse CSS. You can reuse the whole template and layout already written with HTML and CSS and there is no point to reuse only HTML or CSS
Every site I’ve ever done in my entire life has started of the same template file, which I continually update as new techniques come out. It’s similar to HTML5 Boilerplate except it includes a lot more of things I find most the sites I’m tasked with developing have.
I also find, once you get familiar with a certain Designer, you’ll find that they start repeating themselves a lot more and you can adapt the template more to their own design style.
I’ve also got stock drop-down nav files that I try to use when possible.
Here’s my own template file – http://www.nealgrosskopf.com/sites/dev/template/html5.html
I copy and paste small snippets of CSS code but never large modular chunks, although I have tried to in the past – I found that copying large chunks resulted in some unused and/or messy code.
Every other project is different and all clients tend to have a completely separate set of requirements. Apart from a few snippets here and there, reusing CSS is not an option.
I reuse everything using a library built with LESS – so when I need a specific style pattern I just call it in my primary LESS file. It’s a challenge to keep things fresh – our clients are in the cultural realm, so being as efficient as possible is essential – so we’re always evolving (adding and subtracting style patterns).
I have really increased my reusable CSS since I started using SASS. Before I would reuse the same basic concepts but enough of it would change in the next site (padding, colors, backgrounds, etc) that I would end up just rewriting it. But now with SASS I can put the things that change as variables in a mixin. Now I can easily reuse across multiple sites by just changing the variables.
However with the rapid advancement of technology and the language, I do find myself doing new techniques very often and laughing at how poorly I approached a similar problem just one year ago.
I have to disagree with the majority here. I have a main CSS base and HTML base that I use for all of our projects. It includes a lot of the core framework that can be easily tweaked for each design.
Every site is of course unique, but there are so many things like main text styles, main columns, menus, content columns, forms, tables, etc that I have a basic clean format to that allows my team to save tons of time and ensure better browser compatibility. CSS is very reusable and there is no reason not to have a base for your projects.
Yeah I’m with Jesse, we have a code base for WordPress which lets us write a website in a fraction of the time, every time we make a new site we tweak the base: html5 shell for wordpress
I agree as well, we build most of our sites off of WordPress and use our own custom default theme with classes you can use over and over, mostly just for quick little things like floating left/right, widths and clears, even some rounded corners, etc. It’s nothing design intensive, but they’re going to be used on every build no matter what, so it’s worth the time to have them on every site.
Well, to be honest, every time I get to start something, I pick up my previous CSS file(s) and start working on it. Adding and removing things. And obviously changing styles, classes etc for the requirement. Its better than writing from scratch. Basic stuffs.
So, I have no clear cut formula to make css reusable, but at the end of day, most of the work gets done when I start working on top of other css styles.
With my work internally at eBay, I’ve been reusing a lot of code – primarily SASS and a bunch of files I need for each project, such as:
Mixins
Normalize
Font-Awesome
And then depending on the general layout, if I’ve already built the base layout before, I’ll more often than not just copy it over.
But all this code is relatively new code, I don’t delve in to my old code bases very often – instead I tend to just rewrite things utilizing new ideas or implementations. This keeps me on my toes!
I’ll reuse snippets, but I regularly find that as I start a new project, many of the lessons I’ve learnt from the previous project mean that my old CSS seems so, “what the **** was I thinking?!”
I code a lot of sites that are very similar but I find that if I try and reuse major blocks of CSS I spend more time tweaking to get everything just right than I would if I just started over from scratch. Some snippets/blocks of code I reuse but very little in the CSS.
CSS is one of the easiest languages to pick up, and one of the hardest to master. I have tried to adopt SMACSS, OOCSS, and MVCCSS. OOCSS, I have found to be the one approach where I write the least amount off CSS code, and tend to reuse CSS due to its modular approach. However, the downside is that your markup is riddled with CSS classes. But then again, if Facebook has adopted the approach, it must have it’s benefits. Thoughts?
It’s MVCSS and not MVCCSS.
I watched an interview with the CSS specialist who did the Facebook remake. She said that she was able to eliminate a huge amount of code by using the modular method. This is based on that the classes were being added anyway, but each was being coded individually. What she did was to write one style rule set and then attach all the classes it effected to it, getting rid tons of duplicate code.
I’ve found that over the years I’ve grown a recipe book of various CSS rules that act as base classes for various interface patterns that I am able to simply copy and paste into projects.
This started as a way to remember the various CSS ‘hacks’ at first, (think ‘clearfix’ and the like) but over the years, it started becoming more about reuseable nuggets of code.
This can be for pretty much anything; navigation elements, themeable buttons, thumbnail lists, input fields.
I find more often than not, there are repeating patterns that I can hook into early on and give myself a head start in a site.
These are nowhere near ‘finished’ at this point, but they’re a useful library to have and build upon for the various projects I work with.
Think of it as a highly personalised Twitter Bootstrap!
Most of coders use western style layouts (navigation, slider content and sidebar). It seems that most of the websites have been copied. Recently I have read an article that North Korean governmental website use US style of website. The style of websites need to be re-studied.
Coding from scratch is great, when a coder writes code from scratch it gives him lots of knowledge and experience.
Hey chris, u are totaly right, but i think it is very difficult to standardize those css code isn’t it? May it is possible to make standard themes. But those “blank” Themes arlready exist, so just use blank themes and everything is fine?! :-p
I save all my previous projects and usually for new projects I pick the CSS parts I find necessary from the different projects.
I also have created my own “CSS-base”-file. Except this I use SASS with Compass.
As the designers in our team often come up with similar layouts over and over again, I’ve been reusing code for years, since I built some little framework, which is constantly updated and gives me a perfect start for our projects.
Hi everyone,
I´m a little new in all this game and i think that´s right to reuse it but giving it every time a different style that match with your present project.
Everytime that i copy from the web I always try to give my personal touch and i used to start from a scratch.
I don’t have developed much websites, so I must admit I always start from scratch, and never used a framework before. It doesn’t scare me, but I feel like it would take me more time to set it up than to build everything myself.
I recently tried Twitter Bootstrap for a very little project, but it turned out I had not enough content to feel like I needed it, so I built it myself. Anyway I find it quite simple to use, and really sweet in matter of design.
Whatsoever, even if I don’t use frameworks a lot, I surely reuse snippets of code every time.
i don’t reuse too much CSS, beacuse even if layout is similar, many other things changes, and finally the stylesheet is made by a 70% of rules which you don’t need and that are mixed with those you need
so is difficult to separate the two parts. however, you could write a css in which layout rules are separated, but it will make your stylesheet bigger and difficult to maintain.
it’s very simple, we can using properties on an another website, BUT for ppl who think we can using css like back-end coding on varies sites i’ve a question:
Q: Can we using Values of css on varies sites too? that’s why we call it “DESIGN”, we call it front-end coding. DEVELOPERS of CSS are ” DEVELOPERS”, they aren’t copy paster designer or maybe we should call them editor? a front-end designer mean is different than copy pasting only some words and codes in a document, also developing. thx everyone for comments.
Best Regard:
Hamid.
I’m in the beginning of my css learning phase, so i try to write all stuff from scratch so i can learn a lot more do it this way.
It’s good idea to reuse the css. Because it save a lot of time. If we have simple or similar layout than we have use the power of css.
Thanks for the post.
Depends on the markup , usualy I try to reuse as much as possible CSS.
Well yes, I reuse my CSS. Actually I have created framework where I have put basic and advance css like reset, general, default WordPress style(eg: .alignleft, .alignright, .caption e.t.c.), basic form styles, drop-down styles as well most importantly responsive css which I already predefined.
When I use my own framework, it save my lots of important time and headache.
I often reuse some classes from project to project like element resets, hide classes and float classes, but find it nearly impossible to reuse entire sections of css like a main navigation without having to make some tweaks. For one, the uniqueness of the content and design of a project inevitably trickles down to that project’s css. Plus, I am continually striving to improve upon my css by trying out new selectors and techniques. Therefore, if the content and design don’t result in fresh css, my interest in professional growth certainly will.
Do I reuse CSS? Well, it depends on the definition of “reuse”.
What I don’t do: I do not grab an old site and remove and add lines of CSS code. Why I don’t do this? 1) Because there is the danger, that my sites will look very similar (i don’t like this and customers too). 2) There will remain a lot of useless code witch blow up the file size. 3) There will be probably some crazy town selectors (https://css-tricks.com/crazy-town-selectors/) because of the top down working style which result in the need to overwrite specificity.
But what I do: I write code in the left side of my screen and on the right I but old code (own code or snippets from sites like this), and use the old code as a model for the new (I usually don’t cody-paste it because then I think not through enough).
I think that this approach is the best for my purpose.
I think preprocessing will bring about more reuse of CSS via mixins, I already have a file of mixins I import to each new project. As they all take arguments I can tailor everything uniquely, while still using the same code.
I reuse the same CSS for every page within a site. That’s as far as reuse goes.
If I had to develop a similar site, I may copy/paste the CSS from a previous project, but soon after, there is no reuse, just commonality. I’ve never taken the trouble to analyse such commonality and make a template, unfortunately. I suppose the thought has never occurred to me.
Not a bad idea for a project: hot-linkable, reusable generic CSS files – you know, like how you can use jQuery without having to host it yourself. Any reasons you can think of why that project would never work – put them towards your answer for why we never share/reuse CSS files.
The act of writing CSS sure feels like coding, but is a CSS file code? I’m not convinced. If you consider CSS as a collection of structured data that contains the rules and parameters for styling HTML pages, then perhaps that explains why reuse is uncommon in practice. It would be like re-using JSON objects.
There is certainly a place for reusable CSS but when it comes to anything that is essentially designed I want to play with a fresh slate. OO paradigms are helpful in moderation, but the beauty and essence of CSS is that you can target an element and style it however the hell you like.
Like Zak and a few others, I don’t tend to reuse CSS because I think I’m becoming better each time I build a website (and I think there are still issues with the quality of my CSS, so I definitely *need* to be improving each time).
That being said, I am developing a bunch of layout modules that I’m hoping I’ll be able to reuse, because layout is perhaps the easiest thing to reuse. If I do the modules in SASS, then they can be flexible and reusable.
It’s good idea to reuse the css. Because it save a lot of time. If we have simple or similar layout than we have use the power of css.
I almost always build from scratch each time, which means things get built in different ways, and finding new bugs each time I can learn more about how to solve larger bugs and problems. Means each site I build is just part of a larger learning curve. :)
I build every site from scratch with a different layout and design each time, but one thing I started a few months back that I have found invaluable is a personalized code library. I wouldn’t copy an entire page layout in, but I reuse those snippets over and over again and they are personalized to me and only copy/pasted as small bits into a new site when I need them. This is especially useful since 99.9% of my sites are built on WordPress and I’m constantly doing a lot of custom code work, so when I have copy/paste styles to apply to things, it saves so much time.
A couple examples of this would be things like styling ‘read more’ links and horizontally centered navigation links. I also use the Foundation framework from Zurb since it makes laying out a site for mobile sooo much faster and it’s easy to mod to my needs… so that part is reused css every time.
Saved code snippets aside, I think it depends on why you’re reusing the CSS to really show if it’s good or bad. If you’re reusing it because you’ve solve a complex problem and don’t want to re-visit the issue, I think that’s a good thing. But if you’re doing it purely to save time and get something out the door I’m not sure that’s the best way to be building sites/apps. It lends to this agile culture we’re in right now where getting something functional launched is more important than quality and trying something new. Time = money, right? BAH
Don’t get me wrong, I’m not against copy and pasting code (we’ve all used jQuery plugins), but only to a certain point and then you’re not a designer/developer but rather assembling a puzzle. When you’re using classes like “.input-text” instead of input[type=”text”], you’ve probably taken the OOCSS model a little too far.
my2cents
I have never reused my css but I have been thinking about it as I become busier between my day job and my projects on my own.
I have one question though… while working for a company and you are designing code for websites for them… How does having a copy of that work for yourself go?
Using code you made for your employer for yourself.. ? Legal? Ethical? How do you feel about that
I wouldn’t reuse any of the styling properties, only structuring properties and for that they made grid systems :) Great Discussion!
I re-use CSS to avoid the painful act of having to star a blinking cursor on a blank document. As Chris says, content changes, which means HTML does, which means CSS does…but it helps tremendously to have a template to work off of.
That, I think, is probably how it plays out in practice. Not wholesale reusing, but reusing and then tweaking. It’s a nice balance between prefab and custom and it makes the work a lot less daunting, too. :)
My thoughts are this, code reuse is a concept used to avoid rewriting common ‘functionality’ like returning a portion of a string (substr) time and time again throughout different projects. You do this because there is absolutely no difference between the substr method you need for Project A and the one you need for Project B.
But CSS for the most part isn’t used for functionality but for presentation and more often than not, Project A should look nothing like Project B…oh wait,
…about 100 people said roughly this before me.
Carry on =D
I find that I copy less and less CSS as I learn more, although I use TextExpander to set up a base set of CSS each time in a blank file to give me a “framework” of readily used things (comments, reset, etc) so I don’t have to retype those each time.
I use normalize.css and couple of bootstrap elements, nothing more. I think reusing SASS will help for all other projects.
re-use codes means use the same “portrait” for others project. That means in design when you use this you will probably get 2 results:
– less time coding
– less knowledge learn from making new ones
Ppl who reuse their css probably change a little bit, li colors, margin, etc. Doing this you will find yourself spending almost the same time find and testing this little changing than making a new one.
Besides, there is more than one way to result in the same layout. So, if you don´t wanna spend your time figuring it out whats the way that fit in your particular project and aquiring more experience with that, so i may find myself calling you lazy.
An interesting offshoot of this discussion might be, “what are five CSS snippets you like to use?”
I think that CSS is absolutely reusable and should be reused (wisely) whenever it’s possible. Not too long ago, Chris made a posting on UI Patters for Emails. Well, there are can be UI patterns for a lot of major functionality, including logins, etc. And a lot of UI Patterns lead to forming standard widgets, such as an email configuration area or a login area, that can be just “dropped” onto a section of the web site.
Most of these modules or widgets don’t really require that much customization, besides maybe changing the color theme. This is when it’s really powerful to use existing css that’s coupled with an already tested js plugin and the html that goes with it.
Some people also mentioned the idea of using “OOP” CSS. This also demonstrates the benefit of reusing CSS. Imagine redoing huge sections of an existing site. If you were to rewrite the code each time, your end result would be a horrible web site that no one would deem professional/authoritative. But using OOP, you can quickly rebuild huge sections using the same CSS, while maintaining the same look and feel. Also, any code reuse (front end or back end) saves development, testing, deployment and maintenance time – which then saves money.
I think it has a lot to do with the design you make up front. If you made a kick ass search input field before (for another site), you could reuse that old input design to adept it to your new design. This way you can just copy everything and tweak a bit.
I also have a good .css library for all kinds of buttons, BUT I do find myself making it over and over again from scratch, just because I forget I have it or I think I’ll be faster making it from scratch :p
I use much the same reset in multiple stylesheets
It is also convenient reuse style sheets which are designed for projects with a concept and layout.
But I feel freer creating everything from scratch.
^^
I have been trying to get into good CSS reusability. Up until this point I have felt that too much changes between big projects to really even get to reuse much. Between standard changes, browser changes, my knowledge and experience developing, and even just the different site layout principals I haven’t found much other than initialize.css and things of the like to reuse everywhere.
Yes!
I think some get too caught up in what I would consider to be the art as opposed to the design.
“You’ve probably coded up something like that, right?”
Something like that.
He didn’t say: You’ve probably coded up this exact same design with identical color styles every single time with no variation at all.
The key is to not focus on the colors and the section names: Testimonials, Our Team, Our Clients, etc. Of course colors, fonts, borders and images will change. You can always expand your styles.
Minus additional content wrappers:
Our Team: .col-3, .col-3, .col-3.end
Our Clients: .col-4, .col-4, .col-4, .col-4.end
Footer: .col-4, .col-4, .col-4, .col-4.end
See where this is going?
Visible Structure
I would love to reuse my CSS more often but it seems like it grows organically from the site or project I am working on.
I believe that is the fundamental difference between CSS code and backend code. Since it is an object of presentation the gut instinct is to develop it to meet the needs of the design.
That said this sounds like a great opportunity for a service like codepen and would ultimately lead to more solid well tested CSS code.
Sublime text 2 snippets ’nuff said.
Yup. Sublime text snippets!
Also this! ;-)))
Before, I would write my CSS from scratch every time barring the use of normalize.css and a grid. Since I’ve added Sass to my workflow, I’m on the lookout for patterns. If I find that I’m using a certain style on multiple elements across projects, that becomes a candidate for reuse within a mixin.
The same would apply for font stacks. I’ve considered keeping a central ‘_fonts.scss’ partial for those and just calling on the mixins.
Something like:
And then use that for each of my workhorse stacks. I’d imagine Compass already covers similar mixins.
I usually have a lot of generic code blocks saved as snippets in Sublime Text and use simple tags to output them so for a blog entry I would type htmlentry+tab to output the HTML then the CSS I would type cssentry+tab to output the relevant CSS. This works well 99% of the time. I also have my own bootstrap files for components that are used regularly. Work smarter I say.
Man, I’ve been doing this stuff for about ten years now, and I have to admit that I almost never reuse CSS. I’m not sure if this is just:
-a preference and a need for something new (I love a new clean empty stylesheet)
-the possibility to build on what I learned last time (I always feel I have learned a new approach for each project or design. New enough, that the previous cannot simply be modified to fit it)
-or perhaps a personal metal block (Regarding that first point -> I happen to have Adult ADHD, and rerouting the power-couplings in a massive existing CSS doc seriously makes my brain do the wilhelm scream and shut down).
With that said, thanks to Sass + Compass, I do carry over a ton of pre-built CSS snippets and concepts which I reuse heavily. Pre-processor stuff has truly been a helpful advance for me in the reusability department.
Anybody else share my experience?
Note: at the top, by “reuse CSS” I mean an entire stylesheet. I always start out with a new empty file.
@Andrew: You should consider structure and skin as separate SASS (or CSS) files. Are you using any OOCSS principles?
I used to hand-code all of my CSS, but these days I’m on board with using libraries as much as possible. It’s code that’s been tested by many and allows me to work much more efficiently. My goal is to keep my custom CSS as small as possible.
Bootstrap/Compass/SASS are my drugs of choice right now.
I get paid to create quality websites, not lines of code.
I reuse a lot of my code. And by that I mean that I write my code from scratch so most of it can be used modularly across the page instead of repeating code needlessly.
Oh. Were we talking about using code from one site into other? Then no, I don’t.
Compass and Bourbon are both classic examples of CSS reuse. So is Zurb’s Foundation and Twitter Bootstrap. The CSS grid frameworks such as 960gs and ‘320 and up’ are also examples of code reuse as is normalize.css, the various resets, and so on. So I genuinely don’t quite grok what you’re getting at when you say “Theoretically I would think CSS would be some of the most reusable code we have available, but that doesn’t seem to be true in practice.” It absolutely does seem to be true in practice, no? I’m guessing I have probably misunderstood your point somewhere. :-)
html is perfectly reusable, I’ve been doing it for years. 80% of every new site is just out-of-the-box components.
For css, if you want to reuse it you have to split it in layout css and pure graphical css. Colors, rounded corners, dropshadows … stuff like that you cannot reuse. But layouting elements in columns if perfectly feasible. So the 4-col footer code could be reused perfectly across different sites.
Of course you can “reuse” smaller snippets (like .clearfix, .hidden, or .corners(9px); in less, but only as a shortcut, not as immediate rendering css.
For me the main reason I don’t re-use my CSS is because I’m simply not comfortable blindly copying code and then alter it (hoping I don’t miss anything) and I miss the ‘structure’.
What I mean is that 90% of my projects are at least slightly different from all the others (some basics are the same, like .wrapper classes, and I keep those in my altered boilerplate template from the start) and it’s usually faster writing it from scratch, than copying it, altering it, getting some unexpected results, diving back in (rinse/repeat)…
I do think frameworks and even pre-processors can help minimize the amount of work that you need to do ‘from scratch’, but front-end code is so much more variable than back-end code that it (for me) never really pays off to ‘standardize’ it.
Also, if you have a fairly large template with ‘reusable’ code, you have the chance of ending up with code you never really use in a particular project.
Bottom-line: I like to methodically build my CSS, from ‘scratch’ (boilerplate is already a really good start) to keep a sense of structure.
I totally sympathize with the fact that we have all recreated that website over and over and…
I build WordPress sites almost every day now. Recently, I’ve been using my own forked version of Bones, which out of the box has a bunch of nice functionality, including a Twitter-bootstrappy grid, a set of mixins, and quite a few other niceties in LESS. I’d say I’m reusing more CSS now than I ever have. Disclaimer – Bones is in constant development and doesn’t work for everyone; take a look and see what you can and can’t use.
It’s not so much about reusing CSS as it is developing a systematic approach to building websites that you stick to.
For a practical way of doing this, start with a boilerplate. (I’m sure we’ve beaten a dead horse about boilerplates around here.) If you’re using H5BP, good for you. It’s not the only one out there, but it’s solid and a lot of really smart people made it happen.
The next logical step is to pick up and keep a grid system. 960gs of course was a pioneer, but now there are fluid grids, adaptive grids, etc. 1140 is the new 960, supposedly.
Really, in the end, it’s about putting together a set of code so that when you need a three column paragraph that is the first grid element and has a 60% transparent black background and white text, you can do something to the effect of:
<p class="white-text threecol first black-60">
And if you find yourself making that same thing over and over, then you can create a single class for it.
<p class="widget-paragraph">
Nicole Sullivan’s OOCSS methods have changed the way I write CSS. As a team, we’ve now evolved to something like this as our daily process for writing CSS.
1. Build re-usable objects for a centralized (visual) library.
2. Find similarities and differences between existing objects as new ones are created and brought into the library. Consider that something may not be new, but rather a fresh or needed extension of something that’s very similar in form and function.
3. As you do 1 and 2, collaborative discussion is key. Build something every designer wants to use.
4. Abstract the personality of your site into a theme. Apply theming concepts from OOCSS to an entire site and/or an object itself. Talk through theme ideas as well — you don’t want to jump immediately into the development process. Someone else on your team has great ideas too. This will make them a stronger front-end developer as well.
5. Documentation is key. If no one knows what the library offers, you’ve built nothing. We’ve taken the time to build an internal pattern library for designers and front-end developers. We’re adjusting and revising this constantly.
Why would CSS be some of the most reusable code out there?
This is not a programming language, it’s not code in the real sense of the word which leads to reusability.
It’s a configuration “language” (and I’d use that word very lightly here) defining the style of markup.
I’ve never seen coders discuss reusability of .ini or .config files of their actual programs. I mean, sure, you can use the same names for stuff, but that isn’t even decided on CSS level.
Now things like SASS/LESS/whatever else do change this dynamic a bit, you can define mixins which can and should be very reusable.
I have a host of CSS snippets that I pick and choose from for use on many sites (and I’m constantly adding to that list). But I find CSS to be the least efficient code to reuse. The reason is that functionality tends to be largely the same from site to site (and intentionally so for usability-sake), but design varies drastically. In the environment in which I work, a grid-based site is exceedingly rare – and for good reason. Design tends to sell moreso than functionality, and custom CSS is the only way to truly maintain that niche.
I find that the more I learn about using OOCSS principles, the more reusable my code is becoming. While I still use a blank slate most of the time (save some boilerplates and resets), my markup and styling patterns are usually really similar from site to site. Sometimes I’ll go back and steal chunks of CSS that I’ve coded before, as well, but I couldn’t see myself taking a CSS file from another site and using it. I’d spend more time sifting through and editing than it would take me to code from scratch.
Hi, some years ago I start each project from the scratch, but it cost me a lot of time, and a lot of bugs.
Now I always rely on a CSS/JS Framework. In my case i use the one I created based on several popular frameworks: paraGRIDma
This framework is very light, and it cover more and less all my basic requirements. I use it to make the structure of the pages, and then I create a new CSS file to overwrite CSS with specific design requirement of the current project. I have to improve it, and make a good documentation, but the lack of time is always a problem
I found it very usefull. Change from one project to another one is very easy , I don’t have to remember how did you code that project.
Also, I think that if you use always the same html+css structures it is much more difficult to find new bug , and if you find one you can overwrite the framework code, and it will be fixed in every project.
from scratch baby!!
I think its tricky to reuse whole sites and then mod them.. As your coding may have improved or you may have learned new techniques since you coded up the last site. But I do think having a little library of commonly used snippets its really handy.. Especially for tricky bits of CSS that seem to take up lots of time like style navigations, pagination and forms..
For this I use a little peace of genius called Pears, developed by the simplebits lot i think.. Its pears up commonly used html with css.. So you can copy and paste bit from your own library into the site you re building..
Saves me loads of time..
Joe
Yes, I re-use CSS. The benefit is that, when I learn either new tricks or things I’ve been doing incorrectly, I may give other sites the benefits of those snippets. The risk, of course, is that in applying maintenance to that snippet in one website, I may feel that I should apply similar maintenance to the site with which I’ve shared the snippet.
Yes, I like to reuse and to check other sites css, because that teach me a lot about new techniques. In my particular case I always keep my new tricks with neat comments that can help others to learn as well.
It really depends on the looks of the website. If it’s a very standard looking website I tend to re-use a lot of already written CSS. If it’s a website that’s totally looking different than anything else I’ve done before I’ll have to rewrite most of the stuff.
Though some certain elements, like a reset.css or a base.css, I have as a basis on every website I make.
Sometimes I’d just rewrite a whole CSS from scratch to start with a clean canvas to built from there again. Sort of like reinventing the wheel, a wheel that never needs pushing to roll.
I don’t reuse CSS, it’s too time consuming going to through an already finished CSS file and figuring out what exactly to reuse.
There’s always something you did from your last CSS coding that you know you can improve on, so that right there defeats the CSS reuse concept.
What I DO reuse is my CSS comments structure, for example:
1st level sections look like this:
2nd level sections like this (indented from the 1st level):
3rd level (indented from the 2nd level):
I use this:
LESSCSS (variables, functions and nested CSS)
Semantic Grid System (Responsive semantic grid system built on LESSCSS)
Twitter Bootstrap (Good especially for backend building)
What else should we be using, do YOU think?
Is there any great naming convension for CSS for example?
I think there is where CSS grid systems and boilerplate’s come into play.
When I see the given layout, the first thing that comes to mind is – the number of ‘columns’ associated with each ‘section’. Basic styles for elements are provided by a boilerplate anyway. What remains is CSS specific to a project.
I recently started thinking about not reinventing the wheel each time I work on a new project. By that I started thinking about what important things I add, which might be reused in other designs. I also checked most of my bigger layouts I have been working on and checked what things are equally developed, like you would do when working as a back-end developer (doing it like my prof once said in his lectures – try to figure out what modules you once used and copy-paste them, let’s see what happens. They might not be working right away, but with some adjustments, they will! Always depending on what the work is all about).
With SASS/Less it is totally possible to reuse CSS, since you can create mixins and stuff like that. But even other stuff is reusable! If it worked earlier on a project, why not save some time and copy-paste it and see what happens.
Sure you could call that lazy, but you have not been lazy, since you reuse code (css is code in my opinion) and you wrote it once!
When using WordPress you could call yourself lazy as well, since you didn’t start from scratch. I am not as much experienced as other people are here, but I definitely think about reusing CSS and I am doing it. Sure some layout tells you to use a red border and the next a black border or no border at all, but why not just change the line!? In PHP it’s not different! A class might not have all the data you need, but what do you do?! You adjust your code. (time saving) And time management is one of the most important points in a developing process!
Recently I started creating my own boilerplates and after finishing the layout and everything I delete the stuff I do not need for loading times and so on.
My point of view is, that CSS is reusable, it just depends on how you work, everybody has his style and it should be this way, but seriously you would waste so much of your time if you would start writing a login form from scratch each time.
When designing for a responsive website I always start from a framework (I prefer the Skeleton framework). Everything is so organised and you can slot your reused CSS snippets into the right places. Saves reinventing the wheel!
OFFTOPIC–
Have not heard about Skeleton before, I just went to check it out and it seems quite promising.
Zero LESS – SASS+COMPASS crap, 960gs based, HTML5 Boilerplate based as well, no JavaScripts to deal with which means you can implement your own framework and methodology and CSS code incredibly easy to read/adapt.
Thanks for mentioning.
FYI, http://www.getskeleton.com/
I have tried a few different frameworks before, but I keep going back to writing my own code every time.
I have a bit of CSS that I throw at the top of all my sites that includes resets, fixes and a ton of universal and common selectors that I use in almost every project.
As for the bulk of the css for my sites.. .they start to look alike, since I use a lot of the same naming conventions from site-to-site, but since no two sites are (should) be the same, I can’t reuse exactly the same html and css.
the only time i resuse css classes is when i use frameworks. each design is really different but when i start to code, along the way i really find some classes are already reused, although they have different styles.
Reusing CSS sounds like a great idea but in practice it doesn’t seem that great. Unless you are doing something quite complicated the time it takes to go find the old code and edit it is almost equivalent to the amount of time it would take to recode it. Although something that might speed this up is codepen.io which could be a cool way to store and reuse old code.
The Above template get approved because of the sexy girl’s image.
This is a age of Show Off :)
Agree ?
hello everyone.. :),
i couldnt understand what about this post is for..? can plz anyone would tell me.? thnx in advance. hope to listen frm u soon. :)
–Ravi.
When I started out 10 years ago I reused nothing, now I reuse not only whole stylesheets but names and techniques as well, it’s a sign of maturity I believe. If you reuse, it means you’ve done a good job naming and organizing your CSS. Mind you I’m not even the designer, I let someone else design, and I create the CSS with pretty much the same set every time.
I’ve got certain patterns I frequently make use of and I feel it simply wouldn’t be efficient to recode them everytime I need them. That why I use CSS pattern libary: Pears by SimpleBits is pretty nice: http://pea.rs/. You can either use it to setup a public library or your own private online library. You can even integrate it into your development environment using XAMPP.
Patterns are a huge time saver. And it’s not that you can’t develop code in your library or pattern collection. If you encounter a problem or if you improve your code during the development of a project you can always change the patterns to fit your needs or – even better – to adapt to all possbile circumstances. Usin patterns even gives you more time to concentrate on improvements, because you don’t have to reinvent the wheel everytime you need, for example, a navigation bar.
We tend to build each site from scratch (because I believe this makes us better as we try new things), but typically reuse css styles for items like grid lists, drop down menus, form layouts, input fields and error messages. Being smart about the way we code and writing css for reuse only makes us more efficient and better developers. Great topic!
I’ve always reused some bits of CSS in projects, but it was hard to do a whole layout for many of the reasons listed above.
Preprocessors are changing everything. In general, I used to write “reactionary” CSS, mostly coupled to the HTML but trying to squeeze in some reusable modules here and there. Preprocesors now allow us, even encourage us, to refactor and abstract. We are now applying basic principles of programmatic or back-end code.
The focus has now shifted to decoupling from HTML and to making things as reusable as possible within our projects. The natural progression is to then duplicate them in other projects. The best part is that now with variables we can have our cake and eat it too. We can write things that could set the basic template above. Also, we can make it flexible enough to have a couple widths change on other projects with only a value change instead of a rewrite.
I may use bits and pieces of CSS from previous sites, but overall I start from scratch. There’s something about starting a new site with a blank CSS (or HTML) page that motivates me to do better than before.
Reusing CSS for things common site features like general site structure, navbars, and footers seems logical, but after that most sites seem to require custom CSS solutions.
That said, as a design instructor, I’m concerned that designers (right-brainers who don’t understand stuff like jQuery, SASS, and COMPASS) might not be able to keep up with all the left-brained technological developments. If coding keeps getting more complex with responsive layouts and functionality being more important than the look of the content being presented, we might have a problem. We’ve all seen sites built by developers that look terrible and sites by designers that look great but just sit there. So what’s the solution? Should designers who can’t wrap their heads around complex coding issues just get out of the game?
Personally, I’m happy for the big shake up happening in Web design these days. It’s exciting to see new solutions for old problems and new ideas being implemented creatively by developers and designers. Hopefully modular CSS will come more into play as things shift further toward responsive web/mobile first modular/reusable.
I’ve used few frameworks, LESS collections and Grid Systems.
At the moment I’m developing my own tools. A framework for WordPress, a responsive grid system in LESS and a collection of flexible mixins in LESS which, project after project, I try to improve. The goal is to release everything as Open Source, and so far I’ve put online LESStools.org – it’s a beginning, hopefully it will get more complete with time.
So, yes. I reuse most of my codes and framework. The design can change dramatically but I don’t see why one should reinvent the wheel again and again. Unless the purpose is to redefine the whole process, or relevant part of it.
I think the most reusable CSS is that of the many frameworks we have like Bootstrap and the dozens of grid systems available. Or in a system/network of websites under the same company (like Envato), where many of the same elements will be reused with slight modification.
Otherwise, I think it with the little extra time and effort involved in fine-tuning hand-coded CSS for each particular website adds that extra touch of artisan love that we designers do best, and our customers will appreciate.
I do build sites like that a lot and have spent time in the last few years building CSS that is re-usable. This largely comes down to using smart classes, that can be used on other projects. Even HTML to a certain extent can be re-used or at least refered to to influence how you build a project.
The other side of re-usability for me is being able to leverage CSS3 features that replace the need to produce images for subtle effects. Nowadays I have less small images for drop shadows, corners etc, and that means I can rely on just using the CSS to achieve my goals.
“Smart Classes”…that is the key.
I see a lot of reusable CSS Framework. It would be great to my own reusable CSS.
I reuse my code all the time, not sure what the issue is with reusing code? I come from a generation that believes “if it isn’t broke, then don’t try to fix it”… and that’s not to say “halt progressiveness or creativeness” as much as it comes down to saving time and not reinventing the wheel with each mockup.
If you need a framework that is 960 pixels wide and you have a robust framework already coded out, then imo it makes no sense at all to not reuse your code… you’re really just wasting time that could be used for creativeness/progressiveness.
Also, forgive me if I’m incorrect, but I thought one of the major advantages to using “CSS” was the ability to reuse your code and simple restyle/theme elements… this isn’t the sole purpose of CSS, but it is most certainly one of the major advantages. Especially when you’re talking about a facelift and not a redesign.
It’s really a subjective discussion. If you feel reusing your code takes away from your creativity then you need to do what makes you feel good. If you’re like me, I’ve themed so many sites over the years that predefined classes, etc… don’t really effect me in negative ways. To each their own. :)
submit
I find myself often collecting CSS code I use often into a nice organised note section. If its something I constantly use and have realised {example: css reset} I use snippets.
I’m using a css-sourcemerge build in php
with this i can use same code basics (like reset, framework etc.)
as separate files and for the current project same other css-files like fontface and layout.
on this way, its very easy to reuse working css-styles and on other site its very easy too save time
Interesting discussion that is for sure. Re-using of code is something that I do from time to time. Aside from CSS Reset I have re-used the basic framework, setting up the containers and such then all I have to do is adjust some px’s here and there and voila.
I used to divide css into following sections.
Normalize
Grid
Modules
Helper classes
Third party styles*
Normalize, Grid, Helper classes – will be carried into all projects.
Helper class-> Common reusable class [alignleft, alignright, clearfix, fleft, fright etc..]
Third party styles contains styles form other plugin developers. Eg:- Carousel, date picker etc..
(combine only after considering -> http request, size, performance, site wide module occurrence etc..)
Modules contain css that is specific to that particular site.
In my experience you can’t reuse all the styles but semi-reusable codes can be used to save time and bring consistency across project.
Almost all project has – search, breadcrumb, contact, newsletters, pagination, listing etc.. Identifying these recurring modules will help to create raw css blocks like.
/*Search*/
.search form{}
.search input{}
…
/*Breadcrumb*/
.breadcrumb a{}
.breadcrumb span{}
…
etc..
Creating these bare code block as snippets will save time & brings consistency across all projects.
about the css reusability ,I got a method called : attribute-oriented from http://zhangxinxu.com
he wrote a css lib. ：http://www.zhangxinxu.com/study/css/zxx.lib.css
he work for http://www.xiaomishu.com .
I think it’s very cool.
my english is not well,maybe my english is lost you .
if you want to set a “p” tag to 14px ,you can did this:
CSS:
HTML:
What does
attribute-orienteddo? What is it used for?I have a generic css file and I copy-paste it every time I start project.
For the longest time I refused to use frameworks and would always write css from scratch, mostly because I didn’t want to take the time to learn them, I had my own set ways of doing things.
Recently that has changed and I’m convinced that css reuse is the only way to go. I can accomplish 90% of the design requirements needed by reusing / customizing frameworks like bootstrap. If I have custom needs that can’t be accomplished using a framework like bootstrap then its pretty easy to write a little ‘project specific css’.
The nice thing about reusing css is you become very familiar with it and structuring becomes second nature, you eliminate the entire process of creating a general structure, which is a huge time saver.
Finally, if you can start building a library of things you know you’ll use over and over and then compile the site specific styles with less or sass, you’ll avoid unused styles and having to recreate elements every time you build a new site. In time, you’ll have an arsenal of cool css snippets at your disposal. It becomes an invaluable toolbox if done right and it’s crazy not to reuse at least some, if not most of your work.