Best practice of css

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. for detail visit: http://www.flexiblewebbook.com/downloads/FlexibleWebDesign_sample_ch1.pdf
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.
27. images – containing all your images.
    styles – containing your style sheets
    pages – containing all your html pages
    template – containing any templates
    documents – containing any documents other than html pages such as Adobe Acrobat files, Word Files etc.
28. Site define: Create and configure a site in Dreamweaver. If you do not think about your site structure before designing, you most likely will have a big mess of files and folders that will become cumbersome to manage.
    Benefit: Your links can be tracked and maintained easily.Steps:
29. http://www.pserie.psu.edu/compcntr/guides/ConfigureDreamWeaver.pdf
30. http://www.adobe.com/designcenter/tutorials/drw8at_configure/
    Open Dreamweaver. Choose Site > New Site. The Site Definition dialog box appears.
    Local Root Folder – This is where all the files for the site are stored, the one which you created earlier. Browse for this folder and click on select.
    Enter a name for your site.
    Type in the location of this folder, or use the browse button to locate
    If this is checked, it can speed up your site management operations. You should have this checked.
    Define your Remote Site
31. Select Remote Info from the Category list in the Site Definition dialog.
    Select FTP in the Access menu. enter all required fields
32. Your Domain:
    Your Username:
    Your Password:
    Your site’s IP address:
33. Grab font sizes, font families and basic colors from the PSD and set up up CSS defaults for these including your favorite snippet.
    Measure the layout width so that we can create a #container block for the content as the page needs to be centred so all content can be within the container. For standard 1024px monitor target we use 1002px max width. If you layout more than this width then clear your client for the same.
    In the index.html file let’s type our basic layout with the main divs with proper comments.
34. Use Proper Image Formats and Optimize GIF, JPG, PNG files
    If you use the wrong image format, your images will be distorted and unclear, and will also slow down the speed of loading a website. When choosing an image format, we basically have three popular formats to choose from: JPEG, GIF and PNG. Each format has its own strength and weaknesses:
35. JPEG (JPEGsare the default choice for the web. JPEG can display millions of colors and because it has the smallest file size of all, it is the best choice for detailed images and photographs )
    Excellent for rich coloured images
    Decent file size compression to quality ratio
    Doesn’t support animation
    Doesn’t support transparency or alpha-blending
    GIF (GIFsare similar to PNGs. Using this format your limited to 256 colours, GIF is a lossless format, which means that no image quality is lost when the image is compressed. GIFs can be made transparent and can be animated as well.
    Small file size
    Supports transparent regions
    Supports animation
    Limited colours (supports up to 256 colours maximum)
    Doesn’t support partial transparency or alpha-blending; making transparent regions look chipped and unsmooth
    PNG (PNGs are my preferred choice when it comes to background images and logos; especially when full or partial transparency is involved)
    Can be in true or indexed colour format
    Supports true transparency and alpha-blending
    Cannot be animated
    File size can be big
    Cross-browser support is an iffy deal (especially when it comes to Internet Explorer)
36. PNG-8 and PNG-24 – 8-bit PNGs mean that the image is 8 bits per pixel, while 24-bit PNGs mean 24 bits per pixel. PNG-24 can handle a lot more color and is good for complex images with lots of color such as photographs (just like JPEG), while PNG-8 is more optimized for things with simple colors, such as logos and user interface elements like icons and buttons. PNG-24 natively supports alpha transparency, which is good for transparent backgrounds.
    For details: http://sixrevisions.com/web_design/web-designers-guide-to-png-image-format/.
    There are other formats too – such as TIF,TGA, ICO, and others but none of these are useful on the Web since they are not viewable in Web browsers.
    You can read more about these image formats on Wikipedia:
    Start at the top and work down.
    Working logically helps you break the job down into sections so that you can work on one thing at a time and plan the work accordingly.
    Naming convention.
    I like to use logical names for the sections and although there is some debate about what to use for each element it does help if your naming convention allows for the fact that maybe your html will be arranged at a later date and that your element names still make sense. If for instance your left column is called #leftcol and the at a later date you switch it using CSS to be the right column then it could be very confusing. It’s better to use a more generic but functional name such as #sidebar1 for the left column and #sidebar2 for the right column.
    Remember that IDs must be unique and can’t be used more than once per page.
    CSS Reset and CSS Framework.
    Declare the Correct DocType.
    The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup.
    Don’t use inline styles.
    Inline styles cause more maintenance headaches. Inline CSS should not be allowed in strict doctypes.
    Add all CSS Files Within the Head Tag.
    Putting stylesheets in the HEAD allows the page to render progressively.
    Place Scripts at the Bottom of Your Page.
    Set up some reasonable defaults for text, link colors and font styles heading, img border, clear property.
    Ensure All Tags are Closed.
    Tag Names Lowercase.
    Compress Your CSS and order the properties.
    Minify JavaScript and CSS.
    Don’t forget the “alt” tags.
    Save HTTP Requests by Combining Images.
    CSS Sprites are the preferred method for reducing the number of image requests.
    Group External CSS Files.
    Group Selectors.
    Use Shorter Class and ID Names.
    Utilizing long class names can add additional bytes to a site, and slow it down in the process.

• Long names are great for allowing designers to understand them more clearly, but using shorter class and ID names can be more beneficial in the long run.
  CSS Comments Should Be Removed.
  create grouped css blocks and define each group in top in a comments.
  Abbreviate Hexadecimal Colors ( color:#fff;).
  Providing Fallback Fonts.
  Redundant Units For Zero Values (padding:0 0 5px 0;).
  Avoid Mountain of Div Tags.
  Use Modular IE Fixes.
  Using Global Styles.
  Encoding Special Characters.
  Don’t use improperly nesting tags.
  Define accesskey when appropriate.
  Using a stylesheet for print allows you to hide elements you don’t want printed.
  Don’t use quotation marks around paths/URLs when setting a background image.
  Declare relative font sizes instead of absolute.
  Avoid !important.
  Clear floated containers.
  Avoid Extra Selectors.
  Use shortcuts while slicing it will save your time.
  Photoshop shortcut:
  http://morris-photographics.com/photoshop/shortcuts/downloads/PSCS3_Keyboard_Shortcuts_PC.pdf.
  If you do not use the web font for your design, please:
  Substitute images for the fonts.
  Utilize them by using the Cufon technique.
  Utilize them by using the sIFR technique.
  Utilize them by using the @font-face technique.
  Test with different browsers.
  Validate Your Code.