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. As long as child nodes/selectors follow the same naming convention, the styles will be isolated to the particular area.

The reality is that on smaller sites, you could use pretty much any class-naming approach you like and the dangers of collision would be minimal. However, as soon as projects start to grow the benefits of namespacing and a strict naming convention will start to pay you back handsomely. Just make a decision, and apply that choice consistently.