サイバーエージェントのコーディングルールを見ると、JS-には一切のcssを当ててはいけないと記載がありますが具体的にはどこまでのこと？

このようにcssのjs-fixed-boxにvisibility: hidden;があるのですが、サイバーエージェントのコーディングルールを見ると、JS-には一切のcssを当ててはいけないと記載があります。
$('#js-fixed-box').メソッドの部分にしか使ってはいけないというのが正しいでしょうか？

するとhiddenもクラスis-hiddenとis-visibleのようなを作って、

<header id="js-fixed-box" class="c-fixed-box u-flexiblebox-centaring-all u-gradient-red-boxshadow is-hidden"></head> このようにすべきでしょうか？ただこうするとクラス名だらけになるのでどうなのかなと思いました。

is-hiddenとis-visibleはｽﾗｲﾄﾞｼｮｰやパララックスなどでも使うのでutilityにしてしまって、すべてで使いまわしても問題ないと思いますか？
確かcssは、見出しなら見出し内など同じような要素間では共有してよいが、この場合は共有してよいと思いますか？

<header id="js-fixed-box" class="c-fixed-box u-flexiblebox-centaring-all u-gradient-red-boxshadow"></head>

/* fixed-boxのアニメーション */
[id="js-fixed-box"] {
    visibility: hidden;
}

[id="js-fixed-box"].visible {
    visibility: visible;
}

$(function(){
    $('#js-fixed-box').hide().addClass('visible');
});

$(window).scroll(function(){
    if($(window).scrollTop() > 400) {
      //ゆっくり表記する為のfadein
      $('#js-fixed-box').fadeIn('slow');
    }else{
      //ゆっくり隠す為のfadeout
      $('#js-fixed-box').fadeOut('slow');
    }
});