不要再在JavaScript中写 CSS了

// Use them like any other React component – except they're styled!

<Title>Hello World, this is my first styled component!</Title>

</Wrapper>

结不雅：

Live demo(https://www.webpackbin.com/bins/-KeeZCr0xKfutOfOujxN)

这点是说你可以根据组件属性给组件设制揭捉?式，比如：

styled-components 今朝是 React 的趋势。

我们要理清一件工作：styled-components 只是 CSS 层面的高度抽象。它只是解析定义在 JavaScript 中的 CSS，然后生查对应 CSS 的 JSX 元素。

我不爱好这个趋势，因为存在很多误会。

我在 IRC、Reddit 和 Discord 上查询拜访了大年夜家应用 styled-components 的原因，整顿了一份选择应用 styled-components 常见原因的列表。我称之为 myths。

我把这条算作 myth 是因为它听起来就像之前这些问题没有获得解决一样。CSS Modules、Shadow DOM 还有很多定名协定(比如 BEM)已经早就在社区中解决了这个问题。

styled-components(就像 CSS modules)只是替身完成了定名的义务。人总会犯错，计算机犯错少点罢了。

俗话说：“工欲善其事必先利其器”。

Myth 2：styled-components 可以简明代码

平日伴跟着如下的例子：

<TicketName></TicketName> 
 
<div className={styles.ticketName}></div>

起首——关系不大年夜。差别根本可以忽视。

其次，说的也纰谬。字符数量取决于样式定名。

Styled-components

<TinyBitLongerStyleName></TinyBitLongerStyleName> 
 
<div className={styles.longerStyleName}></div>

这同样实用于本文之后的构造样式(Myth 5：给组件设置前提样式更简单)。styled-components 只是在多半根本组件的情况下稍胜一筹。

Myth 3：styled-components 使人更存眷语义化

前提就纰谬。样式和语义化代表着不呵９依υ?题，须要不消的应对筹划。引用 Adam Morse(mrmrs)的话：

内容语义化和视觉样式没有半点关系。当我用乐高建造器械时，我大年夜来不会想“这是引擎的一部分”，我想着“这是个 1×4 的蓝色乐高，我用来随便做什么都行”。不论水下潜水基地照样飞机——我清楚地知道怎么竽暌姑这个乐高块。

– http://mrmrs.io/writing/2016/03/24/scalable-css/

(强烈建议读一读 Adam 关于可拓展 CSS 的文┞仿)

我们还可以举个例子看看两者是否相干。

示例：

<PersonList> 
 
  <PersonListItem> 
 
    <PersonFirstName>Foo</PersonFirstName> 
 
    <PersonLastName>Bar</PersonLastName> 
 
  </PersonListItem> 
 
</PersonList>

语义化是要应用精确的标签构造标记。你能知道这些组件会衬着成什么 HTML 标签吗?不，你不知道。

和下面这段代码比较下：

本文的目标并不是阻拦读者在 JavaScript 中应用“CSS”或是 styled-components。styled-components 一个很棒的应用处景是：更好的跨平台支撑性。不要因为缺点的来由应用它。

<ol> 
 
  <li> 
 
    <span className={styles.firstName}>Foo</span> 
 
    <span className={styles.lastName}>Bar</span> 
 
  </li> 
 	
			 2/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

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


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