Things I Learned from Learn to Code HTML & CSS, Lesson 12

Here are some things I learned from Lesson 11: Organizing Data with Tables of Learn to Code HTML & CSS by Shay Howe.

HTML Coding Practices

Write Standards-Compliant Markup

HTML is a forgiving language that allows poor code to execute and render. However, this does not allow you to write poor code. Be sure to nest and close all elements correctly, to use IDs and classes appropriately, and to always validate your code.

Make Use of Semantic Elements

Carefully decide the proper semantic elements in your markup.

Use the Proper Document Structure

Use proper document structure, including the <!DOCTYPE html> doctype, and the <html>, <head>, and <body> elements.

Keep the Syntax Organized

A few quick rules:

  • Use lowercase letters within elements names, attributes, and values
  • Indent nested elements
  • Strictly use double quotes
  • Remove the forward slash at the end of self-closing elements
  • Omit the values on Boolean attributes

Use Practical ID & Class Values

The ID and class values need to be practical, relating to the content itself, not the style of the content.

For example, don’t use colors as class names, as you may want to change the colors in the future, and you’ll need to change both CSS and HTML to do that without causing confusion.

Use the Alternative Text Attribute on Images

Images should always include the alt attribute. Screen readers and other accessibility software rely on that.

The alt attribute value should be very descriptive of what the image contains. If the image doesn’t contain anything of relevance, the alt attribute should still be included and left blank so that the screen readers won’t read the name of the image.

If an image doesn’t have a meaningful value, it should be included as a CSS background image, not as an <img> element.

Separate Content from Style

Never use inline styles within HTML. Doing so creates pages that take longer to load, are difficult to maintain, and cause headaches for designers and developers. Instead, use external style sheets.

Avoid a Case of “Divitis”

Keep your code lean and reduce markup by tying multiple styles to a single element. Additionally, use HTML5 structural elements where suitable.

Continually Refactor Code

As websites and code bases grow, they tend to leave behind cruft. Remove old code and styles as necessary. Also, evaluate and refactor your code after you write it, looking for ways to condense it and make it more manageable.

CSS Coding Practices

Organize Code with Comments

Keep your styles organized in logical groups and provide comments noting what each group pertains to.

You can also use comments to build a table of contents at the top of the file.

Build Proficient Selectors

Use short and direct selectors. Nest them only two to three levels deep, and remove as many location-based qualifying selectors as possible. Otherwise the selectors are likely to break the cascade of the CSS files.

Use Specific Classes When Necessary

Replace long and specific selector chains with a single class. It allows the code to render faster and makes it more manageable.

Use Shorthand Properties & Values

When you need to set multiple margins around an element, for example, use the margin shorthand property.

If you’re only targeting one side of the element, however, avoid the shorthand to ensure that other margin properties are not overwritten.

Use Shorthand Hexadecimal Color Values

When possible, use the three-character shorthand hexadecimal color value, and always use lowercase characters within your color values. The idea is to remain consistent, prevent confusion, and embrace the syntax of the language.

Drop Units from Zero Values

Adding the unit is unnecessary and provides no additional value.

Group & Align Vendor Prefixes

To keep the code easy to read and modify, group and indent vendor prefixes so that the property names and their values stack vertically.

Modularize Styles for Reuse

If different elements share the same style, use a common class with a name that suits them all.

Leave a Reply

Your email address will not be published. Required fields are marked *