BugSnag's CSS Architecture
A few months ago, a number of designers and UI engineers, inspired by a popular blog post from GitHub’s Mark Otto, published articles on their approaches to writing and organizing CSS. In this post, I’m going to follow suit and take you through a breakdown of the tools we use, as well as the architecture of BugSnag’s CSS. There’s no surefire method for organizing CSS for all situations; the conten
Writing modular CSS (BEM/OOCSS) selectors with Sass 3.3
3710 days since last revision. Details are possibly out of date. Not long ago I wrote about my current modular CSS (BEM/OOCSS) naming conundrum. This is a shorter but related post about how those kinds of selectors can be produced with new features of Sass 3.3. Update 16th March 2014: The final release of Sass of 3.3 changed the way that suffix selectors could be written. This post (now much short
SassとBEM
SCSSファイルを整理し直している時、一気にBEMなクラスを使って書きなおしてやろうかとも考えていた。けど途中でSassならSCSSファイルの分割とその中での工夫によってBEMの構造を表現できそうと感じたので、今はそういう方向で試行錯誤している。実際BEMのウェブサイトでもファイルシステムを使ったBEMの表現方法という似た話が書かれているので荒唐無稽な考えではなさそう。 SCSSファイル名でblockを表現 その中でplaceholder selectorを使ってelementとmodifierを表現 外からはこのplaceholder selectorは使わない 既存のマークアップを利用したセレクターから@extendでBEM構造を関連付け HTMLファイルではBEMなクラスは振らない 必要な場合はシンプルなクラスを振る イメージはこのような感じ。HTMLでのマークアップの簡潔さは維持で
ちゃんとCSSを書くために - CSS/Sass設計の話
The document summarizes Hiroki Tani's presentation at the QCon Tokyo 2014 conference on modern CSS architecture. Some key points discussed include: - Adopting modular approaches like OOCSS and SMACSS to separate structure from skin/style and improve maintainability. - Using techniques like BEM naming to further decouple CSS from HTML. - Developing reusable CSS modules and components with flexible
csscss by zmoazeni
What is it? csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations. What is it for? One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It’s not a silver bullet, but it sure helps. To do that, you need to have all the rulesets in your head at all times. That’s hard, csscss is easy. Let it tell you what is
CSS Lint for Sass & Compass by Comcast
About Easily integrate Nicholas C. Zakas and Nicole Sullivan's CSS Lint into your projects that use the Compass CSS Framework by providing a compass csslint command line option. Installation Assuming ruby is installed on your system: $ gem install compass-csslint Note that this requires at least version 1.0.0.alpha.13 of Compass to work properly. Usage Run the following command from the root of yo
Sassの存在意義
SassはCSSの貧弱さを補うような便利機能について取り上げられることが多い。そのためその機能の奥に隠れているものについて触れられることはあまりない。例えば変数や四則演算、関数によって値に論理的な意味を持たせることができることとか。そういうCSSに足りない概念の導入できることとかももちろん周知させたいけど、それ以上にHTMLとCSSによるWebサイトの作成に新たなアプローチが加わることを周知させられればいいなぁと最近思う。Sassの存在意義というのはその辺りに見いだせるんじゃないかと考えているので。もう「CSSグラデーションのミックスイン！」とかスニペットでやれるようなことを推すのはやめたい(やめてほしい)。 現状ではWebサイトは以下の2つのアプローチでしか作成(更新)できない。 HTMLで文書をマークアップして、それに合わせてCSSにセレクターを書く CSSでデザインを定義して、それに
なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog
こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための LESS入門』にお邪魔してきました。 何を隠そう、いや、隠すことは何も無いのですが、私は今「クライアントサイドのバックエンド担当」として働かせていただいてます。つまるところ、デザイナさんやコーダさんが日々目の前の案件と戦い続けている中で、一歩引いたところからお助けユーティリティを作ったり、俯瞰して工程を見直してみたり、デザインにおける継続テストの仕組みを考えたり、新しく何かの役に立ちそうなものをどこからか引っ張ってきたりするお仕事です。 そんなお仕事の一環と
Our Living Style Guide (Writing maintainable HTML/CSS)
There's a lot of talk about scaling apps for growth. Scaling server architecture, writing code that will handle millions of requests etc. but I rarely hear about scaling HTML/CSS. By this I don't mean performance, I mean maintainability. Let's take a look at this fact: Facebook currently has 6498 color declarations! You don't get there unless there wasn't a plan for maintainable markup from the be
博天堂手机网址_首页
01 多年振动筛设备制造经验 专注标准检验筛，食品振动筛，化工振动筛，粉末振动筛，振动料斗等设备研发制造。 02 强大的研发团队 专业的振动筛开发工程师，精心设计，确保每一款产品都与众不同。 03 规模大、产能高 公司自有1500平厂房、50多名员工,流水线模具生产，年产能达上百台。 04 快速生产 专业模具流水线作业，模块化生产，确保批量产品的快速加工。 05 知名企业首选合作伙伴 世界500强国家等知名企业的合作伙伴。 06 量身定制 我们还能根据客户所属需求，为您定制专属的振动筛解决方案。 新乡市博天堂手机网址专业振动机械有限公司（原新乡市专业振动机械厂）是生产振动筛分设备的专业企业，公司坐落于新乡市北环寺庄顶工业区，滨临京广铁路、107国道，距省会郑州70Km，地理位置优越，交通、通讯设施便利。是一家集振动设备、振动源研发、生产、销售、服务于一体的现代化企业。 公司拥有丰富的振动筛
Sass&CompassでPath風のメニューを作ってみた - teppeis blog
2012/12/31 フォロー記事書きました: 1年前のSass/Compassを振り返ってみた みんな気になってしょうがないPathのアレを、Sass, Compass, CSS3 Animationsのお勉強をかねて作ってみました。Chrome, Safari, Firefox, IE10で動きます。 Demo: http://teppeis.github.com/menu-like-path/ Source: https://github.com/teppeis/menu-like-path 「CSSでPath風メニュー」っていうのは国内外ですでにたくさんあるので、気になったところなどSass&Compass寄りでいくつか書きます。 SCSSの記述量はCSSの約5分の1 今回作ったもので、SCSSで約300行（後述の自作ライブラリ含む）、コンパイル後はCSSで約1550行になりました
Sass で Singleton を実現し、安心してクラスを再利用する | nodot
この article は Less & Sass Advent Calendar の23日目のエントリーとして書かれています(あれれ?!)。 概要 CSSメタ言語を導入する目的の一つにリソース再利用性の実現というものがある。Sass の場合、mixin や extend によって実現している。特に extend によるスタイルの継承は強力である。 しかし再利用できるようなクラスをまとめたライブラリを import して利用すると、実際には使われていないクラスも出力されてしまい、ファイル容量が無駄に肥大する。使うクラスだけコピーするとか、使わないクラスは削除するなどの手動管理は手間がかかる。 そこでクラス自体を出力するような mixin を作れば、必要なクラス定義だけを include でき、不要な CSS コードを出力しなくて済む。しかし、extend したいクラスを必要になる度に inc
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する | CSS-EBLOG
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する カテゴリ：sass 2011年12月20日 22:45 この記事はLess & Sass Advent calendar 2011の20日目として書いている記事です。 sassを使った繰り返し処理の基本 sassにはプログラム言語と同じような処理が存在します。 その中でも繰り返し処理をピックアップして、ちょっとめんどくさい処理を簡単にする方法をご紹介します。 単純な繰り返し処理 sassには繰り返し処理に使える文として、@each と @for があります。 JSなどではおなじみですね。 使い方も、他のプログラム言語のものと同じです。 @eachは指定したリストを順番に処理するもの、@forは指定した数値の間で繰り返し処理をするものです。 また繰り返しではありませんが、めんどくさい処理をまとめる、という意味で@function
A List ApartのGetting Started with Sassという記事を訳しました
Typekitのデザイナーの人が書いたSassの入門記事、Getting Started with Sassを日本語に訳してみました。なおこれがLess & Sass Advent calendar 2011の初日のエントリになります。 内容的には今すぐ使える10のSCSSテクニック！ という類のものではなく、Sassのことを知らない人向けの記事です。そのためAdvent calendarの初日にも丁度良いような気もします。Sassの機能を網羅していたりはしませんが、簡単なグリッド・レイアウトのシステムを作るといったような実践性のあるコードを例に上げながら説明しているのでそこそことっつきやすいと思います。 この記事ではSassからCSSに変換するAIRアプリのScoutが取り上げられています。僕は存在は知っていたものの今まで使ったことなかったんですが、これはちょっとすごい感じですね。Rub
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - zmoazeni/csscss: A CSS redundancy analyzer that analyzes redundancy.
Clean out your Sass Junk-Drawer
https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP
Least – TOKI WOKI.
Primer
GitHub - vwall/compass-twitter-bootstrap: The twitter bootstrap ported to compass
