https://github.com/anatolykopyl/html-in-css
An approach to improve the developer experience, when writing html and css
https://github.com/anatolykopyl/html-in-css
css ergonomics html
Last synced: 4 months ago
JSON representation
An approach to improve the developer experience, when writing html and css
- Host: GitHub
- URL: https://github.com/anatolykopyl/html-in-css
- Owner: anatolykopyl
- Created: 2023-12-07T23:20:03.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-27T21:02:08.000Z (over 1 year ago)
- Last Synced: 2024-12-02T19:13:52.395Z (6 months ago)
- Topics: css, ergonomics, html
- Language: TypeScript
- Homepage: https://anatolykopyl.github.io/html-in-css/
- Size: 22.5 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML in CSS
An approach to improve the developer experience, when writing html and css.
One of the most important principles of clean code is DRY. Don't repeat yourself.
Let's take a look at a typical html page.
```html
h1#heading {
font-size: x-large;
font-weight: 600;
margin-bottom: 32px;
}
main#main {
display: flex;
flex-direction: column;
gap: 16px;
}
#main > #quote:first-child {
font-style: italic;
}
#main > #lorem:last-child {
color: green;
}
My Cool Page
"The hardest choices require the strongest wills."
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
```
Obviously there is a lot of repetition in this file. An experienced developer will see that the html needlessly repeats what is already defined in the styles.
You could rewrite the file to have an empty `` and not lose any information, except the text inside the tags.
Introducing HTML-in-CSS! By installing this package you will be able to omit the html and have it be generated from the styles.
```html
h1#heading {
font-size: x-large;
font-weight: 600;
margin-bottom: 32px;
}
#heading::before {
content: 'My Cool Page';
}
main#main {
display: flex;
flex-direction: column;
gap: 16px;
}
#main > #quote:first-child {
font-style: italic;
}
#quote::before {
content: '"The hardest choices require the strongest wills."';
}
#main > #lorem:last-child {
color: green;
}
#lorem::before {
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...';
}
```
This vastly improves the ergonomics, with only a few small tradeoffs:
- All your styles should be written in a way, that can strictly define their position in the DOM. `id`, `:nth-child` and `>` are your best friends.
- All of your content should be in `::before` and `::after` pseudo-elements, since this is the only way to have text in css.
- The whole page is created in runtime by js. Your initial document will be empty with only CSS. This may have a negative impact on your SEO.
## TODO
- Build time page generation
- A plugin that allows the usage of `content` in any element