Khan / Khan/aphrodite

Styling by tagname not class

Open
#30 13 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.