自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
スタイルシートの統計情報を出力するNode Packageを作った。 t32k/stylestats Node.js 0.10以上が必要で、CLIだとこんな感じの情報を出力してくれる。 $ npm install -g stylestats $ stylestats path/to/stylesheet.css StyleStats! ┌────────────────────────┬──────────┐ │Size │ 498.0B │ ├────────────────────────┼──────────┤ │Rules │ 7 │ ├────────────────────────┼──────────┤ │Selectors │ 11 │ ├────────────────────────┼──────────┤ │Simplicity │ 63.64% │ ├───────
by Toby Ho on 1/23/2014 Hello, and welcome to the first post of Small.js! This post will cover the basics of Component. Component is a frontend Javascript package manager developed by the prolific Tj Holowaychuk. It embodies the philosophy of small modules and is designed to manage assets as well as Javascript. Currently, there exists over 1600 "components". Although there are more popular JS pack
スタイルガイドのDOMにスタイルが当たってない…。本当は該当のCSSが当たった状態でボタンが表示されるはずなのに、普通のリンクになってる…。 原因はどうやらこれだった。 Error in resulted files when using the --preprocessor option on stylus files · Issue #25 · jacobrask/styledocco 2年前のissueなのに4ヶ月前の返答。要はstyledocco --preprocessor "stylus -p"を渡してあげれという事ですね。stylus -pとpオプション渡さないと、標準出力でのメッセージをそのまま渡してしまうので、CSSとして読み込めないということらしい。 おかげで、ちゃんとDOMにスタイルが当たるようになりました! あともうissueがcloseされてはいるんですが、Chr
Ganam Style Ganam style is a style guide render, inspired by kneath/kss. It is written in nodejs, helps web developers to write a style guide. Installation It's easy to install ganam with npm: $ npm install ganam IF YOU ARE NOT A DEVELOPER, YOU MAY NEED ganam-cli INSTEAD: $ npm install ganam-cli -g FIND MORE DOCUMENTATION AT http://lab.lepture.com/ganam-cli/. Syntax Writing a style (stylus, css) t
Overview This is a demo of kss-node's built-in styleguide generator. The module is essentially a reimplementation of the KSS Ruby parser, in Node: Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format. It is not a preprocessor, CSS framework, naming convention, or s
Health These insects carry enough bacteria to the cause Ezio Palermo June 30, 2019 5677 Struggling to sell one multi-million dollar home currently on the market won’t stop actress and singer Jennifer Lopez from expanding her property collection. Lopez has reportedly added to her real Health Morning people may have the lower breast cancer risk Ezio Palermo June 30, 2019 5879 Struggling to sell one
CSS Lint v0.9.9 is now available both on the command line and at the web site. This release is mostly a maintenance release with a few small features added in. This lays the groundwork for an eventual 1.0.0 release, but that doesn’t preclude the possibility of a 0.9.10 release before then. There’s still a lot of work to do on the parser to make it fully CSS3 compliant, and if you’re interested in
This page has moved to http://stylus-lang.com/
less-1.2.0-whats-new.md LESS 1.2.0 Now available on http://lesscss.org and NPM. This release opens up the powerful branching capabilities of mixin guards and pattern-matching as an alternative to conditional statements. In trying to stay as close as possible to the declarative nature of CSS, LESS has opted to implement conditional execution via guarded mixins, in the vein of @media query feature s
Stylusというのがあります。インデントによる構造化や、Mixin など、CSS そのままではめんどくさいものを、うまいことパースして CSS を生成してくれるツールです。 Stylus は、Node.js上で動き、 npm経由でインストールできます。Node.js は必須、npm は無くても(たぶん)いけるけど、あったほうが楽です。ちなみに、npm のインストールはLinux や、Mac だと苦労しないと思いますが、現時点(2011/11)で Windows ではめんどくさいかも。 では、さっそく、Stylus のインストール(Node.js と npm は省略)。npm が使える状態で以下のコマンドを打ちます。$ npm --global install stylus "--global" をつけているのは、実行ファイルを使いたいからです。"--global" をつけておけば、パスの
LESSとSassを比較していました LESS « The Dynamic Stylesheet language Sass - Syntactically Awesome Stylesheets ここ半年ぐらいの間に，名前を聞くようになったSassと，それに影響されて作られた後発のLESSを比較検討したところ，以下のような理由からLESSを使うことにしました． 今回は，自分の作業の効率化はもちろん，将来的にチームでシェアできる技術になり得るか，という観点から選択しています． LESSを選ぶ理由 LESS.appというGUIツールが存在する node.jsで動くWebフレームワークExpressがLESSに標準対応している(らしい) 文法がSassより素直＆シンプルで慣れてもらいやすそう この中でも，LESS.appの存在が一番の決め手となって，マイナーなはずのLESSに軍配が上がってしま
CSS Radar For Frond End Developers Recent Articles LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr HTML5 Boilerplate 15 Mar ターミナルを使いこなす 13 Feb Gitでバージョンコントロール 29 Jan Read More If it ain’t broken, don’t fix it. 壊れてないなら、直す必要はない。 CSSは追加してほしい仕様はあるけど、壊れている、とまでは感じない。プログラミングの何たるかをまったく理解していなかった私にも簡単に覚えられた。 SASSやLESSのようなCSSの拡張が完全に悪だとは思わないが、絶対に必要だとも感じない。 でも、知っておくともっとシンプルに、もっとパワフルに、もっと素早くCSSを書くことができる、プラスアルフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
