Shopify themes and Separation Of Concerns (SOC)


1 | SOC and front-end files


Separation Of Concerns (SOC) is a fundamental programming design principle that states that software should be divided into separate files, each one playing a different role (or having a specific concern). SOC is also referred to as modularity.


Web pages implement SOC. Even though an HTML file can contain CSS and JavaScript, the best practice is to split your code into 3 types of files that serve different purposes:


  • HTML files, ending in .html , detail the structure of a web page.
  • CSS files, ending in .css , set the presentation of an HTML page.
  • JavaScript files, ending in .js , add behavior to an HTML page.

2 | 50 shades of SOC


SOC is not a switch that can be either turned on or off. There are levels of SOC. Usually, the more complex a software gets, the more SOC it implements. The common challenge programmers regularly face is to find the right level of SOC, between too few big files and too many small files.


Shopify is a large and complex software. Merely separating a Shopify theme in HTML, CSS and JavaScript files is not convenient enough to enable flexibility and maintainability. There is also another problem at stake here: the limitations of the HTML markup language.


3 | The first limitation of HTML


HTML can reference external CSS files, thanks to the tag <link rel="stylesheet" href=""/>. HTML can also embed (or import) JavaScript code from external JavaScript files, thanks to the opening and closing tags <script src=""></script>. However, HTML cannot embed or import HTML code from other HTML files. This is not convenient, especially when pages of a website share similar code. An e-commerce website can have thousands of products, but a product page usually has the same structure. Creating thousands of products with HTML files would require the creation of one HTML page per product, even though only a few lines change between the files. This is not optimized at all.


4 | The second limitation of HTML


The second limitation of HTML is its very nature. It is simply a markup language, not a programming language. Therefore, it is not possible to use variables, to call functions or to add logic in an HTML file, unlike in CSS and JavaScript files (to different degrees for each language).


For example, in CSS files, we can declare variables and assign them values, thanks to the double hyphen syntax (--main-color: blue). Naturally, we can also use variables after declaring them, by using the var() function, like this:


/* Example */
.title {
color: var(--main-color);
}

This is quite convenient for writing DRY CSS code (DRY: Don't Repeat Yourself).


In JavaScript, we can also declare variables, assign them values and use them throughout the JavaScript code of the file. Like any other general-purpose programming language, JavaScript also lets us add logic to our code.


Here is an overview of the programming capabilities of the 3 languages:


CapabilitiesJavaScriptCSSHTML
Variables✔️✔️
Functions✔️✔️
Logic (Iterations and control flow)✔️

Author: (reviewed by Coralie Delpha)
Initial publication date:
Last updated: