<commit_before>// css vs glamor

apply a style to an element 
--- 

css
```css
.box { color: red; }
```
```html
<div class='box'> 
  this is a nice box. 
<div>
```

glamor 
```jsx 
import {style} from 'glamor'

let box = style({ color: 'red' })
// ...
<div {...box}>
  this is a nice box. 
</div>

// or 
<div className={box}>
  this is a nice box. 
</div>


```

pseudoclasses
---

css
```css
.box:hover { color: blue; }
```

glamor
```jsx
import {hover, style} from 'glamor'

let boxHover = hover({ color: 'blue' })
// or 
let boxHover = style({ 
  ':hover': {
    color: 'blue' 
  } 
})
```


multiple styles to an element
---

css
```html
<div class="bold myClass"/>
```

glamor 
```jsx
import {merge} from 'glamor'

<div {...bold} {...myClass} />

// or, unlike css, to maintain precendence order 

<div {...merge(bold, myClass)} />

// also works with classes

<div className={merge(bold, myClass)} />
```

[(more examples for composing rules)](https://github.com/threepointone/glamor/blob/master/src/ous.js)


child selectors
---

css<commit_msg>Add docs for combined selectors<commit_after>// css vs glamor

apply a style to an element 
--- 

css
```css
.box { color: red; }
```
```html
<div class='box'> 
  this is a nice box. 
<div>
```

glamor 
```jsx 
import {style} from 'glamor'

let box = style({ color: 'red' })
// ...
<div {...box}>
  this is a nice box. 
</div>

// or 
<div className={box}>
  this is a nice box. 
</div>


```

pseudoclasses
---

css
```css
.box:hover { color: blue; }
```

glamor
```jsx
import {hover, style} from 'glamor'

let boxHover = hover({ color: 'blue' })
// or 
let boxHover = style({ 
  ':hover': {
    color: 'blue' 
  } 
})
```


multiple styles to an element
---

css
```html
<div class="bold myClass"/>
```

glamor 
```jsx
import {merge} from 'glamor'

<div {...bold} {...myClass} />

// or, unlike css, to maintain precendence order 

<div {...merge(bold, myClass)} />

// also works with classes

<div className={merge(bold, myClass)} />
```

[(more examples for composing rules)](https://github.com/threepointone/glamor/blob/master/src/ous.js)

combined selectors
---

css
```css
.f1 { font-size: 1rem };
.red { background: red };
.f1.red { font-size: 2rem};
```
```html
<div class="f1 red">
  I'm red and 2rem!
</div>
```

glamor
```js
// With regular selectors (not ideal for namespacing/isolation)
const rule = style({
  '&.f1' : { fontSize: '1rem' },
  '&.red' : { background: 'red' },
  '&.f1.red' : { fontSize: '2rem' }
 })

<div class={`${rule} f1 red`}></div>


// Or use merge to output a single css selector
const f1 = ({ fontSize: '1rem' });
const red = ({ background: 'red' });
const f1Red = merge(f1, red, { fontSize: '2rem' });

<div class={rule}></div>


// Or for a more traditional css approach...
const f1 = ({ fontSize: '1rem' });
const red = ({ background: 'red' });
const f1Red = style({
  [`&.${f1}.${red}`]: { fontSize: '2rem' }
});

// ...but you still have to use all three selectors
<div class={`${f1} ${red} ${f1red}`}></div>
```


child selectors
---

css
{'fraction_non_alphanumeric': 0.2107342772472835, 'fraction_numerical': 0.007573263088574251, 'mean_word_length': 3.1109607577807847, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1621284', 'n_tokens_mistral': 1242, 'n_tokens_neox': 1175, 'n_words': 351}