css-in-javascript/README.md · 边城/javascript

代码拉取完成,页面将自动刷新

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 0 Fork 0

边城/javascript

代码 Issues 0 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

文件

master

分支 (4)

标签 (92)

管理

master

travis

shar--eslint-config-airbnb-prettier

gh-pages

eslint-config-airbnb-v18.1.0

eslint-config-airbnb-base-v14.1.0

eslint-config-airbnb-v18.0.1

eslint-config-airbnb-v18.0.0

eslint-config-airbnb-base-v14.0.0

eslint-config-airbnb-v17.1.1

eslint-config-airbnb-base-v13.2.0

eslint-config-airbnb-v17.1.0

eslint-config-airbnb-base-v13.1.0

eslint-config-airbnb-v17.0.0

eslint-config-airbnb-base-v13.0.0

eslint-config-airbnb-v16.1.0

eslint-config-airbnb-base-v12.1.0

eslint-config-airbnb-v16.0.0

eslint-config-airbnb-base-v12.0.2

eslint-config-airbnb-base-v12.0.1

eslint-config-airbnb-base-v12.0.0

eslint-config-airbnb-base-v11.3.2

eslint-config-airbnb-base-v11.3.1

eslint-config-airbnb-v15.1.0

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

分支 4

标签 92

javascript

css-in-javascript

README.md

README.md 9.45 KB

# Airbnb CSS-in-JavaScript Style Guide

*A mostly reasonable approach to CSS-in-JavaScript*

## Table of Contents

