This repository has been archived by the owner on Jul 28, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: write styleguide for data-attribute
- Loading branch information
1 parent
3ca9f7c
commit 0c1780c
Showing
1 changed file
with
33 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# Styleguide for data-attributes | ||
|
||
Data-attributes allow us to store extra information on standard, semantic HTML elements. The data attribute can also be used for styling. You can access them from CSS to add styles to the tag that have specific data-attribute. | ||
|
||
It's simpler and cleaner to write data attributes as data-name, where a name is a concrete name of a data attribute. | ||
|
||
You **should not** write unnecessary data-block='name' or data-container='name' because data-attribute has only one definition and doesn't change. | ||
|
||
Bad code example: | ||
|
||
```html | ||
<div data-block="input"></div> | ||
``` | ||
|
||
Good code example: | ||
|
||
```html | ||
<div data-input></div> | ||
``` | ||
|
||
If you have several values of component states that you need to pass to a data attribute, you can write it this way: | ||
|
||
```html | ||
data-name="value" | ||
``` | ||
|
||
For example: | ||
|
||
```html | ||
<div data-position="horizontal">horizontal block</div> | ||
|
||
<div data-position="vertical">vertical block</div> | ||
``` |