flocssの人気記事 11件 - はてなブックマーク

1 - 11 件 / 11件

新着順人気順

絞り込み

検索対象
ブックマーク数
期間
セーフサーチ

flocssの検索結果1 - 11 件 / 11件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

flocssに関するエントリは11件あります。 css、 CSS、開発などが関連タグです。人気エントリには『9年モノの Rails アプリで、古い Bootstrap を剥がして FLOCSS 化した話 - 弥生開発者ブログ』などがあります。

9年モノの Rails アプリで、古い Bootstrap を剥がして FLOCSS 化した話 - 弥生開発者ブログ
- 158 users
- tech-blog.yayoi-kk.co.jp
- テクノロジー
- 2020/08/21
こんにちは、弥生 Misoca チームでマークアップをする方のデザイナー @kanizmb です。今回、約1年をかけて古の Bootstrap の撤去および CSS 設計手法の導入（FLOCSS 化）をやり遂げたので、これらの変更をどのように進めていったかについてお話しします。どういった状況だったか Misoca ローンチは 2011年、当時最新であった Bootstrap 2.3.2 を用いて構築が始まりました。(*1) 当初は請求書の郵送に特化した非常にシンプルなサービスだったため、少しの上書きでスムーズに開発が進められ、Bootstrap のメリットを存分に生かせていたのだと思います。しかし時は流れ、取引先管理、品目管理、外部サービスとの連携など、機能が増え続けるとどんどん綻びが出始めます。設計方針もないままに野放図に差し込まれた CSS たちは、いつしか激しい詳細度バトルを
- css
- あとで読む
- bootstrap
- rails
- 開発
[CSS設計] 私のためのFLOCSSまとめ - Qiita
- 23 users
- qiita.com/super-mana-chan
- テクノロジー
- 2019/08/07
FLOCSSとは「Foundation Layout Object CSS」 OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。構造 dartsassに移行しましたので構造を修正しました。 scss/ ├─ foundation/ │　├─ _base.scss │　├─ ... │　├─ index.scss ├─ global/ │　├─ mixin/ │　│　├─ _hover.scss │　│　├─ ... │　│　├─ index.scss │　├─ variable/ │　│　├─ _color.scss │　│　├─ ... │　│　├─ index.scss │　├─ index.scss ├─ layout/ │　├─ _header.scss │　├─ ... │　├─ index.scss ├─ object/ │　├─ component/ │
- css
- *
- WEB制作
FLOCSSベースのサイト設計 - 破綻しないルールを決める
- 9 users
- yumegori.com
- テクノロジー
- 2020/05/20
基本となるBEM設計について BlockとElementはアンダーバー２つ、ElementとModifierはハイフン２つで管理します。アンダーバー１つや大文字を使ったキャメルケース系のクラス名は使いません。以下の例ではheader（Block）、inner（Element）、center（Modifier）になります。例） header__inner--center クラス名が長くなってしまう場合はハイフン１つで繋ぎます。以下の例だとlogo-setで１つのElementになります。例） header__logo-set またElementからElementと繋げることは禁止です。必ずBlockから直接繋がっている必要があります。Modifierは直接ブロックにも繋がることができます。例） NG：header__inner__ttl OK：header__ttl 接頭辞（プレフィッ
- プログラミング
FLOCSSとは？CSS設計手法を活用して保守性の高いコードを書こう | Web Design Trends
- 8 users
- webdesign-trends.net
- テクノロジー
- 2022/12/17
FLOCSS（フロックス）は、人気の高いCSS設計手法の1つです。 CSSは複数人で作業したり、大規模なWebサイトになるとコード量が増えてしまい、途中で整合性が取れなくなったり、破綻してしまう場合があります。それを防ぐために必要なのがCSS設計手法で、しっかりとルールを定めてコードを書くことにより、管理しやすく、破綻しづらいCSSを記述することができます。今回は、FLOCSSの基本や特徴をご紹介したいと思います。【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。ページ数が... Web Design Trends
- CSS
- design
- web
- あとで読む

