BEMのmodifierでスタイルを切り替える時の書き方 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【初学者向け】HTML/CSSでのclassの命名を考える 〜CSS設計（BEM）を学んでみよう〜 - Qiita
とかのアレ（hoge部分）です。 この投稿は HTMLやCSSは書けるけれど、使いこなすためにもう一歩勉強したい classの命名にいつも迷う 現場で使われている技術や知識を身に付けたい こんな人を対象に書いた、初学者向けの投稿です。 CSSの設計とBEMの非常に初歩的なところを解説していきたいと思います。 CSS設計の初歩的なところを考えてみる classの命名っていうけどidじゃだめなの？ Qiitaを覗いてるみなさんには当たり前のことかもしれませんが、一応このあたりから書いていきたいと思います。 HTMLおよびCSSにはclassとidの２種類の名前の付け方がありまして、その名前が一致するものを紐づけてスタイルを書いていきます。 classとidの違いは、ページ内に複数存在できる(class)かできない(id)かです。 なので、正直idだけでページを作ることも可能です。が、一般的には
自分にちょうどいいCSSの書き方 - Qiita
CSSは敷居が低い分、書く人がある程度一貫性を意識して書かないと、すぐに破綻してしまうところがあって、いろんな方がいろんな手法を編み出していて、ベストプラクティス！と呼べるものが複数あるような状態だと思います。 自分としては、つまるところ書く人（達）が書きやすく管理しやすい方法であれば何でもいいと思うし、プロジェクトによっても答えは変わる話だと思うので、「これがサイコー！」みたいなことはなかなか言いづらいなあとおもっていたんですが、 最近は、複数人で制作するケースなどもあるので、あらかじめ「自分にとってのちょうどいい」を明文化して おけば、一緒に仕事をするときに「こいつは、こういうのがちょうどいいやつなんだな」と思ってもらえるかなと思い、まとめてみました。 2018-07-31更新: CodePenのサンプルをいくつか追加しました。 🚩基本姿勢 完璧な管理は目指さない。 管理のために迷う
これからはcssはSassで書こう。 - Qiita
Sassってなんだろう。 ・Sass「Syntactically Awesome StyleSheet」 Syntactically ＝ 構文的に Awesome ＝ イケてる StyleSheet ＝ スタイルシート とどのつまり、すごいCSSということでしょうか。ロゴもかっこいい。 詳しく調べてみた ・CSSを拡張したメタ言語 メタ言語とは「ある言語について何らかの記述をするための言語」のこと。 つまりSassの場合は「CSSに対して機能を拡張した言語」ということになります。 CSSをより効率的に書けるようにした言語ということになります。 ・Sass はプログラムっぽく CSS を書く プログラムっぽく書くことでコーディング効率やソースコードの保守性が上がる。 Sassは、関数や変数の処理を行うために「プリプロセッサー」と呼ばれたりもするみたいです。 Sassには書き方が2種類ある！
elm-css で PostCSS も使える CSS in Elm - Qiita
(筆者は今では積極的にはこの手法を使っていません。詳しくは追記をご覧ください。) elm-cssライブラリのCSS生成機能とelm-css-webpack-loaderを用いることで、CSS in Elm のさまざまな恩恵にあずかれます。 はじめに なぜ CSS in Elm が必要か CSS in JS という言葉が、React界隈で使われるようになっていくらか経ちました。 CSS in JS は、本来 CSS で記述するスタイルを JavaScript で書いてしまうことで、名前空間やネスト構造が使えない不便なCSSから解放されることを目的にしています。 Elm で CSS in JS (Elm) を採用することで、従来のCSSによるスタイルにおける以下の問題を解決できます。 a. スタイルの記述が Elm コンポーネントとは別のファイルになって、配布しづらい b. CSS に名前空間
【webpack2対応】俺が作り上げたSCSSのビルド環境を晒す【リントもあるよ】 - Qiita
はじめに もともと業務でscssを使うための環境を作ってたのですが、ちょっと後輩に丸投げしてた目を離した隙にwebpack周りも色々と状況が変わっていたので、これを機に色々調べ直して設定し直したりしました。 やりたかったこと webpackでscssをビルドする jsで出力されるのは困るのでcssで出力する ベンダープレフィックスは自動でつけてほしい -mozとか書きたくない リントチェック欲しいなぁ... まぁ、これはwebpackじゃなくていいか webpack2でのscssのビルド パッケージインストール まずは必要なパッケージを入れましょう。 今回scssのビルドに使ったパッケージは autoprefixer css-loader extract-text-webpack-plugin node-sass postcss-loader precss sass-loader styl
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
webpack 4入門：スタイルシート(CSSやSass)を取り込む方法 - Qiita
この記事は大幅に加筆して「最新版で学ぶwebpack 4入門 - スタイルシート(CSSやSass)を取り込む方法 - ICS MEDIA」に引っ越しました。 上記の記事ではwebpack+CSSの手順を網羅的に解説しています。 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 webpack 4でExtractTextPluginを利用する方法(webpackでCSSファイルとして書き出す方法) ※Google検索等で訪れた方がリンク切れになると申し訳ないので、このページは残しておきます。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently r
npmでミニマムに始めるSass - Qiita
GitHub Pagesでいくつか静的なWebページを作成しているのですが、生のcssではなく、sassでcssを作成することにしました。 sassを使おうとして、調べるとgemでsassをインストールして始めるという記事が見つかります。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 また、Compassというものも出てきたりします。 CSSの常識が変わる！「Compass」の基礎から応用まで！ またフロントエンドの環境などについて知っていたりすると、gruntやgulpといったタスクランナーも使えるんじゃないかと思ったりして、それらでsassを使う方法も出てきたりします。 gulp インストール～基本設定の備忘録（windows） ふむふむ、といった感じで記事を読んだりするのですが、やらないといけないことやルール、覚えないといけないことが多くて、結局どうするのがいいのだろうと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】BEMのデメリットについて - Qiita
BEMを実際に使ってみて - Qiita
Railsでbootstrap_sassを使おう - Qiita
npm-scriptでPostCSS - Qiita
Webpackを使ってSassをビルドする - Qiita
Rails5.1.3でsassとjsの管理をSprocketsからWebpackerに移行した - Qiita
webpack 4入門：PostCSS(AutoPrefixerやcssnano)を使う方法 - Qiita
gulpでSASSを自動コンパイルする - Qiita
Sassでメディアクエリを効率的に管理するマップとmixin - Qiita
SCSSの変数と、CSS3のcalc()を併用するには - Qiita
Sassで色を調整する - Qiita
