Style via Classes

Styling via Classes

The Style via Classes feature uses classes to style an element. By default elements styles us an ID selector.

Default:

Element HTML

Element CSS

Style via Classes:

Element HTML

Element CSS

By default elements are styled via ID. Usually it's recommend not to use ID selectors to style your page elements because there is a risk that an ID may be used more than once in a document. Using classes has lower risk of conflicting with another Id. You can then reserve defining Ids to interactive page elements such as forms and form items.

This is good advice especially if you are writing web pages by hand. If you uses classes and it has a typo or is reused it can also break your page.

However, if we control the entire page and artboard and know all of it's elements, and we do with Web Export, we can check for that. We need to check for that anyway whether you use classes or Ids.

Web Export checks all the ids before hand and notifies you if there are duplicates and renames non manually entered Ids. View the messages after export to see if there are any duplicates. I recommend using the default setting for more control.

The default setting, styling by id, has more tested than the style via classes feature. Of course, use whatever option you choose and report any issues.