タグ

2018年8月24日のブックマーク (8件)

  • RSCSS というCSS設計について - Qiita

    以下、ブログに書いたのとほぼおなじ内容だけどこっちにも転載してみます。 github: https://github.com/rstacruz/rscss githubのREADMEをドキュメント化したもの: http://ricostacruz.com/rscss/index.html (このドキュメント自体がRSCSSの実践例になってる) しばらく CSS とか追ってなかったので、触るにあたって「むやみにCSS書いてたら後で確実に死ぬし、そういえばなんかOOCSSとかあったな」と思っていろいろ調べてたら OOCSS の他にも SMACSS とか BEM とか SuitCSS とか FLOCSS とかなんかいろいろ出てきて大変でした。たしか SMACSS くらいまでは記憶があるんだけど…。 で、どうもどれもしっくり来ないのでさらに調べてみると RSCSS というものを発見。「フレームワー

    RSCSS というCSS設計について - Qiita
    moqada
    moqada 2018/08/24
  • ECSSの概要と考え方のまとめ - Qiita

    ECSSというOOCSSとはほとんど反対のアプローチをするCSSの構成案があります。製品によってデザインが大きく異なるWebサイトに向いているのかなと個人的には考えています。あるいは、うまく共通化をすることができれば大規模なWebサイトにも適応可能ではないかなと期待しています。 Enduring CSS 案件で使いたいなと思ったのですが、あまり広く知られているものでもないですし、検索しても該当する記事はまだまだ少なかったりします。 公式サイトを読むのが一番いいのですが、ボリュームがあり、さらに英語であることを考えるとそれも難しい。というわけで、ECSSの概要と考え方を日語で比較的短い文章でまとめることにしました。 このドキュメントの目的はECSSを詳しく調べたくなったり、実際に使い始めるためのきっかけになることです。 以下の文章の最新版はGitHubにアップしています。 ECSS End

    ECSSの概要と考え方のまとめ - Qiita
    moqada
    moqada 2018/08/24
  • 恐竜に教える現代のCSS – Part 2 | POSTD

    CSSプリプロセッサで新構文を使う 以上、CSSを使った基的なスタイル指定とレイアウトを取り上げました。次に、CSS自体を言語として扱いやすくするために作られたツールについて説明します。まずはCSSプリプロセッサです。 CSSプリプロセッサを使うと、別の言語で記述したスタイルをブラウザが解釈できるCSSに変換する、ということが可能になります。これは昔、ブラウザへの新機能の実装が遅々として進まなかった頃は重要事項でした。最初のメジャーなCSSプリプロセッサは Sass で、2006年にリリースされました。新しい簡潔な構文(括弧に代わるインデント、セミコロンを使わないなど)と、変数、ヘルパー関数、演算など、CSSには欠けていた高度な追加機能が特徴です。変数を伴うSaasを使って先の事例のカラーセクションを記述すると、次のようになります。 $dark-color: #4a4a4a $light

    恐竜に教える現代のCSS – Part 2 | POSTD
    moqada
    moqada 2018/08/24
  • 手足がもがれる感覚 - mizchi's blog

    最近乗り換えたもの Twitter: 夜フクロウ => Tweetdeck ブラウザ: Firefox(Vimperator) => Vivaldi RSSリーダー: Livedoor Reader => Inoreader ただ、これらにかなり不満がある。 情報には上流がある。情報の上流は、一次情報が乱雑に転がってる未整備の荒野みたいなもので、下流はその二次情報やまとめみたいなもの。キャズム理論でいうと、一次情報に接する人がイノベーター、イノベーターを観測する人がアーリーアダプター、イノベーターまたはアーリーアダプターによる編集物を閲覧する人がマジョリティという分類になると思う。 自分が思う近年のインターネットの問題は、一次情報を整理していたイノベーターやアーリーアダプターに対するサービスが格的に終わってきたこと。 最初に挙げた3つのサービスは、どれもサービス終了やサポート終了などの必

    手足がもがれる感覚 - mizchi's blog
  • 「Web Componentsが来る!CSS設計はどうなる?」―CSSのエキスパートに聞いてみた!

    「Web Componentsが来る!CSS設計はどうなる?」―CSSのエキスパートに聞いてみた! 白石 俊平(HTML5 Experts.jp編集長) こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか?まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー

    「Web Componentsが来る!CSS設計はどうなる?」―CSSのエキスパートに聞いてみた!
    moqada
    moqada 2018/08/24
  • cssnextを使うべきか - yuhei blog

    cssnextは、未来のCSS構文を今のブラウザでも解釈できるようにトランスパイルするPostCSSプラグインだ。そう聞くとさも、将来のCSSの書き方をそのまま先取りできる素晴らしいツールであるような印象を抱く。だが実際は、cssnextで表現できる形と標準の仕様は大きく異なっていることがある。cssnextを前提にして書いたコードは、未来のブラウザで違う挙動をする可能性があるということだ。 cssnextは、単一の機能を持ついくつかのPostCSSプラグインをまとめたプラグインセットだ。それぞれのプラグインは単に、ある構文を現在のブラウザでそれっぽく動くコードに変換することしかできない。対象とされている構文の多くは、現状の実装でフォールバックすることが不可能であるため、プラグイン作者の主観に基づいたなんちゃって実装に置き換えるしかないのだ。 そのため、cssnextを通して利用できる構文

    cssnextを使うべきか - yuhei blog
  • QiitaのCSS構成2017 - Qiita

    この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年では プリプロセッサーとして Sass (node-sass) を使っています。 プリプロセッサーとして PostCSS を使わなくなった最大の理由は @apply ルールが仕様から落ちた ことです。@apply は Sass でいう引数なしの mixin みたいなもので、Chrome の Canary では実装されていた時期がありましたが、消えてしまいました。 おそらく CSS Nesting Module や CSS Extend Rule も落ちると思

    QiitaのCSS構成2017 - Qiita
  • PostCSS + cssnext と CSS Modules を試す - アカベコマイリ

    このあいだ書いた記事の締めで予告したとおり Stylus からの移行先として PostCSS + cssnext を試す。 サンプル プロジェクト : examples-web-app/postcss 2017/12/29 追記 : cssnext は CSS.next と呼べるか? 記事のコメント欄にて @mysticateaさん から指摘され、cssnext の機能すべてを CSS.next と呼ぶのは妥当ではないと判断した。 w3c/csswg-drafts: CSS Working Group Editor Drafts [css-nesting] Status? · Issue #998 · w3c/csswg-drafts 私が CSS.next だと思っていた CSS Nesting Module は CSS Working Group (以下、csswg) の draft