

flocssのプレフィックスについて  
下記のような場合どのフォルダにあるかわかるようにするためにc-やp-を付けるべきでしょうか？  
ただそうすると

[code]

    .is-fadeout {
        opacity: 0;
        transform: rotate(360deg);
        transition: .7s ease-in-out;
    }
    
    .is-fadein {
        transform: rotate(0deg);
        opacity: 1;
        transition: .7s ease-in-out;
    }
    
[/code]

.c-is-fadein  
となってプレフィックスが二つになってしまいます。  
どうしていますか？


CC BY-SA 3.0
2017-04-21T03:09:40.983
34175
2017-11-02T06:09:55.750
2017-04-21T06:46:04.410
20834
20834
question
css
flocssのプレフィックスについて


[FLOCSSのルール](https://github.com/hiloki/flocss)に厳密にしたがうと、そもそもご質問にあるようなスタイル付けの仕方は不正です。というのも`is-`プレフィックスのついているクラスがルールを持つことは禁止されているからです。これは`.is-***`そのものの持つルールが、他のモジュールのModifierのスタイルを汚染してしまうのを防ぐためです。

そこでFLOCSSでは、ObjectとStateを分離して別々のクラスを付けます。FLOCSSの規約からサンプルコードを引用すると、次のような感じです。

[code]

    <button class="c-button is-active">Save</button>
    
[/code]

[code]

    .c-button { ... }
    .c-button.is-active { ... }
    
[/code]

複数のObjectに同じStateがつく場合は、それぞれに対してスタイルをつけるべきなのでしょう。たとえばQiitaの[「FLOCSSを使ってCSSファイルを20,000行から9,000行にした話」](http://qiita.com/Atsss/items/4f9d98fb1d0546539c09)で紹介されているサイトのCSSではそうなっています。あるいは[こちらの回答](https://ja.stackoverflow.com/a/29790/19110)で挙げられているサイトのCSSでもそうなっています。[後者のサイトのCSS](http://tsukuruba.com/tsukuruba2015/wp-
content/themes/tsukuruba2016/css/2016.css)だと、

[code]

    .p-globalNavHorizontal__subnav.is-expanded.is-active { ... }
    
[/code]

というものさえありますね。


CC BY-SA 3.0
2017-04-29T04:30:52.360
34370
2017-05-04T02:40:28.827
2017-05-04T02:40:28.827
19110
19110
34175
answer