タグ

bemに関するlittlepadのブックマーク (13)

  • Spotlight

    いろんな仕事をこなす「ゼネラリスト」は目立てない? サイバーエージェント2年目社員の悩みにUUUM創業者が喝

    Spotlight
  • リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03

    2015/3/10の勉強会にて発表された資料です。 SCRIPTY#3 ~フロントエンド紳士・淑女のための勉強会~ http://scripty.connpass.com/event/12374/Read less

    リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
  • [CSS]BEMの方法論とMindBEMdingという記法 - Qiita

    BEMとは Block、Element、Modifierの頭文字を取ったものであり、要素を3つのどれかに当てはめて命名していく方法。 Block → 構成のルートとなる要素。 Element → Blockの子要素。Blockでしか生きられない。 Modifier → 元となるBlockまたはElementから変化した状態を表す要素。 オブジェクト指向風に言うと... Blockは継承元のクラス、Modifierはその派生クラス、Elementはそれらのクラスに所属するメソッドもしくはプロパティである。 参考:BEM-Methodology Definitionsの日語訳 MindBEMdingとは BEMCSSのクラス名に適用するために作られた規則で、CSS界隈ではMindBEMdingがBEMと呼ばれることが多い。お約束として、Elementはアンダースコア2つ(__)、Modif

    [CSS]BEMの方法論とMindBEMdingという記法 - Qiita
  • BEMが失敗しているパターンとその問題点

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    BEMが失敗しているパターンとその問題点
    littlepad
    littlepad 2015/02/09
    「コンポーネントのエレメントのエレメントのエレメントの...」ってやってる。。
  • 和倉温泉観光協会•和倉温泉旅館協同組合

    令和6年1月1日に発生した能登半島地震により亡くなられた方に心からお悔やみを申し上げるとともに、被災された方々に心よりお見舞い申し上げます。 和倉温泉はかつてない未曾有の事態となっておりますが、一方で、千年に一度のピンチを千載一遇のチャンスに発想転換し「温泉街全体の創造的復興」に向けて、次世代を担う旅館・商店経営者・リーダーらと共に新たなまちづくり推進団体を設立し、産学官金の連携体制のもとで未来志向の魅力あるまちづくりを強力に推進してゆきたいと考えておりますので、今後とも和倉温泉をご愛顧賜りますよう何卒宜しくお願い申し上げます。

    和倉温泉観光協会•和倉温泉旅館協同組合
  • CINRA.STORE - iPhoneケース,雑貨,ファッション,文房具,プレゼントのセレクトショッピングサイト

    弊社が運営する「CINRA.STORE」への不正アクセスによる 個人情報流出に関するお詫びとお知らせ 2020.9.23 このたび、弊社が運営する「CINRA.STORE」におきまして、第三者による不正アクセスを受け、お客様のクレジットカード情報(337件)が流出した可能性があることが判明いたしました。お客様をはじめ、関係者の皆様に多大なるご迷惑およびご心配をおかけする事態となりましたこと、深くお詫び申し上げます。 なお、個人情報が流出した可能性のあるお客様には、日より、電子メールにてお詫びとお知らせを個別にご連絡申し上げております。 弊社では、今回の事態を厳粛に受け止め、再発防止のための対策を講じてまいります。お客様をはじめ関係者の皆様には重ねてお詫びを申し上げますとともに、件に関する概要につきまして、下記の通りご報告いたします。 記 1.経緯 2020年5月26日、一部のクレジット

  • Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | Recruit Tech Blog

    前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語(仕様)といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう

    Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | Recruit Tech Blog
  • goen°

    Chie Morimoto Born in 1976 in Aomori Prefecture, Japan, Chie Morimoto was raised in Tokyo. After completing the Visual Communication Design program at Musashino University, she started working with the Hakuhodo advertising agency. With the desire to design in a manner more essential to day-to-day life, in 2007 Morimoto founded goen° with the following directive: “Create first encounters. Connect p

    goen°
  • 武蔵野美術大学

    受験生の方へ 資料請求 2025年度 総合型選抜[前期]志願者数を掲載しました2024年10月4日(金) 低気圧と前線による大雨に伴う災害により被災された学生および入学志願者の皆様へ2024年10月2日(水) 編入学選抜、転部・転科試験の出願受付について(10/8-10/15)2024年10月1日(火) 2025年度 学生募集要項を公開しました2024年7月11日(木) 留学生の修学環境整備費の新設について2024年7月11日(木) 一覧を見る 在学生の方へ LiveCampusU 低気圧と前線による大雨に伴う災害により被災された学生および入学志願者の皆様へ2024年10月2日(水) 学校において予防すべき感染症に罹った場合2024年6月26日(水) 一覧を見る 通信教育課程のお知らせ 通信教育課程 武蔵野美術大学通信教育課程移転完了のお知らせ2023年7月24日(月) 一覧を見る

    武蔵野美術大学
  • いまどきのCSS – OOCSSとかBEMとかSMACSSとか | 5 LOG

    OOCSSとかBEMとかSMACSSとか、深く考え過ぎずに、気楽にいいとこ取りして、プロジェクトに合った使い方をしましょうって話。 重要なのはルールを決めること。 命名ルールはBEMで(ただし厳密なBEMルールではなく、BEMっぽく) シングルクラスよりマルチクラスを採用 idセレクタはCSSでは使わない 命名ルールはBEMで BEMの命名ルールを取り入れる事で、CSSBlock単位で考える事が出来るので、積極的にとりいれる ただ、実際に書いてみるとわかるのだが、厳密なBEMのルールはめんどくさいし見た目が気持ち悪いので、ゆるくしたルールを決める。 Elementは「__」(アンダースコア2つ)、Modifierは「––」(ハイフン2つ)でつなぐ これが命名ルールの基Block、Element、Modifierを2つ以上の単語で表すときはキャメルケースをつかう その方がぱっと見わか

    いまどきのCSS – OOCSSとかBEMとかSMACSSとか | 5 LOG
  • QiitaのサイトにBEMを勝手に取り入れてみた - Qiita

    BEM Advent Calendar 2013 1よ…13日目の記事です。 BEM Advent Calendar 2013が14日時点で18日の記事がアップされていたり、逆に13日の記事が14日にアップされたりと時空が歪んていますが、気にしないことにします。 この記事では、BEMを取り入れたマークアップがどんなものになるのか、Qiitaのホーム画面(ログイン後)を元に考えていきます。 なお、BEM自体についての説明は、BEM Advent Calendarの各記事やBEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号、CodeGridのBEMによるフロントエンドの設計 - 基概念とルールを見ていただけるようお願いします。 これから載せるソースのガイドライン BlockとElementの区切りにはアンダースコア2個(__)を使用 block__elemen

    QiitaのサイトにBEMを勝手に取り入れてみた - Qiita
  • BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号

    BEMを使った命名がとても明快で、このところHTMLCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな

    BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
  • イマドキCSS設計

    イマドキCSS設計 NTTレゾナント 森恭平 ※矢印キーで動かせます About Me 森恭平 ディレクター フロントエンドエンジニア Twitter:basara669 今日のスライド http://basara669.com/slides/140122/index.html ※今日のatndやconnpassにも載っています 今日のハッシュタグ #gooOTT Agenda なぜCSS設計が必要なのか BEMとSMACSSの紹介 実際の運用上どうするべきか 題に入る前に・・・ 様々なCSS設計がありますが、どれも複数クラスを前提としているので、IE6以下では使えないです。。

    イマドキCSS設計
  • 1