styled-components真的好嗎？

最近在學習react，然後遇到react中css該怎麼寫這個問題，上知乎上看了好多大牛都說styled-components好用是大勢所趨。

但我自己用了感覺體驗卻很差，我在這裡說說我為啥覺得styled-components不好用。

1.既然用了styled-components，那除了引用全局的css，還要引用組件的css嗎？如果用了，幹嘛不把組件的樣式全部寫到組件的css文件中呢？

好吧，如果不引用css，全靠styled-components來寫的話，我給大家看一下代碼

    render() {
    return (
        <HeaderWrap>
            <HeaderContainer>
                <LogoArea>
                    <h1>Mask的彈幕網站</h1>
                    <p style={{fontSize:30+"px",marginTop:10+"px"}}><LogoArrow></LogoArrow>記錄生活，不忘初心</p>
                </LogoArea>
                <LoginPanel>
                    <p onclick={this.showLoginBox}>登錄</p>
                    <p onclick={this.showRegisterBox}>註冊</p>
                </LoginPanel>
                <UserPanel>
                    <UserFigure>
                        <p><UserIcon src={this.props.userIconUrl} alt="user-figure"/></p>
                        <p>{this.props.userName}</p>
                    </UserFigure>
                    <UserMenu>
                        <UserOption>投稿</UserOption>
                        <UserOption>空間</UserOption>
                        <UserOption>註銷</UserOption>
                    </UserMenu>
                </UserPanel>
            </HeaderContainer>
        </HeaderWrap>
    );
  }

上面的代碼是我寫的網頁的一個header的代碼，我是想把它封裝成組件的。但是sass裡面的嵌套的寫法也不好使了，明明一個嵌套就搞定的事情，反而要定義兩個組件。可以看到幾乎所有容器都被用styled-components來定義了，styled-components的原理就是創建一個react里的component，但實際上有些容器所對應的樣式可能就1、2條，也要調用構造函數創建對象，我是覺得這樣很浪費資源，工作量也上升了。

2.styled-components寫完之後你不知道html元素是啥，ok，上面的例子你知道每個標簽對應html什麼元素嗎？你不知道。可讀性很差

3.在js里寫css沒有自動補全，樣式是在js里的標簽模板里寫的，所以沒有自動補全。可能可以設置吧，但我不會，寫css沒有補全真的累。。

4.生成的html可讀性也很差

這是生成的html文檔，可以看到每定義一個styled-component就會隨機生成一個class來綁定你定義的樣式，你看這些class根本不知道綁定的樣式是什麼作用，自己寫css的時候還是有一些語義上的定義的，比如clearfix

我就用了2天就感覺難受的不行，看了http://www.sohu.com/a/153351371_463987這篇文章，感覺很有共鳴，反正我是覺得styled-components真的不好用，大家看自己的個人喜好吧