js内联风格最佳实践

我知道你可以在React类中指定样式，像这样:

const MyDiv = React.createClass({
render: function() {
const style = {
color: 'white',
fontSize: 200
};
    

return <div style={style}> Have a good and productive day! </div>;
}
});

我应该瞄准这样做的所有样式，并没有在我的CSS文件中指定的样式吗?

或者我应该完全避免内联样式?

这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。

965253 次浏览
小开

style属性的主要用途是动态的、基于状态的样式。例如，您可以在进度条上基于某种状态设置宽度样式，或者基于其他内容设置位置或可见性。

JS中的样式限制了应用程序不能为可重用组件提供自定义样式。在前面提到的情况下，这是完全可以接受的，但当您更改可见特征时，尤其是颜色。

小开

我在React组件中广泛使用内联样式。我发现在组件中搭配样式非常清楚，因为组件有什么样式，没有什么样式总是很清楚的。此外，拥有Javascript的全部功能确实简化了更复杂的样式需求。

一开始我并不相信，但在尝试了几个月后，我完全转换了，并且正在将我所有的CSS转换为内联或其他js驱动的CSS方法。

Facebook员工和React贡献者“vjeux”的演示也非常有帮助——https://speakerdeck.com/vjeux/react-css-in-js

小开

内联样式的问题是内容安全策略(CSP)越来越普遍，不允许使用内联样式。因此，我建议完全避免使用内联样式。

< >强更新: 为了进一步解释，CSP是服务器发送的HTTP报头，用于限制页面上可以出现的内容。这只是进一步的缓解措施，可以应用于服务器，以阻止攻击者做一些顽皮的事情，如果开发人员编写了糟糕的网站

大多数这些限制的目的是阻止XSS(跨站点脚本)攻击。XSS是攻击者想办法在您的页面中包含他自己的javascript的方法(例如，如果我将我的用户名设置为bob<SCRIPT>alert("hello")</SCRIPT>，然后发布一条评论，当您访问该页面时，它不应该显示警告)。开发人员应该阻止用户向站点添加这样的内容，但是为了防止他们犯错误，如果CSP发现任何script>标记，就会阻止页面加载。

CSP只是对开发人员的额外保护级别，以确保如果他们犯了错误，攻击者不会对该站点的访问者造成问题。

所以这都是XSS，但是如果攻击者不能包含<script>标记，但可以包含<style>标记或在标记上包含style=参数呢?然后，他可能会改变网站的外观，使您被骗点击错误的按钮，或者出现其他问题。这不是什么大问题，但仍然需要避免，CSP可以为您做到这一点。

https://securityheaders.io/是测试CSP站点的一个很好的资源

你可以在http://www.html5rocks.com/en/tutorials/security/content-security-policy/上阅读更多关于CSP的信息

小开

我通常有与每个React组件相关联的scss文件。但是，我不明白为什么你不封装组件与逻辑，并查看它。我的意思是，你有类似的web组件。

小开

我所做的是为每个可重用组件提供一个唯一的自定义元素名称，然后为该组件创建一个CSS文件，特别是包含该组件的所有样式选项(并且仅针对该组件)。

var MyDiv = React.createClass({
render: function() {
return <custom-component style={style}> Have a good and productive day! </custom-component>;
}
});

在文件'custom-component.css'中，每个条目都以custom-component标签开始:

custom-component {
display: block; /* have it work as a div */
color: 'white';
fontSize: 200;
}
custom-component h1 {
font-size: 1.4em;
}

这意味着你不会失去关注点分离的关键概念。视图与样式。如果你共享你的组件，其他人更容易将其主题化以匹配他们网页的其余部分。

小开
最佳答案

目前还没有很多“最佳实践”。对于React组件，我们这些使用内联样式的人还在进行试验。

有许多不同的方法:React内联风格的库比较图

全有还是全无?

我们所说的“风格”实际上包括以下几个概念:

  • 布局- 元素/组件与其他元素/组件的关系如何
  • 外观- 元素/组件的特性
  • 行为和状态——元素/组件在给定状态下看起来如何

从状态样式开始

React已经在管理你的组件的状态，这使得状态和行为的样式很自然地适合与你的组件逻辑进行托管。

与其构建使用条件状态类呈现的组件，不如考虑直接添加状态样式:

// Typical component with state-classes
<li
className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />




