Attribute Casing
How markup attribute names and value casing should be processed. This defaults to preserve which will leave casing intact and typically the best option to use.
preserve
The preserve option is what Æsthetic will default to using. The option will allow both lowercase and uppercase attributes be provided within HTML (markup) tags.
- default
- recommended
- warrington
- strict
- prettier
<div data-ATTR="FOO-bar-BAZ">
Attribute casing will be preserved
</div>
<div data-ATTR="FOO-bar-BAZ">
Attribute casing will be preserved
</div>lowercase
Below is an example of how this rule work it it’s set to lowercase. This might be problematic to use projects where casing needs to be respected as both attribute names and values will be converted to lowercase.
- default
- recommended
- warrington
- strict
- prettier
<div data-ATTR="FOO-bar-BAZ">
Attributes will convert to lowercase
</div>
<div data-attr="foo-bar-baz">
Attributes will convert to lowercase
</div>lowercase-name
Below is an example of how this rule work it it’s set to lowercase-name. This will leave attribute values intact but convert attribute names to lowercase.
- default
- recommended
- warrington
- strict
- prettier
<div DATA-ATTR="FOO-BAR">
Attributes names will be converted to lowercase
</div>
<div data-attr="FOO-BAR">
Attributes names will be converted to lowercase
</div>lowercase-value
Below is an example of how this rule work it it’s set to lowercase-value. This will leave attribute names intact but convert attribute values to lowercase.
- default
- recommended
- warrington
- strict
- prettier
<div DATA-ATTR="FOO-BAR">
Attributes values will be converted to lowercase
</div>
<div DATA-ATTR="foo-bar">
Attributes values will be converted to lowercase
</div>