Re: [csswg-drafts] [css-scoping] Please bring back scoped styles (#3547)

> `<style scoped>` affects the entire subtree and technically who wants to emulate this behavior could just use a unique id to scope styles to a subtree.

This is not the case. There are differences.
Obviously you can not reuse an id select. I will use a class instead in my example.

To take a React example:

```
const Profilecard = (props) => {
 
 const styles = `
 div {background-color: ${props.bgColor}}
 h2 { color: white; }
 img  { 
  border-radius: 50%;
  height: 80px;
  width: 80px;
 }`

 return (
  <div className="card">
   <style scoped>{styles}</style>
    <h2>{props.name}</h2>
    <img src="man3.jpg" alt=""/>
   </div>
 );
};
```

Here you could pass different props e.g. <Profilecard bgColor="blue"> would have a blue background and  <Profilecard bgColor="red"> would have a red background.

Whereas with just using a class, styles will override each other: 

```
const Profilecard = (props) => {
 
 const styles = `
 .card {background-color: ${props.bgColor}}
 .card h2 { color: white; }
 .card img  { 
  border-radius: 50%;
  height: 80px;
  width: 80px;
 }`

 return (
  <div className="card">
   <style>{styles}</style>
    <h2>{props.name}</h2>
    <img src="man3.jpg" alt=""/>
   </div>
 );
};
```
 <Profilecard bgColor="blue"> and  <Profilecard bgColor="red"> would both be red (or blue - depending on the order).

This API doesn't just account for scoping. It also accounts for two other things that have made CSS-in-JS popular: 

- the lack of needing to name things
- being able to write CSS inside a Javascript file 

See https://github.com/facebook/create-react-app/issues/5224

-- 
GitHub Notification of comment by o-t-w
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3547#issuecomment-458532843 using your GitHub account

Received on Tuesday, 29 January 2019 13:07:14 UTC