The Functional Role of CSS

By Panu Viljamaa

In a web-app CSS plays an important role. But what is that role? What is the general name for the thing that CSS does?

CSS is not about the structure of the DOM -elements on the page. CSS is about how they are presented. It is not only about colors or text-styles because it also is used to define the layout and relative positions of the elements. CSS is the technical name for the prominent technology which does that.

What general name should we use for the thing that does what CSS does? The reason to ask is that the answer should partially clarify the role that CSS plays in an application and thus enhance our understanding of the application.

There is a well-known design-pattern called Model-View-Controller. You could say that the JavaScript that responds to user interactions on the page is the Controller, it controls what is happening. You could say that in a sense the page-structure created by HTML is the Model, that is what the page is displaying. Often there is no deeper model, than the words and paragraphs and sections placed on the page in HTML. The “model” then is coded in HTML.

So you could say that CSS performs the function of the View. Yet I don’t think that’s a good “role name” for CSS because traditionally “View” is considered an active agent. CSS contain no or few executable statements. CSS is like PAINT, you splash it on and it affects what users see. But it’s more than colors, it affects also the typography and most significantly the relative layout of elements on the page.

I’ve decided to use the term “Decor” in my own projects when referring to the thing that is coded with CSS. If you think about it “decor” means not only what paints you use for a room but also the layout of the furniture in it. It is not about what the furniture does, just how it looks and feels, and where it sits.

The functional role of CSS is the “Decor” of a web-app.

TAGS:

  • #Model-Controller-Decor
  • #mvc_alternative

LINKS: