はてなブックマーク

<blockquote class="totsuzennoshi"> <p>突然の死</p> </blockquote> <blockquote class="totsuzennoshi"> <p>引用スタイル</p> </blockquote> <blockquote class="totsuzennoshi"> <p>引用スタイル・文字長め</p> </blockquote> .totsuzennoshi { overflow: hidden; font-family: serif; line-height: 1.25; } .totsuzennoshi:before, .totsuzennoshi:after { display: inline-block; width: 1em; vertical-align: top; word-break: break-all; } .tots

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

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

文字が溢れたら「...」を出すのは text-overflow: ellipsis がありますが、一行の場合にしか利用できません。二行目に「...」を出すのは、 -webkit-line-clamp というのがありますが、クロスブラウザでは利用できません。 CSSだけで実現するのは不可能だと思ってたんですけど、出来ちゃいました。 実物はこちらでご確認ください。 .lineclamp { /* config */ line-height: 1.5; height: 3em; background-color: #fff; /* config end */ position: relative; padding-right: 1em; overflow: hidden; } .lineclamp:before { content: "..."; position: absolute; righ

英語版はこちら。 OOCSSとは異なり、CSSでちゃんとオブジェクト指向を実現するための方法について解説します。 0. まず「オブジェクト指向」とは 「オブジェクト指向」はIT業界を支えている重要なパラダイムのひとつで、JavaScriptを含む様々なプログラミング言語でサポートされています。特徴としては「型」や「クラス」といった雛形を持ち、雛形から生成された「インスタンス」とクラスとを区別します。 クラスとインスタンスとを区別することで、長期的にメンテナンスしやすいプログラムにすることができます。クラスを修正したり、インスタンスに変更を加えたり、それぞれ自由に拡張できます。 こういったオブジェクト指向プログラム言語（OOPL）に共通の特徴は、CSSでは見られることがありませんでした。2008年にOOCSSという手法が登場した後もです。 それも今日でお終いです。さっそく見ていきましょう。

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

ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。