Hey Coders, Code readability and re-usability are the fundamentals for development. It is key to maintainability and working together with a team. This article will detail the 10 practices to improve the quality of your HTML and CSS code making it much more understandable for you as well as others, reusable and maintainable.
HTML
##1. Syntax
- Don't forget optional closing tags.
- Don't capitalize tags.
- Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
- Always use double quotes, never single quotes, on attributes.
##2. doctype
In HTML, the doctype is the required "<!DOCTYPE html>" preamble found at the top of all documents. Its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!DOCTYPE html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
##3. Attribute Order
For more readable code our HTML attributes should be in some particular order:
Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
##4. Reducing MarkUp
Practice avoiding using superfluous parent elements when writing HTML. Many times this requires iteration and refactoring but produces less HTML.
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
##5. Alt-text
The alt attribute is quite useful. It helps screen reader users understand what is shown in the picture. Unfortunately, many developers don’t use it efficiently. They either duplicate the text around the picture or don’t add it at all.
<img src="https://m.media-amazon.com/images/M/MV5BNzQ1MmJjZDUtMmI5OC00ZDk2LThkODQtODgwYmU0MTIzNDhmXkEyXkFqcGdeQXVyNDgyODgxNjE@._V1_FMjpg_UX1000_.jpg" alt="Haikyuu Banner">
CSS
##6. Syntax
- When grouping selectors, keep individual selectors, keep individual selector to a single line.
- Include one space before the opening brace of declaration blocks for legibility.
- End all declarations with a semi-colon. The last declaration is optional, but your code is more error-prone without it.
- Lowercase all hex values, e.g., #fff. Lowercase letters are much easier to discern when scanning a document as they tend to have more unique shapes. -Quote attribute values in selectors, e.g., input[type="text"]. They’re only optional in some cases, and it’s a good practice for consistency.
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
##7. Declaration Order
Positioning: Positioning comes first because it can remove an element from the normal document flow and override box model-related styles. The box model—whether it's flex, float, grid, or table—follows as it dictates a component's dimensions, placement, and alignment.
Box Model: The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
Typography: Typography is all about style, proportions, and spacing. Good typography is not only imperative for aesthetic appeal, but it also improves site usability when text legibility and readability concepts are applied.
Visual
Misc
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
##8. Media Query Placement
Always try to place your media query selector close to the relevant sets to avoid bundling. Also it makes your code easier to read.
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
##9. Comments
Code is written and maintained by people. Ensure your code is descriptive, well commented , and approachable by others. Great code comments convey context or purpose. Do not simply reiterate a component or class name.
Be sure to write in complete sentences for larger comments and succinct phrases for general notes.
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
##10. Stop using px
You should use em and rem units. Both em and rem are flexible, scalable units that are translated by the browser into pixel values, depending on the font size settings in your design. Using px won't allow the user to control the font size based on their needs.
I hope you find this article helpful. For daily web development threads, updates and content follow me on Twitter. twitter.com/codewithtee
Thank you for reading! Happy Coding🌼