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...
