不要再在JavaScript中写 CSS了

</ol>

Myth 4：拓展样式更轻易

v1 版本可以用 styled(StyledComponent) 拓展样式;v2 引进了 extend 办法来拓展已存在的样式，比如：

const Button = styled.button` 
 
  padding: 10px; 
 
`; 
 
const TomatoButton = Button.extend` 
 
  color: #f00; 
 
`;

这挺好。然则你可以在 CSS 中完成(或者应用 CSS 模块组合或 SASS 持续混淆 @extend)。

难道不比 JavaScript 简单?

Myth 5：给组件设置前提样式更简单

<Button primary /> 
 
<Button secondary /> 
 
<Button primary active={true} />

styled.Button` 
 
  background: ${props => props.primary ? '#f00' : props.secondary ? '#0f0' : '#00f'}; 
 
  color: ${props => props.primary ? '#fff' : props.secondary ? '#fff' : '#000'}; 
 
  opacity: ${props => props.active ? 1 : 0}; 
 
`;

应用 JavaScript 按前提创造样式表是挺强大年夜的，然则这也意味着样式难以懂得，比较以下 CSS：

button { 
 
  background: #00f; 
 
  opacity: 0; 
 
  color: #000; 
 
} 
 
button.primary, 
 
button.seconary { 
 
  color: #fff; 
 
} 
 
button.primary { 
 
  background: #f00; 
 
} 
 
button.secondary { 
 
  background: #0f0; 
 
} 
 
button.active { 
 
  opacity: 1; 
 
}

如许 CSS 更简短(229 VS 222 字符)，(小我认为)也更轻易懂得。此外，还可以用预处理器使 CSS 分组、更短：

button { 
 
  background: #00f; 
 
  opacity: 0; 
 
  color: #000; 
 
   	
			 3/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　政务区块链 vs 传统电子政务信息系统
            
            什么是电子政务电子政务是指当局经由过程信息通信技巧手段的密集性和计谋性应用组织公共治理的方法，旨在进步效力、加强当局的透明度、改良财务束缚、改进公共政策的质量和决定计划的科学>>>详细阅读


本文标题：不要再在JavaScript中写 CSS了
地址：http://www.17bianji.com/lsqh/36001.html
 1/2    1