Best Practices for HTML and CSS Coding

Question

Best Practices for HTML and CSS Coding

We have decided to hire an outside consultant to create XHTML (Transitional) and CSS for the key pages of our new project. In order to ensure a certain level of quality, I am putting together a set of guidelines for them to follow. The HTML they provide will be integrated into an ASP.NET web forms application using master pages, external stylesheets, and jQuery. While Javascript is not needed, proper formatting and organization of CSS are important.

While I have started on this list, I realized that this is a common situation and there may be a proven template out there that I can use as a guide. Does anyone have experience with this type of project?

asp.net html css coding-style

Answer 1

Answer №1

One of the initial technical requirements I would prioritize is ensuring that pages pass validation.

In addition, the site should be accessible to users with JavaScript disabled and those relying on screen readers. This not only helps identify issues like improperly used tables and missing image alt tags, but also ensures consistent use of header tags.

Answer 2

One of the initial technical requirements I would prioritize is ensuring that pages pass validation.

In addition, the site should be accessible to users with JavaScript disabled and those relying on screen readers. This not only helps identify issues like improperly used tables and missing image alt tags, but also ensures consistent use of header tags.

Answer 3

Answer №2

I have a simple yet effective test that I always conduct on my designs - opening the page and using ctrl+scroll to zoom in. This action quickly reveals how adaptable and fluid the design is.

Unfortunately, this test tends to struggle in IE regardless of the design. However, another approach is to increase the font size and observe any changes (particularly noting vertical button stretching).

Answer 4

I have a simple yet effective test that I always conduct on my designs - opening the page and using ctrl+scroll to zoom in. This action quickly reveals how adaptable and fluid the design is.

Unfortunately, this test tends to struggle in IE regardless of the design. However, another approach is to increase the font size and observe any changes (particularly noting vertical button stretching).

Answer 5

Answer №3

Provide a detailed list of browsers (including versions and operating systems) that you anticipate them to support.

Discuss the importance of adhering to accessibility guidelines. Consider agreeing on implementing some of the recommendations outlined in the Checklist for Web Content Accessibility Guidelines. This comprehensive list ensures that your website is accessible to individuals with disabilities as well as those using browsers without JavaScript, CSS, or Images. It also includes valuable best practices for creating user-friendly websites.

Given the use of ASP.NET, emphasize the inclusion of only one <form> per web page. Alternatively, be prepared to find solutions if multiple forms are necessary.

If incorporating AJAX functionality, introduce them to the ASP.NET AJAX Control Toolkit to streamline development by utilizing pre-built components.

Suggest utilizing established frameworks such as YUI css reset and jQuery for consistency and efficiency in coding.

Answer 6

Provide a detailed list of browsers (including versions and operating systems) that you anticipate them to support.

Discuss the importance of adhering to accessibility guidelines. Consider agreeing on implementing some of the recommendations outlined in the Checklist for Web Content Accessibility Guidelines. This comprehensive list ensures that your website is accessible to individuals with disabilities as well as those using browsers without JavaScript, CSS, or Images. It also includes valuable best practices for creating user-friendly websites.

Given the use of ASP.NET, emphasize the inclusion of only one <form> per web page. Alternatively, be prepared to find solutions if multiple forms are necessary.

If incorporating AJAX functionality, introduce them to the ASP.NET AJAX Control Toolkit to streamline development by utilizing pre-built components.

Suggest utilizing established frameworks such as YUI css reset and jQuery for consistency and efficiency in coding.

Answer 7

Answer №4

Ensuring proper structuring and formatting of HTML/CSS templates is essential when collaborating with multiple front-end developers. Just like how books are organized into volumes, chapters, paragraphs, etc., HTML and CSS also require a hierarchical structure for readability (or risk turning into a coding nightmare).

Here's a handy rule to follow:


     <body>
          <div id="first">
               <p>
                    Insert text here...
               <p>

               <ul>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>
                         <ul>
                             <li>
                                  <a href="#">Link</a>
                             </li>
                         </ul>
                    </li>
               </ul>
          </div> <!-- #first ends -->
     </body>

Following this structured approach can greatly streamline the code review process and make it easier for any developer to work on the project efficiently, regardless of who originally wrote the code.

Answer 8

Ensuring proper structuring and formatting of HTML/CSS templates is essential when collaborating with multiple front-end developers. Just like how books are organized into volumes, chapters, paragraphs, etc., HTML and CSS also require a hierarchical structure for readability (or risk turning into a coding nightmare).

Here's a handy rule to follow:


     <body>
          <div id="first">
               <p>
                    Insert text here...
               <p>

               <ul>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>
                         <ul>
                             <li>
                                  <a href="#">Link</a>
                             </li>
                         </ul>
                    </li>
               </ul>
          </div> <!-- #first ends -->
     </body>

Following this structured approach can greatly streamline the code review process and make it easier for any developer to work on the project efficiently, regardless of who originally wrote the code.

Answer 9

Answer №5

In addition to validation, it is important to consider the following factors: - Accessibility (Identifying the target audience) - Using a CSS-based design with well-defined semantics - Maintaining consistency in naming conventions for CSS and IDs, which can simplify future changes and applications of new CSS styles.

For further best practices, refer to the Yahoo Developer Library at: http://developer.yahoo.com/performance/rules.html

When working with ASP.net, be cautious about the lengthy and unpredictable client-side IDs generated for user controls by the system at runtime.

Additional helpful information can be found at:

Answer 10

In addition to validation, it is important to consider the following factors: - Accessibility (Identifying the target audience) - Using a CSS-based design with well-defined semantics - Maintaining consistency in naming conventions for CSS and IDs, which can simplify future changes and applications of new CSS styles.

For further best practices, refer to the Yahoo Developer Library at: http://developer.yahoo.com/performance/rules.html

When working with ASP.net, be cautious about the lengthy and unpredictable client-side IDs generated for user controls by the system at runtime.

Additional helpful information can be found at:

Answer 11

Answer №6

It is important to ensure that the webpage passes validation.

Additionally, consider the semantics of the page and organize it in a logical manner for users who may have CSS disabled. This includes using proper heading tags, adding alt attributes to images, avoiding tables for formatting purposes, and structuring menus as lists rather than divs for semantic clarity.

Answer 12

It is important to ensure that the webpage passes validation.

Additionally, consider the semantics of the page and organize it in a logical manner for users who may have CSS disabled. This includes using proper heading tags, adding alt attributes to images, avoiding tables for formatting purposes, and structuring menus as lists rather than divs for semantic clarity.

Best Practices for HTML and CSS Coding

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

What is preventing me from inserting space before the buttons in PHP?

Unable to select an item using mobile devices

When integrating external HTML into an Angular 2 component, relative references may become invalid and fail to

Images in the JavaScript menu are not remaining fixed in place

Changing the Parent div style based on checked radio input in Reactjs

Rows in the table are not extending to their full length

Retrieving data from a data table

"Retrieve data from an Excel file and either present it in a textarea or store it as an array

Using XpoDataSource (DevExpress) to Filter a Huge DataSet in an ASPxComboBox

Is it not possible to collapse in webkit?

Switching CSS styles - seeking a smoother integration

Navigating through an object to identify duplicate elements in C#

How can I utilize IHttpActionResult interface effectively?

Bug in 3D Transformation Identified in Safari 11.0.1

Tips for activating a function right before a session timeout in ASP.NET

Interactive div with dynamically generated click event

The adjustment in margin triggers a ripple effect on several div elements

How can I conceal child <div> elements when the parent div is resized?

How to position an empty Div next to images