css best practice

-
  1. Avoid using inline styles in page.
  2. Declare your most generic items first, then the not-so-generic and so on.
  3. Organize the Stylesheet with a Top-down Structure
  4. If you don’t have to reference specific object, it is strongly recommended to use class instead of id selectors
  5. Use Useful Naming Conventions: Use lowercase characters to define your class. Use always presentational naming example. When assigning a class or id, ask yourself “What is this element for? Avoid using names that rely on location
  6. CSS Shorthand makes development much easier and keeps your CSS clean, short & accessible.
  7. Use Multiple Classes
  8. Avoid Extra Selectors
  9. Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements
  10. If layout is not so complex in order to justify multiple files then it is better to have one large css file rather than multiple small files because that way you reduce http requests.
  11. Giving precise and clear class names to your elements is a key. This will seriously avoid confusion & let you understand your CSS better and faster.
  12. Combining all background images into one single image and displaying them using background positions is all we call CSS Sprites. CSS Sprites reduces the number of HTTP requests, saves bandwidth and loads faster.
  13. Global Reset ensures almost an identical presentation of a site across all the browsers. There are many different resets from simple to complex ones.
  14. CSS frameworks good for rapidly speed up our development time and creating clean grid structure. Some popular frameworks are:
  15. 960 CSS Framework, Blueprint CSS Framework, YAML, Yahoo YUI Grids CSS etc.
  16. Using a CSS Frameworks is not always recommended but a CSS Reset is all you need.
  17. Always use em instead of pt, px, cm
  18. Optimize your css with CSS Compressors
  19. Its always important to validate your CSS when you build it. This is to make sure that your CSS is error free and is interpreted in the right way in all the browsers. The W3C Validator has been a very popular online tool that validates CSS.
    -------------------------
  20. We should take a closer look at the elements and identify possible problem areas.
    At this early stage you may need to make important design decisions so you must have a clear idea of how the design can be achieved from the very start. If you identify areas that are impossible to create on a living web page or would cause to many browser issues then its best to locate them now and notify the client before you begin.
  21. Webpage Layout
    After analyze your mockup Make webpage structure layout , Group content together, wrap each group with an rectangle, name each rectangle, comment each layer with comment.
  22. PSD Group layers
    Unnamed layers (Layer 1, Layer 1 copy, etc.) can be confusing and time consuming. Items that are logically connected should be grouped together. If your psd template is not proper group ask designer for grouping or just link each layers with groups.
  23. Fixed, Fluid layout
    The first question that needs to be asked is whether this is a fixed or liquid layout where each column can stretch.
    We can group web-page layouts into three categories based on how their
    width is set: ? xed-width, liquid (or ? uid), and elastic.
  24. Browser support and accessibility
    Confirm about target browser and audience before slicing your page. If client not targeting ie6 browser then you can free to use png image without any trick.However, if your target audience is broader or less computer savvy, then make sure to program for IE6. If website user also using ipad/iphone then use viewport for iPad sites.
  25. Web safe fonts?
    If in layout used fonts are not web safe font then clear client about the performance and browser related issue. Install font in your matchine before slicing your template.
  26. File and Folder Structure:
    Let’s create a proper folderand/file structure in root folder. When I set up a site for the first time my first job is to design how the pages are going to look then I usually construct the front page. This page should always be called index.htm or index.html. If your site is a small site, with only 5-10 pages, you may want to just have your web pages within your root folder without any subdirectories, but if your site is larger, and especially if you expect it to grow over time, you might want to consider having each page in it’s own directory.

Comments

Post a Comment