// Using inline-styles for state
<li className='todo-list__item'
style={(item.complete) ? styles.complete : {}} />

注意，我们正在使用一个类来设置外观的样式，但不再使用任何.is-前缀的类来设置状态和行为。

我们可以使用Object.assign (ES6)或_.extend(下划线/lodash)来添加对多个状态的支持:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

定制和可重用性

现在我们正在使用Object.assign，使我们的组件可以用不同的样式重用就变得非常简单了。如果我们想覆盖默认样式，我们可以在调用站点使用props来实现，如下所示:<TodoItem dueStyle={ fontWeight: "bold" } />。实现如下:

<li 'todo-list__item'
style={Object.assign({},
item.due && styles.due,
item.due && this.props.dueStyles)}>

布局

就我个人而言，我不认为内联布局样式有什么令人信服的理由。有很多很棒的CSS布局系统。我就用一个。

也就是说，不要直接在组件中添加布局样式。用布局组件包装组件。举个例子。

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
className="col-xs-12 col-sm-6 col-md-8"
firstName="Michael"
lastName="Chan" />


// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
<UserBadge
firstName="Michael"
lastName="Chan" />
</div>

对于布局支持，我经常尝试将组件设计为100% width和height。

外观

这是“内联风格”辩论中最有争议的地方。最终，这取决于你设计的组件和你的团队对JavaScript的适应程度。

有一件事是肯定的，你需要图书馆的帮助。浏览器状态(:hover， :focus)和媒体查询在原始React中是痛苦的。

我喜欢镭，因为这些困难部分的语法是为SASS建模而设计的。

代码组织

通常你会在模块外部看到一个style对象。对于todo-list组件，它可能看起来像这样:

var styles = {
root: {
display: "block"
},
item: {
color: "black"


complete: {
textDecoration: "line-through"
},


due: {
color: "red"
}
},
}

getter函数

向模板中添加一堆样式逻辑可能会有点混乱(如上所示)。我喜欢创建getter函数来计算样式:

React.createClass({
getStyles: function () {
return Object.assign(
{},
item.props.complete && styles.complete,
item.props.due && styles.due,
item.props.due && this.props.dueStyles
);
},


render: function () {
return <li style={this.getStyles()}>{this.props.item}</li>
}
});

进一步的观察

我在今年早些时候的React Europe上更详细地讨论了所有这些:内联样式以及什么时候“只用CSS”最好。

我很高兴在你有新发现的时候帮助你:)点击我-> @chantastic

小开

James K Nelson在他的《Why You should not Style React Components With javascript》;信中指出，没有必要使用内联样式及其缺点。他的观点是，旧的无趣的CSS加上较少的/scss是最好的解决方案。他的论文中支持CSS的部分:

  • 可扩展的外部
  • 可分割(内联样式超越一切)
  • define_image_transformation
小开

根据您的配置，内联样式可以为您提供热重载。每次样式改变时，网页都会立即重新呈现。这有助于我更快地开发组件。话虽如此，我相信你可以为CSS + SCSS设置一个热重载环境。

小开

React中的style属性期望值是一个对象，即键值对。

style = {}将有另一个对象在它里面，如{float:'right'}使它工作。

<span style=\{\{float:'right'}}>Download Audit</span>

希望这能解决问题

小开

这真的取决于大你的应用程序，如果你想使用捆绑器像webpack和捆绑CSS和JS在构建和你想如何管理你的应用程序流程!最后，取决于你的情况，你可以做出决定!

在大型项目中，我对组织文件的偏好是分离CSS和JS文件，这样更容易共享，UI人员更容易浏览CSS文件，而且整个应用程序的文件组织也更整洁!

始终以这种方式思考，确保在开发阶段所有东西都在它们应该在的地方，正确命名，并且易于其他开发人员找到……

我个人会根据我的需要来混合它们，例如… 尝试使用外部css，但如果需要，React也会接受style，你需要将它作为一个对象传递给key value，如下所示:

import React from 'react';


