Friday, May 02, 2008
Design Guidelines with Style
I'm not going to go into detail about the benefits of using CSS, which have been covered so many times before. In short, it provides a convenient way to separate presentation logic from actual web markup, it reduces duplication of style-related code, and best of all it's incredibly flexible! Ah, but that flexibility is a bit of a double-edged sword: allowing many ways to do the same thing means similar things will likely be done differently in different places, gradually leading to a mess of files which is a nightmare to maintain.
If you don't believe me, install a tool like FireBug and pull up a favourite large-scale web site. Set a small goal for yourself, like changing the colour of an entire page's background, or changing the bottom margin of all headings across all pages, something that should ideally only be a few lines to fix. Is it really as easy as it sounds? The answer is likely no, and there are many factors that can contribute to this:
The trick is to set up (and subsequently follow!) some design guidelines to make sure everyone starts, and most importantly stays, on the same page. This is best done at the beginning of a project, but it's never too late to start doing something right. For example, here are some things you may want to set guidelines for:
If you don't believe me, install a tool like FireBug and pull up a favourite large-scale web site. Set a small goal for yourself, like changing the colour of an entire page's background, or changing the bottom margin of all headings across all pages, something that should ideally only be a few lines to fix. Is it really as easy as it sounds? The answer is likely no, and there are many factors that can contribute to this:
- Multiple developers working on separate areas of the site, each using their own set of rules for how their CSS should be written.
- Years of modifications by different (or even the same!) developers are done with little consistency across the site.
- The original developers saw CSS as an afterthought; something you work on after the site "works" that can be done in any number of ad-hoc ways.
- The CSS was generated using a WYSIWYG-style editor (such tools are notoriosly bad for producing maintainable code).
- The original CSS is out of touch. The web changes quickly, and even sites that are only a few years old may be using syntax that has been updated or replaced.
The trick is to set up (and subsequently follow!) some design guidelines to make sure everyone starts, and most importantly stays, on the same page. This is best done at the beginning of a project, but it's never too late to start doing something right. For example, here are some things you may want to set guidelines for:
- How specific should selectors be? Is it all right to define a general rule for all instances of <div>, or should each <div> require a class? Should selectors be classes-only, or are ids allowed as well?
- Should traversing the DOM, as in "div.classA span.classB a" be allowed? encouraged? mandatory whenever possible?
- What sort of things are forbidden? This is important to consider for things like wildcards (*), inline-styles and <style> tags, etc.
- How should CSS be broken into multiple files? Does each section of the site get its own file (login.css, register.css, menu.css...) or are files broken up by functionality (layout.css, form.css, graphics.css...)?
- What level of CSS quality are you looking for? Does all CSS have to validate? What about browser-specific rules that are likely non-standard? (IE's conditional comments can work wonders here)
Labels: CSS, web development
Comments:
<< Home
It will be useful for high school students to check https://eduessayhelper.org/blog/graduation-speech out. Here you can find advices on writing your graduation speech.
Thank you for the information, i found the information very useful. If anyone looking for Web Designing training in Bangalore i suggest Apponix Technologies, they provide best Web Designing training. For more information visit : https://www.apponix.com/web/index.html
I am glad to see this brilliant post. all the details are very helpful and good for us, keep up to good work.I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.
UI UX design classes in Pune
UI UX design classes in Pune
This is likewise a decent post which I truly appreciated perusing. It isn't each day that I have the likelihood to see something like this..
Full Stack Developer Course with Placement
Full Stack Developer Course with Placement
Trade has provided a plethora of opportunities for growth, including proof of funds providers for businesses.
Guilin HBM Health is a US Based healthcare brand that aspires to become one of the best protective mask supplier.
Thanks for sharing such a useful and informative content, your post is awesome that will be understanding.
Thanks for sharing such an awesome article it was really wonderful experienced reading this. For more such articles you can visit our site - UI/UX Design Classes in Pune
Post a Comment
<< Home