Visual semantics in HTML and CSS

Website stack between you and your users (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 class names based on performance?

Each layer in the network stack has its own structure. You don't expect to use the database architecture to build PHP middleware. People expect the same HTML and CSS. HTML needs to be written with something meaningful that can represent data or content, that is, what I call code semantics. The Code semantics in HTML is extremely important for portability and ease of use. On the other hand, CSS is indeed an independent layer in the stack. It needs to be able to reflect the visual semantics of the page in its own architecture.

All repeated modes of visual semantic description in page design. They depict the basic components of your website. In fact, they can easily implement cross-site applications with only a few modifications. Visual semantics does not have to be bound to HTML semantics, because you need an architecture that meets the specific requirements of each layer of stack.

Strip the template structure from the style

Similarly, many PHP developers want to match CSS and HTML architectures to PHP. Maybe it is more challenging to apply the abstraction of a layer that you are most familiar with to them? I am ashamed of this. When I was on Facebook, I wanted the PHP layer to match the CSS layer. Fortunately, some of Facebook's smart developers have moved on and helped me improve understanding.

Sticking CSS and HTML to PHP can prevent code from being too DRY and eventually leads to code bloated, because CSS and HTML require more detailed object structures than PHP. In fact, PHP templates are not inherently appropriate because each template contains many different HTML and CSS objects that are combined in different ways.

Visual Semantics! = Performance-based Class

Note that I do not recommend a class name similar to "giantBlueHeading. The class name must represent the object structure you want to define, rather than the name of a specific visual class. For example, I often choose a rather abstract class name that is easy to remember, such as "media. A media block is composed of a fixed-width image 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 image and user name. Specific Use Cases are separated from the object structure. HTML can be seen as an example of CSS objects.

The code of 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, read the oocss faq and 99CSS's Chinese translation of the FAQ.

This article is translated from: Visual Semantics in HTML and CSS
Author: Nicole Sullivan
Original Chinese: Visual semantics in HTML and CSS