Last active
March 29, 2019 14:43
-
-
Save JohnAlbin/107758b10e8eb68d1624dee40393042a to your computer and use it in GitHub Desktop.
CSS-in-JS API Approaches
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// MyComponent.js | |
import { apiFunc } from 'some-project'; | |
const styles = { | |
base: { | |
color: '#fff', | |
':hover': { | |
backgroundColor: '#0074d9', | |
}, | |
}, | |
warning: { | |
'background-color': someValue(), | |
}, | |
}; | |
// MyComponent.js (cont.) | |
export const MyComponent = () => ( | |
<div className={ | |
apiFunc(styles.base, styles.warning) | |
}> | |
Some content | |
</div> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// MyComponent.js | |
import { apiFunc } from 'some-project'; | |
const styles = apiFunc` | |
.base { | |
color: #fff; | |
&:hover { | |
background-color: #0074d9; | |
} | |
} | |
.warning { | |
background-color: ${someValue()}, | |
} | |
`; | |
// MyComponent.js (cont.) | |
export const MyComponent = () => ( | |
<div className={ | |
`${styles.base} ${styles.warning}` | |
}> | |
Some content | |
</div> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// MyComponent.js | |
import { styled, css } from 'styled-components'; | |
const Wrapper = styled.div` | |
color: #fff; | |
&:hover { | |
background-color: #0074d9; | |
} | |
{props => props.warning && css` | |
background-color: ${someValue()}, | |
`} | |
`; | |
// MyComponent.js (cont.) | |
export const MyComponent = () => ( | |
<Wrapper warning>Some content</Wrapper> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* styles.css */ | |
.base { | |
color: #fff; | |
&:hover { | |
background-color: #0074d9; | |
} | |
} | |
.warning { | |
background-color: var(--imported-value), | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// MyComponent.js | |
import styles from './styles.css'; | |
import classNames from 'classnames'; | |
export const MyComponent = () => ( | |
<div className={ | |
classNames(styles.base, styles.warning) | |
}> | |
Some content | |
</div> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// callToAction.js | |
import styles from './styles.css'; | |
import classNames from 'classnames'; | |
export const CallToAction = () => ( | |
<article className={styles.Wrapper}> | |
<h3 className={styles.Title}> | |
Look at me. | |
</h3> | |
<p> | |
<a link="#" className={styles.Link}> | |
Now do this. | |
</a> | |
</p> | |
Some content | |
</article> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// JS file auto-generated by Webpack | |
const styles = { | |
Wrapper: 'fdc03d', | |
Title: '79ec33', | |
Link: '6e4c6d', | |
}; | |
export default styles; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Old-school CSS */ | |
.Wrapper { /* properties here */ } | |
@media (min-width: 40em) { | |
.Wrapper { /* properties here */ } | |
} | |
@media (min-width: 60em) { | |
.Wrapper { /* properties here */ } | |
} | |
.Wrapper:hover, .Wrapper:focus { /* properties here */ } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* CSS using css-nesting spec */ | |
.Wrapper { | |
/* properties here */ | |
@media (min-width: 40em) { /* properties here */ } | |
@media (min-width: 60em) { /* properties here */ } | |
@nest &:hover, &:focus { /* properties here */ } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* What if we tried Sass-style nesting? */ | |
.Wrapper { | |
html.js & { /* Won't work! */ | |
/* properties here */ | |
} | |
} | |
/* The css-nesting spec does allow | |
simple Sass-style nesting */ | |
.Wrapper { | |
& span { /* Works! */ | |
/* properties here */ | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.TimeStamp { | |
/* Add this class from another file. */ | |
composes: TimeStamp from '../BlogPost/styles.css'; | |
/* properties here */ | |
} | |
.List { | |
// Assume this class exists in the global space. | |
composes: ListReset from global; | |
/* properties here */ | |
} | |
:global(.Loader) { | |
/* properties here */ | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// JS file auto-generated by Webpack | |
const styles = { | |
// Includes "79ec33" class from BlogPost. | |
TimeStamp: 'fdc03d 79ec33', | |
// Includes "ListReset" class. | |
List: '6e4c6d ListReset', | |
// No class name transforms. | |
Loader: 'Loader' | |
}; | |
export default styles; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* These values can be exported to CSS, JS, and JSON files. */ | |
:root { | |
--primary-color: red; | |
} | |
@custom-media --tablet (min-width: 30em); | |
@custom-selector :--headings h1, h2, h3, h4, h5, h6; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// postcss.config.js | |
const path = require('path'); | |
module.exports = { | |
plugins: { | |
'postcss-preset-env': { | |
stage: 1, | |
browsers: '> 0.5%, last 2 versions, Firefox ESR, not dead', | |
exportTo: path.resolve('cssValues.json'); | |
}, | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment