Css style

A few little HTML, CSS secrets in an article

Profile picture of Nikita Starichenko HackerNoon

Nikita Starichenko

7+ years as a full-stack developer

Writing beautiful, understandable code is just as important as writing production code. There are many different guides and guidelines on the internet.

I tried going through them all and creating a little cheat sheet. I’ve included only the rules that affect code styling and cover most key points.

Hope this can be useful to you!

Globally

  1. Use HTTPS for embedded resources whenever possible.Always use HTTPS (https:) for images and other media files, style sheets and scripts, unless the respective files are not available via HTTPS.
  2. Use UTF-8 (no BOM). Specify encoding in templates and HTML documents via . Do not specify the encoding of the style sheets as these assume UTF-8.

HTML style rules

  1. Use HTML5. HTML5 (HTML syntax) is preferred for all HTML documents: .
  2. Never skip the item . The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
  3. Add the lang attribute. You should always include the lang attribute in the tag , to declare the language of the web page. This is intended to help search engines and browsers.
  4. Provide alternative content for multimedia. For multimedia, such as images, videos, animated objects via canvas, be sure to provide alternative access. For images, this means using meaningful alt text (alt) and for video and audio transcripts and captions, if available.
  5. Always set the width and height of images. This reduces flicker because the browser can reserve space for the image before loading.
  6. Omit type attributes for style sheets and scripts. Specifying type attributes in these contexts is not necessary because HTML5 implies text/CSS and text/javascript by default. This can be done safely even for older browsers.
  7. Close all HTML elements

Bad example:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">script>
<title>Testtitle>
<article>This is only a test.
<img src="html5.gif">
<link rel="stylesheet" href="https://www.google.com/css/maia.css" type="text/css">
<section>
<p>This is a paragraph.
<p>This is a paragraph.
section>

Good example:


<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>Testtitle>
  <head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">script>
    <link rel="stylesheet" href="https://www.google.com/css/maia.css">
    <article>This is only a test.article>
    <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
    <section>
      <p>This is a paragraph.p>
      <p>This is a paragraph.p>
    section>
  body>
html>

HTML formatting rules

  1. Removing 2 spaces at a time. Do not use tabs or mix tabs and spaces for indentation.
  2. Nested elements must be indented once (two spaces).
  3. Use only lowercase letters. All code must be lowercase: this applies to HTML element names, attributes, attribute values ​​(except text/CDATA), CSS selectors, properties, and property values ​​(except Chains).
  4. Remove trailing white spaces. Trailing white spaces are not necessary and can complicate the differences.
  5. Use a new line for each block, list, or array element, and indent each of these child elements. Regardless of an element’s style (as CSS allows elements to take on a different role per display property), place each block, list, or array element on a new line.
  6. When quoting attribute values, use double quotes. Use double quotes (“”) rather than single quotes (”) around attribute values.

Bad example:

<A HREF = "/">HomeA>
<a class='maia-button maia-button-secondary'>Sign ina>
<ul>
<li>Fantastic<li>Great
ul>

Good example:

<img src="google.png" alt="Google">
<ul>
  <li>Fantasticli>
  <li>Greatli>
ul>

CSS style rules

  1. Use meaningful or generic class names and IDs. Instead of presentational or cryptic names, always use ID and class names that reflect the purpose of the item in question, or that are otherwise generic.
  2. Use ID and class names as short as possible but as long as necessary. Try to convey what an ID or class is while being as brief as possible.
  3. Avoid qualifying IDs and class names with type selectors. Unless necessary (eg with helper classes), do not use element names in conjunction with IDs or classes.
  4. Separate words in ID and class names with a hyphen. Do not concatenate words and abbreviations in selectors with characters (including none) other than hyphens, to improve comprehension and readability.
  5. Use abbreviated properties whenever possible. CSS offers a variety of shorthand properties (like font) that should be used whenever possible, even in cases where a single value is explicitly defined.
  6. Omit the unit specification after “0” values, unless necessary.Do not use units after 0 values ​​unless they are required.
  7. Omit the leading “0”s in the values. Do not put 0 in front of values ​​or lengths between -1 and 1.
  8. Use 3 character hexadecimal notation if possible. For color values ​​that allow it, the 3-character hexadecimal notation is shorter and more succinct.
  9. Prefer line comments to block comments.
  10. Prefer comments on their own line. Avoid end-of-line comments.

Bad example:

/* Not recommended: meaningless */
#yee-1901 {
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0em;
}
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {
color: #ffffff
}

Good example:

/* Recommended: specific */
#gallery {
  padding: 0 1em 2em;
}

#login {
  font-size: .8em;
}

.demo-image {
  color: #fff
}

CSS formatting rules

  1. Literate statements. Put the statements in alphabetical order so that you get consistent code in a way that’s easy to remember and maintain.
  2. Use soft tabs (2 spaces) for indentation.
  3. Indent all block content. Indent all block content, i.e. rules within rules as well as declarations, to reflect hierarchy and improve comprehension.
  4. Use a semicolon after each statement. End each statement with a semicolon for consistency and extensibility.
  5. Use a space after a colon in a property name. Always use a single space between the property and the value (but no space between the property and the colon) for consistency.
  6. Use a space between the last selector and the declaration block. Always use a single space between the last selector and the opening brace that begins the declaration block.
  7. Separate selectors and declarations with newlines. Always start a new line for each selector and declaration.
  8. Separate rules with newlines. Always put a blank line (two line breaks) between rules.
  9. Use single quotes (”) rather than double quotes (“”) for attribute selectors and property values.

Bad example:

.test {
display:block;
height:100px
}
a:focus, a:active {
position: relative; top: 1px
}
html {font-family: "open sans", arial, sans-serif;}

Good example:

html {
  font-family: 'open sans', arial, sans-serif;
}

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

.example {
  background: fuchsia;
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: blue;
}

Useful links:

  1. Google HTML/CSS Style Guide
  2. w3schools HTML style guide and coding conventions
  3. Airbnb CSS/Sass Style Guide
  4. HTML CSS code guide by @mdo.

PS Thanks for reading!

More articles:

  1. Top Lesser Known HTML 5 and CSS 3 Tips and Best Practices
  2. Top 12 Lesser-Known Tips for JavaScript Best Practices

Key words