const App = props => {
return (
<div className="app" style=\{\{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
Hello World...
</div>
)
}


export default App;
小开

对于某些组件，使用内联样式更容易。此外，我发现它更容易和更简洁(因为我使用Javascript而不是CSS)动画组件样式。

对于独立组件，我使用“扩展操作符”或“…”。对我来说，它清晰、美丽，在狭小的空间里也能工作。下面是我制作的一个加载动画来展示它的好处:

<div style=\{\{...this.styles.container, ...this.state.opacity}}>
<div style=\{\{...this.state.colors[0], ...this.styles.block}}/>
<div style=\{\{...this.state.colors[1], ...this.styles.block}}/>
<div style=\{\{...this.state.colors[2], ...this.styles.block}}/>
<div style=\{\{...this.state.colors[7], ...this.styles.block}}/>
<div style=\{\{...this.styles.block}}/>
<div style=\{\{...this.state.colors[3], ...this.styles.block}}/>
<div style=\{\{...this.state.colors[6], ...this.styles.block}}/>
<div style=\{\{...this.state.colors[5], ...this.styles.block}}/>
<div style=\{\{...this.state.colors[4], ...this.styles.block}}/>
</div>


this.styles = {
container: {
'display': 'flex',
'flexDirection': 'row',
'justifyContent': 'center',
'alignItems': 'center',
'flexWrap': 'wrap',
'width': 21,
'height': 21,
'borderRadius': '50%'
},
block: {
'width': 7,
'height': 7,
'borderRadius': '50%',
}
}
this.state = {
colors: [
{ backgroundColor: 'red'},
{ backgroundColor: 'blue'},
{ backgroundColor: 'yellow'},
{ backgroundColor: 'green'},
{ backgroundColor: 'white'},
{ backgroundColor: 'white'},
{ backgroundColor: 'white'},
{ backgroundColor: 'white'},
{ backgroundColor: 'white'},
],
opacity: {
'opacity': 0
}
}

2019年11月

在这个行业(一家财富500强公司)工作，我不允许做任何内联样式。在我们的团队中，我们认为内联样式是不可读和不可维护的。而且，在亲眼看到内联样式如何使支持应用程序变得完全无法忍受之后，我不得不同意这一点。我完全反对内联样式。

小开

你也可以使用StrCSS，它可以创建独立的类名等等!示例代码如下所示。你可以(可选)从Visual Studio市场安装VSCode扩展来支持语法高亮显示!

来源:# EYZ0

import { Sheet } from "strcss";
import React, { Component } from "react";


const sheet = new Sheet(`
map button
color green
color red !ios
fontSize 16
on hover
opacity .5
at mobile
fontSize 10
`);


export class User extends Component {
render() {
return <div className={sheet.map.button}>
{"Look mom, I'm green!
Unless you're on iOS..."}
</div>;
}
}
小开

你可以使用内联样式，但如果你在所有的样式中使用它们，你会有一些限制，一些已知的限制是你不能在那里使用CSS伪选择器和媒体查询。

你可以使用镭来解决这个问题，但仍然，我觉得随着项目的发展，它会变得很麻烦。

我建议使用CSS模块。

使用CSS模块，你可以自由地在CSS文件中编写CSS，不必担心命名冲突，它将由CSS模块负责。

这种方法的一个优点是，它为特定组件提供了样式化功能。这将为下一个开发人员创建更易于维护的代码和可读的项目架构。

小开

JSX中的样式与HTML中的样式非常相似。

# EYZ0 < br >

Div style="background-color: red;颜色:白色”

# EYZ0 < br >

div style=\{\{backgroundColor: '红色'，color: '白色'}}

小开

下面是JSX语法中基于布尔的样式:

style=\{\{display: this.state.isShowing ? "inherit" : "none"}}
小开

TLDR -使用css在js解决方案(如情感或样式组件)，享受最好的css和js所提供的

在css或scss文件中，很难管理动态样式。在内联样式标签中，不能使用媒体查询或伪选择器。

在JS中使用CSS，你可以享受两全其美。JS中的Css之于Css有点像React之于HTML。它允许在JS代码中以对象或字符串的形式编写css，并享受javascript生态系统的强大功能和工具。

到目前为止，js库中有一些受欢迎的、得到良好支持的CSS，包括Emotion、styles - components和镭。

让我们比较一下样式化简单元素时代码的样子。我们将设置一个&;hello world&;Div，所以它在桌面上显示大，在移动端显示小。

使用style属性

return (
<div style=\{\{fontSize:24}} className="hello-world">
Hello world
</div>
)

由于媒体查询在样式标签中是不可能的，我们必须向元素中添加一个className并添加一个css规则。

@media screen and (max-width: 700px){
.hello-world {
font-size: 16px;
}
}

使用Emotion的10 CSS标签

return (
<div
css=\{\{
fontSize: 24,
[CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
fontSize: 16
}
}
>
Hello world
</div>
)

Emotion还支持模板字符串和样式化组件。所以如果你喜欢，你可以这样写:

return (
<Box>
Hello world
</Box>
)


const Box = styled.div`
font-size: 24px;
${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
font-size: 16px;
}
`

CSS in JS"使用CSS类。

最佳实践

以下是我推荐的一些最佳实践:

  1. 在JS中使用CSS解决方案

  2. 在JS中构建你的样式代码与在一般情况下构建你的代码非常相似。例如:

  • 识别重复的样式，并将它们写在一个地方。在Emotion中有两种方法:
// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
BUTTON: css`
background-color: blue;
color: white;
:hover {
background-color: dark-blue;
}
`
}


// SomeButton.js
const SomeButton = (props) => {
...
return (
<button
css={COMMON_STYLES.BUTTON}
...
>
Click Me
</button>
)
}


// Option 2 - Write your common styles in a dedicated component


const Button = styled.button`
background-color: blue;
color: white;
:hover {
background-color: dark-blue;
}
`


const SomeButton = (props) => {
...
return (
<Button ...>
Click me
</Button>
)
}
  1. React编码模式是封装组件- HTML和JS控制组件被写入一个文件。这是你的css/样式代码样式的组件属于。

  2. 必要时，为组件添加样式道具。通过这种方式，您可以重用在子组件中编写的代码和样式，并通过父组件对其进行定制以满足您的特定需求。

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])


const SmallButton = (props)=>(
<Button
...
stl={css`font-size: 12px`}
>
Click me if you can see me
</Button>
)


const BigButton = (props) => (
<Button
...
stl={css`font-size: 30px;`}
>
Click me
</Button>
)
小开

有时候，我们需要从组件中样式化一些元素，但如果我们必须只显示该组件的一个元素，或者样式是如此之少，那么我们不使用CSS类，而是在react js中使用内联样式。reactjs的内联样式和HTML的内联样式是一样的，只是属性名略有不同

使用style=\{\{prop:"value"}}在任何标签中写入样式

import React, { Component } from "react";
import { Redirect } from "react-router";


class InlineStyle extends Component {
constructor(props) {
super(props);
this.state = {};
}


render() {
return (
<div>
<div>
<div
style=\{\{
color: "red",
fontSize: 40,
background: "green"
}}// this is inline style in reactjs
>


</div>
</div>
</div>
);
}
}
export default InlineStyle;
小开

最好的做法是使用一个已经为你完成了艰苦工作的库，并且当你进行切换时不会杀死你的团队，正如这视频中最初接受的答案所指出的那样(它仍然是相关的)。也只是为了了解趋势这是一张非常有用的图表。在做了自己的研究之后，我选择在我的新项目中使用Emotion，它被证明是非常灵活和可扩展的。

鉴于2015年投票最多的答案是镭，现在已经降级为维护模式。因此，增加一些备选方案似乎是合理的。帖子停止使用镭建议使用几个库。每个链接的网站都有现成的示例，所以我将避免在这里复制和粘贴代码。

  • 情感是受到styled-components的“启发”，在js中使用样式，可以是框架不可知的，但肯定促进了它的React库。情感一直保持最新的这篇文章。
  • styled-components具有可比性，并提供许多与Emotion相同的功能。也在积极维护。Emotion和styles组件都有相似的语法。它是专门为使用React组件而构建的。
  • 这是js中另一个与框架无关的样式选项，尽管它确实有许多框架包，其中包括React-JSS。
小开

无论如何，内联css是不推荐的。我们在基于JSS的项目中使用了样式组件。它通过在组件上添加动态类名来保护css覆盖。您还可以根据传递的道具添加css值。

小开

我更喜欢使用样式化组件。为设计提供了较好的解决方案。

import React, { Component, Fragment } from 'react'
import styled from 'styled-components';


const StyledDiv = styled.div`
display: block;
margin-left: auto;
margin-right: auto;
font-size:200; // here we can set static
color: ${props => props.color} // set dynamic color by props
`;


export default class RenderHtml extends Component {
render() {
return (
<Fragment>
<StyledDiv color={'white'}>
Have a good and productive day!
</StyledDiv>
</Fragment>
)
}
}

提交答案