Shopify Expert Insights

E-Com Advice from our experienced in-house team

In addition to web standards, we have our own pro-tips and best practices that our developers follow.

When writing HTML...
Be semantic above all else
Separate style from content
Make use of form features such as fieldset, legend, label, and input[type=email]
Use divs sparingly. Instead use HTML5 tags such as header, footer, nav, section, article, and aside.
Limit H1 tags to one per separate content level. For example, an overall page can have one as a title, and each article should have one.

When writing CSS...
Use repeated patterns to keep CSS lean
Only use !important when absolutely necessary.
Use IDs for unique elements
Use classes are for repeated patterns
Use in-line styles only in the rare circumstance where it results in a smaller overall page size
Alphabetize styles first, then group according to function, browser specific/partially supported styles at end. For position, margin, padding: x, y, then z. For background-position: horizontal then vertical.

Example:
        #minky {
            background: #000100;
            border: 1px #0f0 solid;
            color: #fefcff;
            margin: 0; padding: 0;
            position: absolute; top: 5px; left: 10px;
          
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
        }

By following coding best practices, we create code and websites that are useful to people, understood by machines, and easily maintained by developers. This improves usability, accessibility, SEO, and reduces maintenance cost.