Enduring CSS

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 */ } ...