CSS Naming Conventions

A CSS class name is defined according to whatever the element is or does rather than being linked to a specific context. The purpose is to be able to reuse a name anytime in the TYPO3 Backend while keeping a consistent look & feel.

Nevertheless, to avoid conflicts in the naming scheme, all news styles are expected to use a “t3-” prefix. This will prevent naming collisions when mixing up stylesheets with another application or styles from the old skinning parts.

To be more concrete, let’s give a good example of CSS class names:

<input class="t3-form-text t3-form-field" type="text" />

At the first glance, it seems to be redundant to have multiple classes, but in fact it allows to have very fine-grained CSS selectors. The “t3-form-field” class is the base class for every input elements within the TYPO3 backend, and enables TYPO3 to give a default style to every input elements. In addition, there is the “t3-form- text” class to make it possible to have additional decorations on the input. Please notice the dash “-” which is used as separator inside the names.

Now let’s have a look at a bad example:

<input class="t3-input-line-table">

This is a bad example as one can’t guess the purpose of the “t3 -input-line-table” selector. It contains the word “table” but is used within an input field which makes it semantically hard to understand the purpose of the class. Furthermore it creates confusion with the “table” HTML tag.

• Icons naming conventions
• Why are there so many classes rather than cascading?
• When to use an id rather than a class attribute?