BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
Graspを使ったJavaScriptのリファクタリング
Refactoring your JavaScript code with Grasp | Grasp - JavaScript structural search, replace, and refactor という記事では、Grasp を使ったJavaScriptコードのリファクタリングについて書かれています。 この記事は Refactoring your JavaScript code with Grasp | Grasp - JavaScript structural search, replace, and refactor の簡単な紹介です Grasp は JavaScript ASTを元にgrepのような検索、sedのような置換などを行えるコマンドラインツールです。 GraspはNodeで(実際にはLiveScriptで)書かれているツールで npm 経由でインストールできま
Backbone-Eye·Backboneアプリを開発するならFirefoxでいこう！ MOONGIFT
これは面白い！ Webアプリを開発する際に注目を集めているフレームワークBackbone。あまり厚くない仕組みになっているので理解はしやすいのですが、それでも開発時には色々難問にぶつかることがあります。そこでDevtoolsのような開発ツールが役立ちます。 さらにそれを一歩進めてBackbone専用に特化させたのがBackbone-Eyeになります。Firebug専用のツールになっており、Firefoxに元々含まれている開発ツールでは動きませんのでご注意ください。 インストール インストールはMozilla Add-onsから行えます。Firebugも忘れずにインストールしましょう。 インストールしたらBackboneアプリケーションを開きます。 使い方 こちらはサンプルのBackboneアプリケーションです。Firebugを開きます。 Firebugを開くとBackbone-Eyeのタブ
大規模サイトにおける本当は怖いCSSの話
This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-struc
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
『StyleDoccoによるCSSスタイルガイドの導入』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、アメーバ事業本部 teens事業部の谷です。業務ではフロントエンドデベロッパーとして、主にHTML/CSSの設計・実装をおこなっています。 今回は、以前斉藤が書いた「モバイル時代におけるCSSの設計と実装」という記事で触れられていたコンポーネントリストもといスタイルガイドについてのお話です。 スタイルガイドの事例と、スタイルガイドを生成するツール StyleDocco の紹介をします。スタイルガイドとは先の記事より引用すると、ページ上の部品（コンポーネント、モジュール）を集めたリスト、ページのことです。どれがコンポーネントで、どれがモジ
CSSの命名規則にBEMを取り入れてみる - dskd
公開日2013-12-02タグAdvent CalendarBEMCSSHTML今年もあと一月ということでブログをリデザインしました。ということでこの記事はBEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。 BEM って何？ BEM とは Block, Element, Modifier の頭文字をとったもので、フロントエンド設計において命名規則やモジュールの管理に前述の３種類の区分を取り入れたものを言います。今回はタイトルにもある通り、CSS の命名規則に BEM を取り入れてみるということで、BEM な CSS について記載します。 BEM るとどういう良いことがあるの？ いろんな人がすでに書いているので別エントリを参考になさってください。あるいは、今回の Advent Calendar に参加した方のエントリも参考になるかと思います。
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
チャットワークがLESSを使う理由 | チャットワーククリエーターズブログ
ChatWork デザイン部の赤堀巴絵です！ ChatWork Advent Calendar５日目を担当します〜。 ご存知の方もいらっしゃると思いますが、チャットワークアプリ側はLESSで運用されています。なんでLESSで運用してるの？と聞かれることがあるのでブログで紹介したいと思います。 チャットワークがLESSを選んだ経緯まずCSSプリプロセッサの導入を社内で検討し導入しようとなった時期が2011年11月頃でした。導入にあたって問題になったことがありました。 社内のOSの開発環境がWinとMacでバラバラ社内でCSSプリプロセッサの知識が浸透していないまず、SassだとみんなにRubyをいれてもらうというハードルがありました。スタイルシートはデザイナーもコーダーもシステムエンジニアも触る状況だったので全員の環境に合わせて構築するのが難しいと考えました。 また、社内でまだCSSプリプロ
7つの習慣×Toggl！自分の時間の使い方を4つの領域で見える化しよう！
「7つの習慣」という本では、“緊急度×重要度”で時間の使い方を4つの領域に分類するというものが提唱されています。 満足と感じる人生を送るためには、このうち第二領域に属する時間を増やすことが大切となってきます。 そしてそのために必要なのは、今の自分の時間の使い方を4つの領域で分類した時にどのようなバランスになっているのか、を見える化することです。 JMatsuzakiさんは日頃、TaskChute2というツールにてご自分の行動記録を取っています。 タスク管理ツール・TaskChute2 (C) そしてTaskChute2に備わっている機能について工夫を凝らし、ご自分の時間の使い方を4つの領域で可視化できるようにしたのです。 Togglでも同じことができないか？ これはぜひ真似させていただきたいテクニックだったのですが、どうしても私は生活スタイルの性質上TaskChute2を使うのが難しい環境
持ち物全てを一度に見渡せるくらい"断捨離"して、「家の中で物を探す時間」をなくす。 - 僭越ながら
2015/3/9追記：インテリアや収納の本を読んで、気に入ったアイデアをメモするブログを始めました！ インテリア・収納の本をたくさん読む！ブログ 2015/3/29追記：この記事↓もおすすめです。 sclo-b.hatenablog.com sclo-b.hatenablog.com sclo-b.hatenablog.com sclo-b.hatenablog.com 去年の暮れに家中の断捨離をした我が家。 結局１ヶ月間くらいかかっちゃいましたが、家中全てに目を通し、スッキリすることができました。 ※ちなみに、断捨離の経過をTwitterでつぶやくという企画をしていましたが、途中で辞めました。いちいち捨てるものについてつぶやくなんてことはせず、一気に集中して取り組む方がよかった（笑） そんな私の断捨離のやる気をアップさせた本があります。 「もうやだ〜」ってなった時、 「これ捨てるかどうか
朝3時に起床する『超朝型』な人の、1日の過ごし方と時間術を参考にする。 - 僭越ながら
2017/3/10追記：今はすっかり3時起き生活が習慣になっています。私の3時起き生活について書きました↓。 sclo.hatenablog.com sclo-d.hatenablog.com bujo-seikatsu.com 今年の私の目標は毎日朝活すること。今のところ続いてます！手帳に習慣チェックシートのページを作って、朝活できたら◯印つけています。（参考：【習慣リストに○×チェック⇒ポイント化し集計⇒到達具合を棒グラフに】「時間/手帳/朝活」について本気で勉強する【6】 - 僭越ながら【1テーマの本を30冊読んで勉強するブログ】） ※ちなみに、手帳を元旦にもうひとつ買ってしまいました（[asin:B00C5RI1KM:title]）。この記事（【自分にふさわしい手帳を選ぶ方法】「時間/手帳/朝活」について本気で勉強する【4】 - 僭越ながら【1テーマの本を30冊読んで勉強するブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今必要なCSSアーキテクチャ
Thinking about CSS Architecture
モダンなCSS設計パターンを考える