create-react-appでPostCSS環境を作る - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
堅牢で保守的な最低限度の CSS 設計 - Qiita
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 CSS 設計 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding （以降、BEM） 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component：Atoms Project：Molecules に分類します。
Ruby on Railsで外部のcssを読み込む方法 - Qiita
Ruby on Rails自分用備忘録 Ruby on Railsの既存プロジェクトを引き継いだ。そもそもRubyもRailsも触ったことがなかったけど、フルスタックフレームワークって何ぞやってことは、概ねDjangoで理解してたし、Rubyみたいなモダン言語は別に勉強しなくても、まあなんとなく雰囲気でいけるんじゃん。言語よりフレームワークの使用を覚えるのが面倒臭かった。ほら、フルスタックフレームワークって設計者の癖がより色濃く出るじゃんね。んで、早速「ん？」ってなった箇所があったので、書き留めておこうと思う。なんでもかんでも、できることなら正確に理解した今日この頃。 どうやってcssを読み込めばいいんだろう slimからcssを個別に読み込んでる感じ？とか思ったけど違った。slimからcssを呼び出してない。なのにcssが反映されている。なんじゃこりゃ。んで、勉強して知った。Railsで
【mac用】npmでgulpを使い、ejsとscssの環境を作る - Qiita
project ┃-ejs ┃ ┃-この配下にejsファイルを作成していく ┃ ┃-img(ここに画像を配置すると、自動的にhtml配下にもimgフォルダが生成され、軽量化された画像が出力されます) ┃ ┃-includes ┃ ┃ ┃ ┃ ┃ meta.json(meta情報の一括管理。ここでの説明は割愛。) ┃-html ┃ ┃-node_modules ┃ ┃-gulpfile.js ┃ ┃-package.json ┃ ┃-gulp_install.command ┃ ┃-css（ここにscssで変換されたcssファイルが格納されます） ┃-scss ┃ ┃-この配下にscssファイルを作成していく 必要ファイルについては下記順次説明していきます。 gulpで作成する制作環境に使うプラグイン ・browser-sync: ファイル変更の監視、ブラウザの自動リロード ・gulp-au
sass初心者の方へのざっくり説明。 - Qiita
Sassの試し書きツール Sassmeister ・ どうコンパイルされるか確認に便利です。 visual studio code の お手軽Sassコンパイラ Easy Sass ・ 取り急ぎコンパイルできれば良い時はこれでも大丈夫です。 ・ コンパイル先を指定できなさそうなので大規模プロジェクトには不向きです。 htmlなど試し書きツール Web Maker ・ chromeの拡張機能です。 ・ コンパイル結果の表示はないので上記と併用などしてください。 ・ html ▼, css ▼, js ▼ をクリックでsassなどにも変更できます。 Sass参考サイト Sassの基本 ・ はじめの一歩 絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順 gulpで階層構造を維持して出力する ・GUIコンパイラはかゆいところに手が届かない。gulp-sassな
webpack4でscss - Qiita
webpack 4.10.2でscssを使用する方法 以下に設定ファイルを記載します。 scssを実行するだけなら不必要なものも含まれていると思いますが、そこはご勘弁ください あとで修正しまっす 一応、以下が実現できるので、そんなに無駄な情報は詰まってないはず・・・ react/flux scss react-router ファイル変更時のブラウザ自動リロード es6 package.json { "name": "hogemaru", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --history-api-fallback --host 0.0.0.0", "build": "webpack -p" }, "author": "",
WordPressテーマ作成にSASSとGulpを使った環境構築 - Qiita
Gulpを使って色々な処理を自動化する方法 https://tech-dig.jp/%E3%80%90gulp%E5%85%A5%E9%96%80%E3%80%91gulp%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%89%B2%E3%80%85%E3%81%AA%E5%87%A6%E7%90%86%E3%82%92%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/ GulpでWordPressのテーマ開発はここまで効率化できた https://www.webprofessional.jp/wordpress-theme-automation-with-gulp/ https://sndbox.jp/websystem-develop/wordpress/wordpress-sa
Stylelintでファイルを除外する - Qiita
tl;dr 設定ファイルのignoreFilesにGlobで書きまくればいい 状況 PostCSS + SugarSS Webpack (4.8.1) なぜか.stylelintignoreが全く反映されなかったので、設定ファイルに除外先を指定することにしました。 以下のように.stylelintrc.ymlなどに書けば対象のファイルが除外されます。 --- extends: stylelint-config-sugarss-recommended plugins: - stylelint-order ignoreFiles: - node_modules/**/*.css - src/lib/**/*.css rules: - order/properties-alphabetical-order: true
sass-loader で dart-sass を使う - Qiita
モチベーション node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。 ちなみに node-sass に感じていたイライラポイントは、以下の通り。 インストールが遅い Node.js のバージョンが上がりたてのとき、だいたいインストールで死ぬ dart-sass がナウでヤングな理由については、 Feature Watch: CSS Imports and CSS Compatibility とかを読んで欲しい。 要約すると、LibSass や Ruby Sass に搭載されていない機能が、先行的に積まれてるみたいなことらしい。( プレーンな CSS のインポートをサポートするとかなんとか) モチベとしては、「 node-sass でコケたときに
CSSでもオブジェクト指向を実現する書き方 - Qiita
英語版はこちら。 OOCSSとは異なり、CSSでちゃんとオブジェクト指向を実現するための方法について解説します。 0. まず「オブジェクト指向」とは 「オブジェクト指向」はIT業界を支えている重要なパラダイムのひとつで、JavaScriptを含む様々なプログラミング言語でサポートされています。特徴としては「型」や「クラス」といった雛形を持ち、雛形から生成された「インスタンス」とクラスとを区別します。 クラスとインスタンスとを区別することで、長期的にメンテナンスしやすいプログラムにすることができます。クラスを修正したり、インスタンスに変更を加えたり、それぞれ自由に拡張できます。 こういったオブジェクト指向プログラム言語（OOPL）に共通の特徴は、CSSでは見られることがありませんでした。2008年にOOCSSという手法が登場した後もです。 それも今日でお終いです。さっそく見ていきましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.js + TypeScript + Sass でプロジェクトをスタートする - Qiita
スタイルシートのファイル構成と命名規則について - Qiita
VSCodeでSCSSのビルド環境を作る - Qiita
Atomでsassを使いたいと思ったのでその方法をまとめました。 - Qiita
久しぶりに大量のCSSを書いたら楽勝だった話 - Qiita
vue.jsで@materialのscssをimportするだけで消耗した話 - Qiita
クラス名に任意の数字を記入し、プロパティの値として扱う[HTML.CSS] - Qiita![クラス名に任意の数字を記入し、プロパティの値として扱う[HTML.CSS] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/101110e96da707ae082484f8522d4e9498520b13/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMjczNjU4JTJGcHJvZmlsZS1pbWFnZXMlMkYxNjAzMjgwOTMwP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1lNWMyNDZhMGZhYmJiNDdmZWRhZDY5OGMwN2FmYjQ4OA%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D380e80a1f710140f6b102c48d98d6969%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUI5JUU1JTkwJThEJUUzJTgxJUFCJUU0JUJCJUJCJUU2JTg0JThGJUUzJTgxJUFFJUU2JTk1JUIwJUU1JUFEJTk3JUUzJTgyJTkyJUU4JUE4JTk4JUU1JTg1JUE1JUUzJTgxJTk3JUUzJTgwJTgxJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgzJTkxJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgxJUFFJUU1JTgwJUE0JUUzJTgxJUE4JUUzJTgxJTk3JUUzJTgxJUE2JUU2JTg5JUIxJUUzJTgxJTg2JTVCSFRNTC5DU1MlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1kNWYwZjc0Mzc2M2NiNGUwOTRlNzRiNGE3NDBhNzVhNw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBSaW5UX1QmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mZTgyZGM0YTYzOTIzZDQwMTM4NWZjMGJiNjQ1OTM4Nw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D6cac97137555a6f1a033105bf415d37e)
VS Code で Prettier と Stylelint を連携して CSS/SCSS ファイル保存時にオートフォーマットをかける - Qiita
非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - Qiita
Sass(SCSS) で CSSハックを使う方法 - Qiita
