All Portfolio - ECSSDevelopment of websites and turnkey web projects is a comprehensive service. It differs from the...
BEM — Block Element Modifier
BEM — is a methodology that helps you to create reusable components and code sharing in front‑end development Learn why it's better #opinions_box h1 { margin: 0 0 8px 0; text-align: center; } #opinions_box { p.more_pp { a { text-decoration: underline; } } input[type="text"] { border: 1px solid #ccc!important; } } .opinions-box { margin: 0 0 8px 0; text-align: center; &__view-more { text-decoration
BootstrapをBEMに考えてみる - Blog.おにぎりたまごうぃんなー
この記事はBEM Advent Calendar 2013の22日目の記事です。 こちらの記事を読んで、初めてBEMを知りました。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません！ Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。 とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。 よくあるあるヘッダーでBEMる Components - Navbar / Bootstrap bootstrapのコードはこう <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navba
「CSS設計の教科書」の献本を頂きました - blog::wnotes.net
献本を頂きました 同じ会社ということもあり、普段からお世話になっている著者の谷さんより献本を頂きました。ありがとうございます。 普段からCSSやWeb Componentsで登壇されていることもあり、安心と信頼の内容でした。 以下、大まかな内容の構成と感想文です。 まずはインプレス様のサイトより目次より引用： 第1章 CSSにおける設計とは 1-1 CSS設計の重要性 フロントエンドとCSSの仕事 開発に欠かせない設計 より良いCSSのゴール 1-2 破綻しやすいCSS HTMLの構造に依存している スタイルを取り消している 絶対値を多用している 修正しやすいCSSへ モダンなサイト構築ワークフロー 第2章 CSSの基本を振り返る 2-1 CSSセレクタと詳細度 カスケーディングの基本 詳細度 詳細度の計算 2-2 セレクタのリファクタリング セレクタをより安全でシンプルなものに 要素セレ
BEMの命名規則は賢い | inkdesign
BEMおよびその命名派生としてのMindBEMdingで使われるfoo__barやfoo--barというようなハイフン、アンダースコアを重ねた命名はキモいし冗長だと嫌われがちだ。僕自身も初見ではそのように思っていた。しかしこれは本当に良いアイデアだと思うし、実務でも僕は採用している。 CSSの設計、その命名のときに考えるのは、それがいかに明白であるかということと、汚染されるリスクを抑えられるか、ということだ。ワードを明確に区切ることによって、その機能・カテゴリを区別するという点においては、別に単一記号であろうが、キャメルケース、スネークケースであろうがなんでもいいかもしれない。しかしスタイルが汚染されるリスク、という点でこの珍妙な命名は優秀だ。 プロジェクトに関わる開発者が多いほど、その書き方にブレは生じる。もちろんコーディング規約なり、スタイルガイドなりであらかじめルールを共有しておけば
CSSの汎用クラスのつかいどころ | inkdesign
OOCSSをはじめとするCSS設計におけるモジュール指向のアプローチの話になると、下記のような単一プロパティで定義されたルールを組み合わせたものを指す、というような説明がされる場合がある。 .size1of4 { width: 25%; } .mrs { margin-right: 10px; } .font-small { font-size: 10px; } .text-left { text-align: left; } これらはUtilityとか、Helperとか、汎用クラスというように呼ばれ、あれば何かと便利なルールだ。 どういうときに便利かというのは、唐突なデザイン変更要求などに、都度そのためのルールを定義するよりも、これらの汎用クラスの組み合わせで対応できるということが挙げられるだろう。 <div class="mts text-center"> <img src="ban
MCSS
はじめに Multilayer CSS構成システムはBEMとOOCSSの原理を基にしています。この方法はOdnoklassniki.ru（世界のソーシャルネットワークのTOP10）開発チームによって作り出され、ドキュメントとチームベースのシステムの中核として開発者にお勧めです。 この方法は60人以上の開発者と多くの内部サービスという巨大なプロジェクトから生まれましたが、中小規模のプロジェクトにも簡単に導入できます。その拡張性により、開発者はルールの厳格さのレベルを選択できます。 このドキュメントはドキュメント作成エンジンSourceなどの補助ツールを使い、常に改善されています。オリジナルのドキュメントはロシア語で記述されており、全ての情報はまだ翻訳されていませんが、翻訳のプルリクエストはお気軽にどうぞ。 何か質問があればIssues section on Githubまたはメールアドレスr
SassとBEM
SCSSファイルを整理し直している時、一気にBEMなクラスを使って書きなおしてやろうかとも考えていた。けど途中でSassならSCSSファイルの分割とその中での工夫によってBEMの構造を表現できそうと感じたので、今はそういう方向で試行錯誤している。実際BEMのウェブサイトでもファイルシステムを使ったBEMの表現方法という似た話が書かれているので荒唐無稽な考えではなさそう。 SCSSファイル名でblockを表現 その中でplaceholder selectorを使ってelementとmodifierを表現 外からはこのplaceholder selectorは使わない 既存のマークアップを利用したセレクターから@extendでBEM構造を関連付け HTMLファイルではBEMなクラスは振らない 必要な場合はシンプルなクラスを振る イメージはこのような感じ。HTMLでのマークアップの簡潔さは維持で
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
CSSの命名規則にBEMを取り入れてみる - dskd
公開日2013-12-02タグAdvent CalendarBEMCSSHTML今年もあと一月ということでブログをリデザインしました。ということでこの記事はBEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。 BEM って何？ BEM とは Block, Element, Modifier の頭文字をとったもので、フロントエンド設計において命名規則やモジュールの管理に前述の３種類の区分を取り入れたものを言います。今回はタイトルにもある通り、CSS の命名規則に BEM を取り入れてみるということで、BEM な CSS について記載します。 BEM るとどういう良いことがあるの？ いろんな人がすでに書いているので別エントリを参考になさってください。あるいは、今回の Advent Calendar に参加した方のエントリも参考になるかと思います。
4 ways to create CSS that's modular and scalable
Modular code is reusable code. It can be combined in a variety of ways, making it flexible and scalable, allowing you to iterate code blocks independently and leading to better performance and more maintainable sites. Object Oriented CSS (OOCSS), Scalable and Modular Architecture for CSS (SMACSS), Don’t Repeat Yourself CSS (DRY CSS), and Block, Element, Modifier (BEM) are four popular methods for
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hiloki/flocss: CSS organization methodology.
Bem Study
CSS Architecture with OOCSS, SMACSS, BEM
イマドキCSS設計
BEM Advent Calendar 2013 - Adventar