EE Insider

Naming conventions for custom fields and CSS

When you add custom weblog fields (or any other custom field for that matter) using a matching CSS class/ID name might help you when editing templates or CSS, and reduce the amount of time you have to keep switching back and forth to see what CSS belongs to what HTML (and vice versa.

Let’s say you create a field for a product description and you want this content inside a DIV tag for presentational purposes.

Your custom field name might be called {product-description}

The matching CSS class/ID would then be called #product-description or .product-description

This comes in handy when writing either HTML or CSS. If you write your HTML first then apply class/ID to the tag like this…

Now when you add the CSS you already know the class name without having to go back to your template to remind yourself.