Styling by tagname not class
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
Hi!
As far as I understand, you're aiming at only having nested media-queries and pseudo selectors, not tags or global class names. How would you go about styling basic HTML elements like `body`, `input`, `h1`, `h2`, `p`, `strong` etc. by their tagname? For instance, the body in the example have the default `8px` margin – a sitewide reset would be in order.
I can think of a few ways to achieve this, good or (mostly) bad:
- Site-wide styling of commonly used basic html elements in a seperate css file (do-able now).
- Dedicated StyleSheet object with basic html, that is required and set as `className` everywhere they're used: `
hi
` (whoa!).- Some initializer function that accepts sitewide styling by tagname.
- Accept `:global h1`, `*h1`, `h1` (a space) or something else, as the first char(s) in the selector [when looping through the object keys](https://github.com/Khan/aphrodite/blob/master/src/generate.js#L16), and treat that more or less like the pseudo selector.
This is somehow related to #10 , though I see this as the key issue, and a solution would address that as well. I think @jlfwong described the trade-of quite well:
> That definitely was not an intention of the API design, but perhaps is something we should support for the sake of API simplicity.
I hope we find a solution for this. I definitely think this is the most promising way of stylehandling!
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading the selector handling in generate.js around line 16, then review the discussion in issue #10 and the alternatives described here. The work is done when the project has an agreed, documented way to style basic HTML elements by tag name, including sitewide reset use cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100