はてなブックマーク

この投稿は Increments Advent Calendar 2017 の13日目の記事です。Picostyle という CSS in JS ライブラリを自作しているので、その説明と作った理由について述べます。 CSS in JS 今更語る必要はないと思いますが、CSS はとにかく言語仕様が貧弱でメンテナンス性が乏しい言語です。また、アプリケーションの状態に合わせて GUI が変化するような実装をする際は JavaScript を利用する必要があり、CSS と JavaScript 間でその値を共有したいことがあります。 これらの問題を解決するために、JavaScript コード内にスタイルに関する記述を含めてしまおうというアプローチが CSS in JS です。Facebook の Christopher Chedeau というエンジニアが「React: CSS in JS」という、

この投稿は Increments Advent Calendar 2017 の5日目の記事です。3日目の @htomine に続き、記事ページのデザインについて説明する予定でしたが、リリースブログ と内容がかぶるので、この記事では記事ページのデザイン実装について述べます。 Qiita の記事ページで利用した CSS の比較的新しい機能は以下の2つです。 CSS Grid Layout Module position: sticky これらの紹介と、Qiita での使い方を解説します。 CSS Grid Layout Module CSS Grid Layout Module (以下 CSS Grid) とはその名の通り、CSS でグリッドレイアウトを実現する仕様です。display: grid という display プロパティに新しい値が追加され、その宣言がされている要素にグリッドレイア

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて

昨日は「stylelintとは何か」ということと、既存のCSSリンターと比べたときの特徴、CLIからstylelintを実行する方法について述べました。今日は、stylelintの数多くあるルールを組み合わせて設定ファイルを作る方法について述べます。 stylelintの設定ファイル stylelintの設定のオブジェクトは cosmiconfig というパッケージを使って読み込まれます。stylelintの場合、以下のファイル名、形式で設定ファイルを作成できます。僕は、JSON形式で .stylelintrc という名前で作ることが多いです。 package.json 内の stylelint プロパティに記述する .stylelintrc ファイル（JSON or YAML） JSオブジェクトとして module.exports された stylelint.config.js ファイル

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

PostCSSには2日目で説明した、ASTを簡単に操作するためのAPIが用意されています。ASTはJavaScriptのオブジェクトなので、JavaScriptの構文で直接変換させることもできますが、より便利に、そして効率の良い処理をするためにも提供されているAPIを使います。 また、PostCSSの全てのAPIはAPIドキュメントで確認することができます。 ノードの種類 まずはASTのノードの種類です。PostCSSのASTのノードは以下の5つです。 Rootノード: ASTの1番上のノード（Rootノードは親ノードがない） Ruleノード: 1つのルールセット AtRuleノード: 1つの@ルール Declarationノード: 1プロパティ宣言 Comment: 1つのコメント これらは実装的には PostCSSの Node クラスを継承したもので、Node.type を参照すること

PostCSSプラグインの開発ガイドライン PostCSSのプラグインを開発するためのガイドラインがあるので、そこからいくつか紹介します。 パッケージ名に postcss- プリフィックスを付ける 名前を明確にするために postcss- プリフィックスをパッケージに付けたほうが良いです。（e.g. postcss-mixins, postcss-simple-vars）ただし、Autoprefixerやstylelintのようにそれ自体がPostCSSのプラグインとしてだけではなく、独立したツールの場合は必須ではありません。 一つのことを上手くやる Unix philosophy の1つですね。 postcss-pluginキーワードをpackage.jsonに書きましょう npmパッケージとして作られる場合は、package.jsonにpostcss-pluginキーワードを指定するこ

$ node parse.js Root { raws: { semicolon: false, after: '\n' }, type: 'root', nodes: [ Rule { raws: { before: '', between: ' ', semicolon: true, after: '\n' }, type: 'rule', nodes: [ Declaration { raws: { before: '\n ', between: ': ' }, type: 'decl', parent: [Circular], source: { start: { line: 2, column: 3 }, input: Input { css: '.qiita {\n color: #fff;\n background-color: #4ea30a;\n}\n', id: '<i

このAdvent Calendarについて 一人React.js Advent Calendar 2014 のマネをして、PostCSSについてAdvent Calendar形式で説明していきます。「PostCSSとは何か」や、実行の方法のような基本的なところから、PostCSSプラグインの紹介、PostCSSのAPIを使ってプラグインやツールの作り方 といったところまで書いていこうと思います。 僕はPostCSSを開発当初から追いかけていて、自分でいくつかプラグインやツールを作ったり、WEB+DB PRESS に寄稿したり、勉強会などで発表したりしています。このAdvent Calendarの大まかな流れは、東京Node学園祭2016 での発表と同じで、基本的な使い方とPostCSSのプラグインとAPIを追加したものとなります。 「PostCSS: Build your own CSS

Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、@Jxckさん主催で行われた次世代WebカンファレンスでCSSのセッションに登壇させていただきました。（動画） セッション中に@cssradarさんに「morishitterはどうやってCSSを覚えたのか」と聞かれ曖昧にしか答えられなかったので、 自分が今までどうやってCSSを学んできたのか を振り返ってみる。 黎明期 プログラムを書き始めたのは3年半ぐらい前からだと思う。PHPでWebアプリを書いたのがはじめで、そのときにBootstrap v2をベースに何もわからないまま、雑にCSSを書いた。 BootstrapのようなCSS

CSSfmtという、CSSとSCSSのコードを自動整形するツールをつくった。 使い方はREADMEを見たらわかると思う。Atom, Sublime Text, Vim, Emacs用のプラグインがあるので、エディタで使うのがおすすめ。コマンドラインからも使える。 atom-cssfmt sublime-cssfmt vim-cssfmt cssfmt.el AtomでCSSfmtが動いている様子： なぜつくったのか チーム開発において、コードのフォーマットが統一されていないことがある。 フォーマットの小さな違いはわざわざ指摘するのもめんどうだし、指摘されても嫌な気分になる。なので、コードをあるルールに従って自動で整形するツールの導入は必須だと思う。 CSSコードの整形ツールはいくつかある。CSS BeautifyやCSScomb、stylelintでも可能だ。 これらのツールとCSSfmt

.hoge color red &:hover color blue ``` CSS っぽい書き方とインデントの書き方ができるが、拡張子は `.styl` のみで、記法を混在させることもできる。 ## 変数と演算 変数に値を代入しておくことで、変数名で任意の場所から値を参照することができる。 ```sass base-color = #00a6fc .title color base-color ``` `@` をつけると、直前のそのプロパティを参照することもできる。かっこ必要。 演算もできる。 ```sass .container width 100% .sidebar width (@width * 0.3) ``` ## 条件分岐と繰り返し ### if / else 文 ```sass liquid = true .hoge if liquid width 100% else wi

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?