When working on the visual elements of your design, where do you put the CSS?
Should you have one global stylesheet that contains all CSS for your entire project? (Some people do this.)
Should you have a couple stylesheets that are generally always included that cover everything?
Should you just write all of your CSS inline, right in the DIV and P tags?
Should your CSS be written on a page-by-page basis and be included in style tags on the page?
Answer: Some mixture of all of the above.
Your global stylesheet should be used only to define the basic look and feel of your entire system. It should not contain anything that will be used only once. Everything in that global sheet should be used repeatedly and excessively throughout your system.
Your individualized stylesheets should be used for sub-systems that share a variety of page displays and have a unique set of attributes or visual design that build upon or enhance the global stylesheet.
Individual CSS attributes can be applied to DIV, P, SPAN, and other tags for individually unique items. Likewise, you should use the style tag and include CSS information within that style tag on a per-page basis if that page shares the same CSS on multiple copies of items within the page.
DO NOT build your system with just one global stylesheet and dump everything into it. It’s a disaster waiting to happen. Plus, every time you make any change, your clients need to do a force-refresh to get the new stylesheet. “Where’s the new style?” “Press force-refresh to get it.” “How are users supposed to know they need to do that?” “Uhm…”
DO NOT write the same style into a style tag on everything. If you find yourself copy-pasting a ton of code, something’s wrong.
Use dynamically-generated CSS when and where applicable to suit your application’s needs. Sometimes you have to write your CSS on individual object items because that’s the only way to make them do exactly what you need them to do. That’s OK.
Michael Berding August 28th, 2013
Posted In: Basics