【モダンなCSS設計手法】FLOCSSとは？コーディングの実務でよく使う運用方法を解説
- 5 users
- zenn.dev/yurukei20
- テクノロジー
- 2022/04/27
FLOCSSは、OOCSSやSMACSS、BEMなどのコンセプトを取り入れたCSS設計のことです。様々なCSS設計の概念やメリットを取り入れているため、管理や運用が破綻しにくい一方で、概念として理解しにくい点も多々あります。なので、今回は、FLOCSSの構成やSass×FLOCSSの運用方法についてまとめました。皆さんのコーディングの参考になれば幸いです。 FLOCSS の構成構成は Foundation、Layout、Object で構成されます。 Foundation foundation は、リセット系 css の読み込みや、そのサイトの基本となるスタイルを定義します。大概は_base.scssや変数を定義するファイルが入ります。 Layout layout は、ヘッダー、フッター、コンテンツエリアなど、サイト全体の共通部分となるものを定義します。接頭辞は l-をつけて、
- CSS
FLOCSSとBEMを理解する - bagelee（ベーグリー）
- 5 users
- bagelee.com
- 暮らし
- 2021/06/11
はじめに本記事では、FLOCSSとBEMについて整理して学んでいきます！私はマークアップをする際に、CSS/Sassのクラス名の命名に悩んでしまうことがあります。一緒にFLOCSSとBEMをマスターして、より分かりやすい記述ができるようになりましょう！ FLOCSSとは FLOCSS（Foundation Layout Object CSS）は、ファイルやディレクトリの構成だけでなく、命名のルールもMindBEMding（BEM）を用いて決められている設計思想で、導入することで混乱の少ない記述になるとされています。 FLOCSSの構造 Foundation デフォルトとなるスタイルのファイル（reset.scssやfont.scssなど） Layout サイト全体のレイアウトに関わる要素のファイル（header.scssやfooter.scssなど） Object 使い回す要素のファ
css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss)
- 4 users
- www.northdetail.co.jp
- テクノロジー
- 2022/04/17
BLOG ブログホームブログ css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss) 前置き css設計・命名規則の件ですが、マークアップする上で避けては通れない比較的面倒な悩み事です。案件によってはクライアント様側からのルールが決められている場合もあり、その場合はそのルールに則って構築すれば済むことですが、一般的にはマークアップする方にお任せされることも多いですね。その場合、個人の好みだったり、その時の流行りなどから、悪く言えば適当に設計されることも多いかと思います。なんだったら「css設計ってナニ？」的な場合も多々見受けられます… 新規構築も、運用も1人で全て行うような案件であれば問題ないとも言えますが、チームでの構築や運用は別の方(もしくは別会社の方)が行うような場合は、その設計自体や命名規則などがハッキリとしたルールに則ってい
FLOCSSを使って破綻しにくいCSS設計を！ | HPcode（えいちぴーこーど）
- 4 users
- haniwaman.com
- テクノロジー
- 2020/03/04
この記事では個人的に大事だと思う部分を自分の解釈と共に紹介していくような感じとなります。 FLOCSSの書き方 FLOCSSは大きくは「Foundation」「Layout」「Object」の3つ。そして。「Object」の中の「Component」「Project」「Utility」から成り立っています。この5つの構成を正しく守り順番に読み込むことで破綻しにくいCSSとなるわけです。それぞれに記載する内容をざっくり分けると以下のような感じです。 Foundation ・・・要素の初期化やmixinなどのベースを設定。リセットCSSなど。 Layout ・・・ヘッダーやフッターなど大枠のレイアウトに関する定義。装飾はなく枠だけを用意しているイメージ。 Component ・・・再利用ができる最小限のパーツ。どの案件でも使える単位でのパーツです。 Project ・・・サイト固有の
- css
SCSSのファイル設計（BEM設計からFLOCSS設計に） | 吉本式 Web制作のコーディングガイドライン
- 3 users
- tsudoi.org
- 世の中
- 2022/02/21
SCSSのファイル設計（BEM設計からFLOCSS設計に）昨年(2018年)の5月ごろに、吉本式BEM設計という考え方のガイドラインコンテンツをまとめました。一部の表現の甘さなどにより予期せぬ方向で話題になってしまいましたが、設計の考え方に関しては、それなりに評価していただけたのかなと思っています。実は、吉本式BEM設計のガイドラインコンテンツを発信した頃には既に、実務では吉本式BEM設計は採用しておらず、FLOCSS設計の考え方で独自にカスタマイズしたSCSSファイルの設計でやっていました。誤解のないように補足しておくと、吉本式BEM設計は長年BEM設計をやってきた中でカスタマイズしたものですので、完成度はそれなりに高いと思っており、また美しいファイル設計になっていると自負しています。その中でFLOCSS設計の考え方に移行した理由は、BEM設計の考え方以外にも実務として経験して
修正に強いコーディング手法【BEM記法とFLOCSS】 | マツイウェブワークス｜新潟県十日町市のWEB制作事務所
- 3 users
- m-ww.jp
- 暮らし
- 2020/10/22
WEBサイト制作をしていると避けて通れないのが修正やコンテンツの追加作業です。また一人で一つのWEBサイトを作るときもあれば、チームで作業するときもあります。自分にはわかりやすくても他の人にはわかりづらいようなコーディング方法ではチームメンバーのパフォーマンスを引き出せません。今回はコーディングルールの一つとしてBEM（ベム）とFLOCSS（フロックス）について考えてみたいと思います。 BEM記法について「BEM」は Block（ブロック）Element（要素）Modifier（装飾）の頭文字をつなげたもので、CSSの命名の規則をBlock（ブロック）、Element（要素）、Modifier（装飾）を合わせて命名します。【block】__【element】–【modifier】のようにBlockとElementをアンダースコアを二つで繋ぎElementとModifierをハ
【CSS設計】FLOCSS(フロックス)で保守性の高い記述を極める！ - 株式会社TANE-be｜大阪にあるWebサイト制作
- 3 users
- tane-be.co.jp
- テクノロジー
- 2023/04/18
こんにちはTANE-beのエンジニアです！皆さんはCSSをどのように意識して記述しているでしょうか？ CSSの書き方は10人いれば、書き方も10通りあると言われるほど、自由に構築することができます。しかし、その自由さが原因で書き方を乱雑にしてしまうとCSSが重複したり、修正の際に大変になることがよくあります！ CSSの中身を見ると!importantを使い回されていたり、1つのCSSを変更するといろんな箇所のスタイルが変更されたりと色々大変な目にあったことも！そこで今回は、破綻しないCSS設計、FLOCSS(フロックス)についてご紹介しようと思います。