1. [Naming](#naming)
1. [Ordering](#ordering)
1. [Nesting](#nesting)
1. [Inline](#inline)
1. [Themes](#themes)

## Naming

- Use camelCase for object keys (i.e. "selectors").

> Why? We access these keys as properties on the `styles` object in the component, so it is most convenient to use camelCase.

```js
 // bad
 {
 'bermuda-triangle': {
 display: 'none',
 },
 }

// good
 {
 bermudaTriangle: {
 display: 'none',
 },
 }
 ```

- Use an underscore for modifiers to other styles.

> Why? Similar to BEM, this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.

```js
 // bad
 {
 bruceBanner: {
 color: 'pink',
 transition: 'color 10s',
 },

bruceBannerTheHulk: {
 color: 'green',
 },
 }

// good
 {
 bruceBanner: {
 color: 'pink',
 transition: 'color 10s',
 },

bruceBanner_theHulk: {
 color: 'green',
 },
 }
 ```

- Use `selectorName_fallback` for sets of fallback styles.

> Why? Similar to modifiers, keeping the naming consistent helps reveal the relationship of these styles to the styles that override them in more adequate browsers.

```js
 // bad
 {
 muscles: {
 display: 'flex',
 },

muscles_sadBears: {
 width: '100%',
 },
 }

// good
 {
 muscles: {
 display: 'flex',
 },

muscles_fallback: {
 width: '100%',
 },
 }
 ```

- Use a separate selector for sets of fallback styles.

> Why? Keeping fallback styles contained in a separate object clarifies their purpose, which improves readability.

```js
 // bad
 {
 muscles: {
 display: 'flex',
 },

left: {
 flexGrow: 1,
 display: 'inline-block',
 },

right: {
 display: 'inline-block',
 },
 }

// good
 {
 muscles: {
 display: 'flex',
 },

left: {
 flexGrow: 1,
 },

left_fallback: {
 display: 'inline-block',
 },

right_fallback: {
 display: 'inline-block',
 },
 }
 ```

- Use device-agnostic names (e.g. "small", "medium", and "large") to name media query breakpoints.

> Why? Commonly used names like "phone", "tablet", and "desktop" do not match the characteristics of the devices in the real world. Using these names sets the wrong expectations.

```js
 // bad
 const breakpoints = {
 mobile: '@media (max-width: 639px)',
 tablet: '@media (max-width: 1047px)',
 desktop: '@media (min-width: 1048px)',
 };

// good
 const breakpoints = {
 small: '@media (max-width: 639px)',
 medium: '@media (max-width: 1047px)',
 large: '@media (min-width: 1048px)',
 };
 ```

## Ordering

- Define styles after the component.

> Why? We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection.

```jsx
 // bad
 const styles = {
 container: {
 display: 'inline-block',
 },
 };

function MyComponent({ styles }) {
 return (
 <div {...css(styles.container)}>
 Never doubt that a small group of thoughtful, committed citizens can
 change the world. Indeed, it’s the only thing that ever has.
 </div>
 );
 }

export default withStyles(() => styles)(MyComponent);

// good
 function MyComponent({ styles }) {
 return (
 <div {...css(styles.container)}>
 Never doubt that a small group of thoughtful, committed citizens can
 change the world. Indeed, it’s the only thing that ever has.
 </div>
 );
 }

export default withStyles(() => ({
 container: {
 display: 'inline-block',
 },
 }))(MyComponent);
 ```

## Nesting

- Leave a blank line between adjacent blocks at the same indentation level.

> Why? The whitespace improves readability and reduces the likelihood of merge conflicts.

```js
 // bad
 {
 bigBang: {
 display: 'inline-block',
 '::before': {
 content: "''",
 },
 },
 universe: {
 border: 'none',
 },
 }

// good
 {
 bigBang: {
 display: 'inline-block',

'::before': {
 content: "''",
 },
 },

universe: {
 border: 'none',
 },
 }
 ```

## Inline

- Use inline styles for styles that have a high cardinality (e.g. uses the value of a prop) and not for styles that have a low cardinality.

> Why? Generating themed stylesheets can be expensive, so they are best for discrete sets of styles.

```jsx
 // bad
 export default function MyComponent({ spacing }) {
 return (
 <div style={{ display: 'table', margin: spacing }} />
 );
 }

// good
 function MyComponent({ styles, spacing }) {
 return (
 <div {...css(styles.periodic, { margin: spacing })} />
 );
 }
 export default withStyles(() => ({
 periodic: {
 display: 'table',
 },
 }))(MyComponent);
 ```

## Themes

- Use an abstraction layer such as [react-with-styles](https://github.com/airbnb/react-with-styles) that enables theming. *react-with-styles gives us things like `withStyles()`, `ThemedStyleSheet`, and `css()` which are used in some of the examples in this document.*

> Why? It is useful to have a set of shared variables for styling your components. Using an abstraction layer makes this more convenient. Additionally, this can help prevent your components from being tightly coupled to any particular underlying implementation, which gives you more freedom.

- Define colors only in themes.

```js
 // bad
 export default withStyles(() => ({
 chuckNorris: {
 color: '#bada55',
 },
 }))(MyComponent);

// good
 export default withStyles(({ color }) => ({
 chuckNorris: {
 color: color.badass,
 },
 }))(MyComponent);
 ```

- Define fonts only in themes.

```js
 // bad
 export default withStyles(() => ({
 towerOfPisa: {
 fontStyle: 'italic',
 },
 }))(MyComponent);

// good
 export default withStyles(({ font }) => ({
 towerOfPisa: {
 fontStyle: font.italic,
 },
 }))(MyComponent);
 ```

- Define fonts as sets of related styles.

```js
 // bad
 export default withStyles(() => ({
 towerOfPisa: {
 fontFamily: 'Italiana, "Times New Roman", serif',
 fontSize: '2em',
 fontStyle: 'italic',
 lineHeight: 1.5,
 },
 }))(MyComponent);

// good
 export default withStyles(({ font }) => ({
 towerOfPisa: {
 ...font.italian,
 },
 }))(MyComponent);
 ```

- Define base grid units in theme (either as a value or a function that takes a multiplier).

```js
 // bad
 export default withStyles(() => ({
 rip: {
 bottom: '-6912px', // 6 feet
 },
 }))(MyComponent);

// good
 export default withStyles(({ units }) => ({
 rip: {
 bottom: units(864), // 6 feet, assuming our unit is 8px
 },
 }))(MyComponent);

// good
 export default withStyles(({ unit }) => ({
 rip: {
 bottom: 864 * unit, // 6 feet, assuming our unit is 8px
 },
 }))(MyComponent);
 ```

- Define media queries only in themes.

```js
 // bad
 export default withStyles(() => ({
 container: {
 width: '100%',

'@media (max-width: 1047px)': {
 width: '50%',
 },
 },
 }))(MyComponent);

// good
 export default withStyles(({ breakpoint }) => ({
 container: {
 width: '100%',

[breakpoint.medium]: {
 width: '50%',
 },
 },
 }))(MyComponent);
 ```

- Define tricky fallback properties in themes.

> Why? Many CSS-in-JavaScript implementations merge style objects together which makes specifying fallbacks for the same property (e.g. `display`) a little tricky. To keep the approach unified, put these fallbacks in the theme.

```js
 // bad
 export default withStyles(() => ({
 .muscles {
 display: 'flex',
 },

.muscles_fallback {
 'display ': 'table',
 },
 }))(MyComponent);

// good
 export default withStyles(({ fallbacks }) => ({
 .muscles {
 display: 'flex',
 },

.muscles_fallback {
 [fallbacks.display]: 'table',
 },
 }))(MyComponent);

// good
 export default withStyles(({ fallback }) => ({
 .muscles {
 display: 'flex',
 },

.muscles_fallback {
 [fallback('display')]: 'table',
 },
 }))(MyComponent);
 ```

- Create as few custom themes as possible. Many applications may only have one theme.

- Namespace custom theme settings under a nested object with a unique and descriptive key.

```js
 // bad
 ThemedStyleSheet.registerTheme('mySection', {
 mySectionPrimaryColor: 'green',
 });

// good
 ThemedStyleSheet.registerTheme('mySection', {
 mySection: {
 primaryColor: 'green',
 },
 });
 ```

---

CSS puns adapted from [Saijo George](https://saijogeorge.com/css-puns/).

一键复制编辑原始数据按行查看历史

Antonio Erdeljac 提交于 2018年01月10日 16:08 +08:00 . [guide] [css] Fixed Italic subtitle in css-in-js README.md