CSS Tutorial: Visual semantics not equal to performance based classes

Web page Production WEBJX article introduction: visual semantics in HTML and CSS.

A stack of sites between you and the user (simplified version)

On the last day of the TXJS conference, a developer asked me:

Object-oriented CSS does not leave you with a lot of performance based class names?

Each layer in the network stack has its own structure. You don't expect the database schema to be used to build PHP middleware, and people expect HTML and CSS to be the same. HTML needs to be written in a meaningful way that represents data or content, which is what I call code semantics. Code semantics in HTML are extremely important for portability and ease of use. On the other hand, CSS is really a separate layer on the stack, and it needs its own architecture that reflects the visual semantics of the page.

Visual semantics describes all the patterns of repetition in the design of the page. They depict the basic components of your site. In fact, they often only need a little modification to make it easy to implement across-site applications. Visual semantics are not necessarily tied to HTML semantics, because you need a schema that meets the specific needs of each stack.

To peel a template structure from a style

Similarly, many PHP developers want to match CSS and HTML schemas to PHP. Perhaps it would be more challenging to try to apply some of the most familiar layers of abstraction to them? I am ashamed of it. When I was on Facebook, I wanted the PHP layer to match the CSS layer. Luckily, Facebook has a few smart developers who have reined in and helped me improve my understanding.

Hard to put CSS and HTML into PHP can prevent the code is too boring (DRY) and eventually lead to a bloated code, because the CSS and HTML needs than PHP more detailed object structure. In fact, PHP templates are not inherently appropriate because each template contains a number of different HTML and a combination of CSS objects in different ways.

Visual semantics! = Class based on performance

It is important to note that I am not suggesting a class name similar to "Giantblueheading". Class names need to represent the object structure you want to define, not the name of a particular visual class. For example, I often choose to remember the more abstract class name, such as "media" is easy to remember. Media blocks are combined by a fixed-width picture or flash and some text or other content.

Media blocks can be used in many different situations, such as combining an icon and a link or profile picture and user name. Specific use cases are separated from the object structure. HTML can be viewed as an instance of a CSS object.

The code for the media block , and many other basic objects, can be found in the oocss Open source project .

PS: If you are not familiar with OOCSS, you can read the oocss FAQand 99CSS Chinese translation of the FAQ

This article translates from: Visual semantics in HTML and CSS
Original Author: Nicole Sullivan
Chinese Original: visual semantics in HTML and CSS
Please respect the copyright, reproduced please indicate the source, thank you!