Applying ECSS to visual modules

Visual components refers to areas of markup that are not necessarily generated by a particular piece of application logic.

You can still break areas into logical visual areas and apply ECSS to them. This is the approach employed on the http://ecss.io  website.

There are no hard and fast rules. As an example, we might break a design into visual areas for Structure, Menu, Footer, Navigation, Quick Jump Menu, Hero Image etc.

And in this case, our selectors look like this:

.st-Header {
    /* Structural container for header */  
}

.st-Footer {
    /* Structural container for footer */
}

However, we might just as easily do this:

.hd-Outer {
    /* Structural container for header */ 
}

.ft-Outer {
    /* Structural container for footer */
}

Or even like this if it's the module:

.hd-Header {
    /* Structural container for the Header module */
}

.ft-Footer {
    /* Structural container for the footer module */
}

None of those approaches is wrong or right...