Applying ECSS to logic modules

Typically, in a web application, some programming language (e.g. JavaScript/TypeScript/Ruby/whatever), will be generating a thing.

It's often practical and desirable to use the file name of that thing as the name of the module (or component of a module). Therefore, if a file is called Header.js and generates the container for the header, any component parts of that header could be named accordingly. For example, in ECSS parlance, a company registration number might get sw-Header_Reg as its selector. By extension, a search box component inside the header might have a selector like sw-HeaderSearch_Input (the input box created by the HeaderSearch.js file).

An example

Let's consider a more concrete example. Suppose we are authoring a JavaScript client-side application and we have a component called ShoppingCartLines.js. Its task is to render out the lines within a shopping cart and it in turn displays within a module called ShoppingCart.js. The ShoppingCart...