非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
CSSを長生きさせるための設計手法まとめ（*ECSSあり） - Qiita
はじめに CSSの設計手法については、数年前からたくさんのブログや書籍で詳細に取り上げられています。 今回はバックエンドからフロントエンドに来られたエンジニアさんや、コーディングに知識のあるディレクター・企画職の方にナレッジを共有したいと思い、まとめてみました。 定番のOOCSS,SMACS,BEMに加え、2016年に普及し始めたECSSについても取り上げます。 なぜCSS設計が必要なのか CSSは単純で多くの人が簡単に操作することができるという素晴らしい特性を持っています。 しかしその特性のために、複数人の関わる大規模なサービスや、長期的なメンテナンスが必要なサービスではすぐに破綻してしまう(なんでCSSすぐ死んでしまうん？)という弱点も抱えています。 大規模なサービスの初期デザインをコーディングに起こす際は、自分以外の人でも容易に理解できてメンテナンスしやすい設計を行う能力が必須です。
CSS設計を勉強するならまずこれを見たら良いかも - Qiita
HTMLを覚えて3周年経ちました、@sueshinです。 3周年とか枕詞に使っている時点でお分かりかと思いますがチキン野郎です。はい。 お手柔らかにお願いしますmm 私が担当するジョブセンスリンクは9年程たった歴史のあるWEBサイトです。 トップページで使用されているCSSセレクタの数は約3000で、行数でいうと軽く10000行は超えていると思います。 そんな、あふれんばかりのレガシーコードに愛憎の念が入り混じっている今日この頃です。 現在私は師走ということで、来年に向けてCSSの整理をしないとと思い、CSS設計を勉強しています。 ただ、情報の多くはWEBに上がっている一方で、何から手をつけたら良いか初めはわからなかったので、 見渡してCSS設計を学習できるようにざっくりまとめて見ました。 CSS設計のゴール 何事もゴールを決めないことには走れないですよね。 「CSS Architectu
Sass を利用したオブジェクト指向 CSS を使おう（翻訳） - Qiita
少し前の記事ですが、2014年10月26日に The Sass Way に掲載されていた OOCSS（オブジェクト指向CSS） の記事が実践的でとても役に立ったので紹介したいと思います。 以下、こちらの記事の翻訳となります。 "Using Object-Oriented CSS with Sass" by Jaime Caballero （掲載許可いただいております） Sass を利用したオブジェクト指向 CSS を使おう（翻訳） Nicole Sullivan 氏は、2008年の Web Directions North で、最初にOOCSSを世界に紹介した。それ以降、CSSを系統立てるための最も重要なモジュラーシステムのひとつとして知られるようになった。 OOCSS は、SMACSS や BEM のような他のCSSメソッドと違うわけではない。それらはすべて、再利用できるモジュラーブロッ
OOCSS サンプルコード - Qiita
別の記事で OOCSS についての記事を翻訳しました が、ここでは実際にサンプルコードを載せたいと思います。 CSSの実装をするときは、普段から基本的に OOCSS の原則である 『構造と見た目の分離』 『コンテナーとコンテンツの分離』 に従って書くようにしています。 特にフォームまわりでは、同じ要素でも、選択状態にあるかどうかで色が変わったり、削除ボタンなどのアイコンを併置していたりなど、パターン化できるものが多く、OOCSS の考え方が役に立ちました。 前述の記事のようにすべてを extend で組み立てることを徹底したりはしていませんが、できるだけモジュールとして切り分けられるところは切り分けて、コードを書いています。 以下に、実際に使っているサンプルコードを載せます。 実例１：プレイスホルダーで『構造と見た目の分離』 これは、プレイスホルダーのみで『構造と見た目の分離』を実践した例
ulの左端を揃えたまま中央寄せする - Qiita
<div class="content-txt"> <p class="txt-center"> タイトル </p> <div class="ul-align-center"> <ul> <li>1行目</li> <li>２行目２行目</li> <li>３行目３行目３行目</li> </ul> </div> <p class="txt-right"> 右寄せ </p> </div> .content-txt{ border: 1px solid; .txt-center{ text-align: center; } .txt-right{ text-align: right; } ul{ list-style: disc; padding-left: 15px; } .ul-align-center{ display: flex; align-items: center; flex-dir
css(scss)のみで簡単なフェードスライダー - Qiita
フェードスライダーを使いたいけどjsを使うまでもないなって時に See the Pen only css fade slider by kazuto (@kzt) on CodePen. 解説 cssアニメーションではディレイを含めたループができないので 表示されていない時間も含めたアニメーションの時間を計算しています。 $slide: 6; //スライド数 $slider-active-time: 8; //スライダーの表示時間(秒) $slider-duration: 1; //スライダーの表示切り替え時間(秒) $slider-time: (($slider-active-time + $slider-duration) * $slide); //アニメーションの時間 @for $i from 1 through $slide { &:nth-child(#{$i}) { anima
作業アウトプット - Ruby on Rails Fri /Jury/ 9th - Qiita
Ruby,Rails初学者の私が今日悩んだ点、最近分かったことなど知識をまとめています 目的: 自己理解 情報共有 情報整理 トピックス ログイン、ログアウト時のviewの実装 toggleを使用した要素の表示、非表示の実装 ログイン、ログアウト時のviewの実装 deviseでログイン機能が実装されており、ログインボタンを押すとログインボタンがユーザのアイコンになる仕様になる。 作業の過程 まずは取り掛かり安さでユーザアイコン用のhaml,scssを実装(ファイルは新しく作らず、ログイン機能ボタンのあるviewファイル内で作業をし、コメントアウトなどを活用しいつでも戻せる状態を保ちました。) ユーザがログインしていない時はunless user_signed_in?をログインボタンの直前に実装、ログインしているときはif user_signed_in?を実装した。 toggleを使用した
webpackでsassとpostcssどちらを選択するのか - Qiita
tips: 個人的に普段感じている内容です node-sass コンパイルに長めのオーバーヘッド 単純にscssを書ける 導入が楽 一部webpackのプラグインと相性悪く動作停止する postcss postcssの設定記述が長い コンパイル早い プラグインが多すぎる sass likeに記述できるプラグインの存在 懸念 とりあえず両方を導入しようとするとメリットとデメリットで打ち消し合います。 postcssは資産に対してメンテナンスする必要が発生する一方、 sassは良い枯れ方で扱われていて楽に運用することができます。 実際にsassを書いてnode-sassでコンパイルすると異様なコンパイル時間を体験するでしょう。 それは同期的に1ファイルずつコンパイルかけている認識です。 postcssはbabelの様にサクッとコンパイルが完了します。 postcssはプラグイン何でも導入しよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass(SCSS) で CSSハックを使う方法 - Qiita
StyleLintの導入手順まとめ - Qiita
Sassのコメントメモ - Qiita
SCSS で RGB 値を計算して返す - Qiita
【HTML CSS】見た目と構造は分離すべし【初心者向け】 - Qiita
PostCSS + Webpack でグローバルなCSS変数 - Qiita
PostCSSでCSSを変換 - Qiita
bootstrapを使っているサービスでCSSで画面の一部をスクロールさせる - Qiita
postcss-normalizeを使って対象ブラウザに関係あるルールだけのnormalize.cssを使う - Qiita
VSCodeでscssの自動ビルド環境を作る - Qiita
Webpack + PostCSSで変数を使う - Qiita
