Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Another way to solve the precedence issue using IDs #97

Closed
JedWatson opened this issue Jul 5, 2016 · 2 comments
Closed

Another way to solve the precedence issue using IDs #97

JedWatson opened this issue Jul 5, 2016 · 2 comments

Comments

@JedWatson
Copy link

I was thinking more about the whole !important debate, and why it's there in the first place. Wouldn't another way to raise the presence of Aphrodite styles be to simply prefix styles with an ID?

It could easily go on the body or a wrapping element around a component, and I suspect it would magically make the precedence problems go away in a way that has none of the downsides of !important

It is also friendlier to component authors (I'm thinking about react-select here), where users providing inline styles is a really important feature, pun not intended.

The old problem:

Legacy stylesheet

.foo div {
    color: red;
}

New component

const Component = () => <div className='foo'>
    <div className={css(styles.bar)}>
        Hello
    </div>
</div>

const styles = StyleSheet.create({
    bar: {
        color: 'green'
    }
});

The browser sees:

.foo div {
    color: red;
}
.foo {
    color: green;
}

... and the text goes red. Bad.

But with an ID, render your React app inside a <body id="my-id"> tag then prefix all the classes with #my-id:

const styles = StyleSheet.create('#my-id', {
    bar: {
        color: 'green'
    }
});

The browser sees:

.foo div {
    color: red;
}
#my-id .foo {
    color: green;
}

... and hey presto, the text is green like it should be.

For something like React Select I can ship that library with stylesheets that prefix the ReactSelect ID, and just wrap the component in a <div id="ReactSelect"> container, and it's highly unlikely any user styles will interfere with the stylesheet in the component.

Technically I'm not complying with the HTML spec if I have more than one ReactSelect ID in my page, so that's kind of ugly. But it will work, and I think it's a trade-off worth discussing.
@kentcdodds
Copy link
Contributor

What if aphrodite generated a unique id on calls to css, or some other exposed API?

@jlfwong
Copy link
Collaborator

jlfwong commented Jul 5, 2016

Once we have a variant that does not use !important, then component authors will be free to use that, regardless of whether or not it's default.

If you make it bounded on some ID, then when I'm reading the component code, I have to wonder "is this ID sometimes on the page and sometimes not?" Right now, when I look at Aphrodite component code, I know "this is definitely the style it's going to hold, regardless of what context on the page it's in".

@jlfwong jlfwong closed this as completed Jul 5, 2016
@JedWatson JedWatson mentioned this issue Jul 13, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jlfwong @JedWatson @kentcdodds