Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Introduction to Cascading Style Sheets : Page 4

Browsers often have a difficult time reading a style definition for one reason or another. Adding a position (and sometimes a width) value to every appropriate CSS definition can jumpstart the browser into recognizing your styles correctly.


advertisement
Working in Visual Studio .NET 2003
Visual Studio .NET is a great development tool for coding in your favorite .NET language. However, the HTML and CSS support is not exactly the best. Here is a short list of drawbacks in relying on the Visual Studio .NET designer for CSS support.
  • Limited Design Time Support. Design time support for CSS in the design pane of an ASPX page is only applied to the page once, when a style sheet is dragged onto the page as you open the document. Any subsequent changes to the style sheet are not reflected in real-time back to the design window. You may see the changes if you choose View and then Refresh in Visual Studio .NET.
  • Invalid Markup. If you apply a style to a Web control from the Style drop-down menu, Visual Studio .NET applies a class attribute to the control. This does not wire-up correctly when the control is rendered to the browser, as the appropriate attribute for the server control is cssclass.
The news is not all bad! Visual Studio's style editor is available to you within the editor window of .CSS files and is quite impressive. The dialog box (see Figure 8), available through the Build Style button in the style sheet toolbar, is rich in settings and visual aids.

 
Figure 8. Style Builder Dialog: The Style Builder dialog box is excellent for building your styles.
The Practical Answer
You will find success in using the Build Styles dialog box to create your styles and then switching to the HTML pane of your ASPX file to associate your styles by hand or using the Document Outline pane in conjunction with the Formatting Toolbar's Style Sheet drop-down list. To see your changes, select View and then Refresh, and Visual Studio .NET reloads your style definitions. Best Practices
As with all techniques, there is a difference between applying the rules and learning the craft. The following tips will guide you through some proven best practices in coding cascading style sheets.

Use Hungarian Notation for Element IDs
Hungarian notation in your IDs greatly eases the maintainability of your style sheets as you know what the element type is by looking at its ID. Use Multiple External Style Sheet Files
Set up a style sheet for your entire application and include this file on each page in the site, but don't nest all of your styles in one file. Defining all of your styles in a single file is a recipe for a monster to maintain and to unnecessarily push unused style definitions to the client. If your styles are site-wide, include them in the global definition file; otherwise create a styles heet for areas of your site and even individual pages.



Use a Common File Naming Standard
To associate your style sheet files together, use a file naming standard. One concept that proves successful is to name your style sheet files with the name of your ASPX file name plus the extension of .css. For example, if your ASPX file is default.aspx and you wish to have a custom CSS file for this page, the name is default.aspx.css. This makes your life easy in coding the files, as you can always figure out what your file name is and the files show up right next to each other in Visual Studio's Solution Explorer. Use ID Styles as a Last Resort
ID styles are powerful, useful, and necessary, but only use them when you must. Styles applied to an ID are the definitions explicit and exclusive to the element to which the style is associated. This limits your ability to reuse your styles. Try to format your page with as many hierarchical element styles and classes as possible and you will notice that as you add elements to your page, less and less work is required to get the look and feel you want. Styles tied to IDs should be defined only when you have a style definition that is only appropriate to the element in question.

Name Against Function, Not Placement
Try to name your element IDs and classes against the function of the element, not the placement. For instance, if you create an ID of divFooter on your page and then your user asks for the content in the footer to show up on the right-hand side of the page, your ID no longer makes sense. Look for ways to name your elements and classes with terms like ContentPrimary, Content Secondary, Navigation, and Links. Avoid Using Head and Inline Styles
Using Head and Inline style wire-up techniques flattens your presentational layer architecture and co-mingles your structure and design. CSS definitions are best kept in their own file outside the ASPX file. Another reason to keep separate files is that Visual Studio .NET 2003 only supports IntelliSense in CSS files.

Avoid Unnecessary Debugging Session
s As CSS is purely a client-side technology, there is no reason for you to launch a debug session in order to check your changes. If your keyboard is set up with the default settings in Visual Studio, you may simply press CTRL F5 to launch the application once and then click the Refresh button to see any changes. Validate Your Code
Before you go live with a style sheet, take a moment to validate it against the official CSS validator: http://jigsaw.w3.org/css-validator/validator-uri.html. This identifies any potential problems with your styles that may cause issues with various browsers.

To sum up, the use of Cascading Style Sheets assists in the maintainability of your sites. Taking advantage of global styles, page-styles, and the hierarchical nature of style sheets allows you to create a site that can be modified quickly and easily. Although there are some challenges in learning how to take advantage of these styles, taking the time is well worth the effort.



Paul D. Sheriff is President of PDSA, Inc., which provides .NET consulting, products, and services, including an SDLC document and architectural framework. Paul is a Microsoft Regional Director for Southern California. His .NET books include "ASP.NET Developer's Jumpstart" (Addison-Wesley) and several eBooks listed on PDSA's Web site.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date