CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスCSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 2024年4月24日 「NES.css」開発者 ダーシノ SIerでの業務アプリ開発や職業訓練校でのプログラミング講師を経て2015年にさくらインターネット株式会社にフロントエンドエンジニアとしてジョイン。2018年にファミコン風CSSフレームワーク「NES.css」を開発、公開する。人生の目標に「笑って死ぬ」を掲げている。柔道初段。 X ブログ GitHub ファミコン風のデザインのWebページをすぐにつくれる、オープンソースのCSSフレームワーク「NES.css」。フロントエンドエンジニアのダーシノさんが2018年にGitHu
CreditThis article is translated with permission of Philip Walton. You can find original article at CSS Architecture.本記事はPhilip Walton氏の了承を得て翻訳された記事です。 原文はCSS Architectureにて掲載されています。CSSアーキテクチャ 多くのWebデベロッパとって、良いCSSとはビジュアルモックアップをコードで完全に再現できることを意味する。tableタグを使わず、また出来る限り画像を少なくすることに誇りを持つ。もしあなたが本当に優れたデベロッパであれば、メディアクエリ、Transitions、Transformといった最新で偉大な技術をも使うことだろう。 これらすべてが良いCSSデベロッパに必要なすべてであることは確かではあるものの、ス
大規模なプロジェクトにおいて最適な構造を見つけ出すために自分自身(そして自分の周りの人たち)のプロセスを分析してきたが、その結果、私が見つけ出したのはプロセスは規模の大小に関わらず大規模なサイトであっても小規模なサイトであっても同じように有効なプロセスだった。 プロジェクトやチームが大きくなるのに併せてCSSをより柔軟に、よりメンテナンスしやすいCSSを書くための構造について学んでいこう。 What is it? SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在に
同じ記述の繰り返しを防ぎメンテナンス性や柔軟性を向上 W3Cによって策定された仕様の1つで、HTML／XMLの要素の表示をコントロールするために生まれたのが「CSS」（Cascading Style Sheets）です。HTMLとこのCSSを組み合わせることによって、文書構造（HTML）と見た目の表現（CSS）を切り離すことが可能になるほか、HTMLだけでは実現できないデザインやレイアウトが可能になるといった大きなメリットがあることから、Webサイトの構築やWebアプリケーションの開発において欠かせない技術となっています。 このCSSで現在注目を集めつつあるのが「オブジェクト指向CSS」や「Scalable and Modular Architecture for CSS」（拡張性のあるモジュールアプローチ）といった考え方です。これらは、CSSで記述する内容を「コンポーネント化」するこ
上記の他に以下のような規則も必要に応じて設けると良いでしょう。 接頭辞（プレフィックス）を必要に応じて付ける（例：is-xxxx） 単語は略語を使用しない（NG例：cnt, hdg, tbl） 参考 変数名の命名規則/＊＊ケースの使い分け 命名方法 命名規則が決まればそれに則って命名すれば良いのですが、どういう単語を使えば良いのか指標がほしいところです。 英単語がすぐ出てこないような時はネーミング辞書 Codicを使ってみると良いです。命名の参考としては良いツールだと思います。 目的や内容によっては汎用的に使える英単語も存在します。例えば、レイアウト用の要素としてcontainer, row, col。ジャンル・業界別の要素としてabout, results,productsなど。 レイアウト用のclass名や汎用class名に関してはいろんなCSSフレームワークのコードを見て研究すること
はじめまして！デザイナーのきよえし(@kiyoe_furuichi)です。 ママリ、ママリQ のUIデザインとフロントコーディングを担当しています。最近暑すぎて溶けそうです。スイカたべたい！ さて今回は、爆速で拡大成長中のママリが行っている『よりよいCSS設計のための開発手法』についてまとめてみました。 『よりよいCSS設計』を考える 「あれ？スタイル効かない…!importantしよ♡」 身の回りでこのようなことは起きていませんか…？ 意図しないことが頻繁に起こる場合『CSS設計』の見直しが必要かもしれません。 私たちは普段からサービスを成長させていくにあたって『よりよいCSS設計』とはなにかを考え、チーム内で検討し、改善をおこなっています。 そんな私たちが実践している開発手法や取り組んでいることについて、いくつかご紹介していきたいと思います。 きっかけ はじめに、私が『よりよいCSS設
本当のCSS設計、もしくはWebページのデザインプロセス - morishitter blog
CSSの設計 = セレクタ名をどう付けるか、って思っている人が多いので、年も明けたしここらで一度「CSSを設計する」とはどういうことか、考えていることをまとめてみる。 セレクタ名をどう付けるか CSSのルールセットは現状全てグローバル定義なので、上手いセレクタ名を付けることで衝突を回避する必要がある。 そのための手法として、SMACSSでは.is-**とか.l-**みたいにプリフィックスを付けたり、BEMみたいに.Block__Element--Modifierのような独特な記法でネームスペースを設けたりする。 CSSは、HTMLのどの要素にどんなスタイルを当てるか、という風に宣言的に記述する言語だ。 この特性ゆえに開発者は、このスタイルをどこの要素に適応させるべきかと考え、セレクタ名を付け、HTMLの属性値に書く。 しかし、この「セレクタ名をどう付けるか」と考えることが、Webページのデ
概要 最近バックエンドからフロントエンドになり、「CSSアーキテクチャについてお勉強してみよう！」ということで、一旦代表的なものをまとめてみました。 CSSアーキテクチャとは cssの設計方法 命名規則やディレクトリ構成や色々ある 汎用性を持たせる設計をするために、誰がみても、途中で誰が入っても構成等がわかるように設計しようねという思想からきてるっぽい BEM コンセプト CSSセレクタの命名規則と言われている Block,Element,Modifierの略 Block:塊 ヘッダー、ナビゲーション、フッターなどのパーツ 独立してる Element:要素 検索ボタン、検索ボックスなどの部品 機能を持っている Modifier:装飾 部品の状態の色等の装飾 実例 命名規則 blockに対して、elementとmodifierをそれぞれ_(アンダースコア1つ)・__(アンダースコア2つ)・-
Atomic Designの実装例 〜Atomic Designを使ったコンポーネント指向のUI開発：Q〜 - UGAP Engineer's Blog
本稿は（序）（破）（Q）のシリーズの3番目の記事になります。 本稿では前回（破）で説明したAtomic Designを導入する際に工夫した点をふまえた実装例をJSフレームワークを使用する場合と使用しない場合の２つの場合について紹介します。 シリーズ（序）ではAtomic Designの概要 シリーズ（破）ではAtomic Designの導入に際して工夫した点 について説明していますので、そちらをご覧ください。 実装例題材 下のサイトテンプレートを題材に実装していきます。 https://html5up.net/prologue シチュエーションとしては、デザイナーからもらったデザインカンプをエンジニアが実装する想定で説明します。 コンポーネントの分割 エンジニアはデザインカンプをAtomic Designのコンポーネント単位に分割していきます。 コンポーネントの分割フロー図は（破）で以下の
What is Atomic Parts Base CSS(APB CSS) Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) Atomic Parts Base CSS(APB CSS)って何？？ Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) APBCSS は Atomic Parts Base CSSのそれぞれ頭文字を取っていて、「エーピービーシーエスエス」と呼びます。 APBCSS は Atomic Designをベースに設計された「CSSアーキテクチャ」の一つとなります。 Point - Simple - Predictable - General versatility - Reusable - Maintainabl
知っておきたいCSS設計法 第1回 OOCSSの基本 HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か？ 今回はその考え方の基本をまずおさえましょう。 はじめに このシリーズでは、OOCSS（オーオーシーエスエス）、BEM（ベム）、SMACSS（スマックス）という3つのCSS設計概念の概要を解説します。HTMLとCSSをどのように書いていけばよいかは、過去に「CSSの設計」シリーズにまとめました。今回のシリーズは、その2014年度版とでもいうような内容になっています。 というのも、CSSの設計を書いた頃と比較すると、さまざまな設計概念が広く知られるようになったものと思います。今回紹介するBEMやSMACSSが、その代表です。また、CSSのプリプロセッサSassのバージョンアップでは、BEMを意識したような機能なども追
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, ind
Jun 2017 edit: 3 was just released! The syntax for 3.x is identical to 2.x, which means this article is still up-to-date (if I missed something, please comment!). The version bump was for more behind-the-scenes stuff, but it did add an easy-to-add “Scope Hoisting” plugin that can cut down on your bundle size that’s worth checking out! Jump to the bottom of this article for the “Upgrading to 3” sec
CSSを破綻させない / 学ぶ、考える、書き出す。
12/3（土）にCSS を破綻させないという内容をbuilderscon tokyo 2016で話しました。 そこで使った発表資料の内容を編集した上で、CSS Advent Calendar 2016 14 日目の記事として公開します。 CSS は破綻しやすい OOCSS の提唱者 Nicole Sulliban 氏も"CSS is too fragile"と 2008 年のイベントで言いました。 なぜ破綻しやすいのか。それは CSS の特性が絡んでいます。 CSS の特性 CSS の特性としておもに 3 つあります。 はじめに、記述を間違えてもエラーにならないことです。ブラウザで表示確認をおこなって初めて見た目がおかしいことに気づきます。 次に、スタイルが適用される条件としてルールセットを書く順序は関係ありますが、常に関係があるわけではない点です。 ちなみにルールセットは CSS のセレ
昨日も少し書いたEvery Declaration Just Onceアプローチ(以下EDJOと略す)について、皆が目を瞑っているOOCSSの欠点、CSSが持つ特徴、HTMLとの兼ね合いという点からもう少し書いてみたい。これについては未だ誰ともちゃんと議論していない。機会があったらこの記事をベースにでも誰かと話してみたい。 上記Googleの文書は、主にパフォーマンスの観点で書かれている。どうしても長くなりがちな定義を分散して書くよりも、能動的に短くすることができるセレクターを分散して書いた方が、プロダクションにおいてリリースされるCSSファイルのサイズを小さくすることが可能だろうというものだ。同時にこの文書の筆者は自身のブログで、より自然にCSSを書くための手法(原文: 「The Natural Way of Writing CSS」)としてこのEDJOという手法について述べている。 僕
Frontrend Conference - A conference for front-end developer（2015年2月21日開催） に参加してきたのでメモ 殆どCSS側のセッションにいたのでCSSが中心。 終わったあとに#ゴーヤsushiと#ルノアール_sushiをしたのでとても長かった。 Pragmatic Front-end Developer: From Artisan to Expert - 斉藤 祐也 基調講演 メンテンス性 WEBを構成するJS+CSS+HTMLはあんまりメンテしやすくない けど専門的な知識がなくてもかけてしまう学びやすさがある 言語的にシンプル コードスタイルガイドライン 多くの人が開発しても、一人の人が書いたように見えるようにしたほうがいい JavaScript IDOMATIC.js jQuery Code Style GuideLine
YACP: よりオブジェクト指向なCSS設計のためのプリプロセッサー - morishitter blog
この投稿はCSS Architecture Advent Calendar 2014の2日目の記事です。 よりオブジェクト指向なCSSの記述を助ける、YACPというCSSプリプロセッサーを作っています。具体的な、セレクタの命名規則やディレクトリ構成の話ではないです。 Object Oriented CSS 数あるCSSの設計手法のベースとなる、OOCSS (Object Oriented CSS、オブジェクト指向CSS)というものがある。OOCSSはその名の通り、CSSのクラス設計（ルールセットの定義）にオブジェクト指向プログラミングの考え方を少し取り入れたようなものだ。 OOCSSの原則として、「構造と見た目の分離」、「コンテナとコンテンツの分離」というものがある。OOCSSが提唱していることは要するに、HTMLの構造に依存しないセレクタを書き、レイアウトと見た目に関するルールセットは別
突然ですが、CSSってカオスですよね。 CSSはすべてを命名で統制をとる紳士協定 #frontrend — (╯°□°）╯︵ uɐʇoɔod (@pocotan001) 2014, 6月 21 まぁそうですよねー。紳士協定とはうまいこと言ったもんです。言語仕様としてどうしようもない。全部グローバル。JavaScriptとかでやったらまずクソコードって言われるやつです。 そうはいっても、レスポンシブだとかでどんどん肥大化していく一方なので、何とかしないと身の破滅です。 とりあえず結論として、FLOCSSやれば良いんじゃないですかね。と言ってしまうのもあれなので、とりあえず実行している事を箇条書きで。 とりあえず何かしら公開されているCSS設計思想を取り入れる。 何かしら入れましょう。SMACSSでもMCSSでもFLOCSSでもモジュール組みでも、とりあえずなんでも良いかと思います。大事なのは
このチュートリアルでは簡単なWebページをRiot.jsで作ってみようと思います。読むのに必要な知識は、次の二つだけ。 HTML CSS 逆に不要な知識は、 JavaScript: AngularとかReactとか CSSの方法論: BEMとかSMACSSとか など。ただ、上記を把握していると、より「Riot.jsすげー」ってなるかも、なってほしいな。 Riot.jsを使うにあたって、モック作成や、静的ページだけなら、JavaScriptを書く必要はそれほどありません。このチュートリアルを通じて、次の2つのポイントを伝えられればと思います。 デザイン先行で作成ができる (開発後回し可能) HTML+CSSだけでもコンポーネントが作成できる Riot.jsとは 近年、AngularJSやReact、Backbone.jsなど、さまざまなJavaScriptフレームワークの名前を聞く機会が増え
Manage your CSS with prefixes. <header class="ly_header">...</header> <!-- layout --> <main class="ly_cont"> <div class="bl_jumbotron"> <!-- block module --> <h2 class="bl_jumbotron_ttl">PRECSS</h2> <p class="bl_jumbotron_txt hp_mb20">CSS with prefixes.</p> <!-- helper --> </div> </main> <aside class="ly_side"> <a href="#" class="el_btn">Try PRECSS</a> <!-- element module --> <a href="#" class
Images from Dinosaur Comics by Ryan North CSS is strangely considered both one of the easiest and one of the hardest languages to learn as a web developer. It’s certainly easy enough to get started with it — you define style properties and values to apply to specific elements, and…that’s pretty much all you need to get going! However, it gets tangled and complicated to organize CSS in a meaningful
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
Sass: Sass 3.3 is Released
After ironing out a bunch of bugs in numerous release candidates, we’re finally ready to release Sass 3.3.0, codename Maptastic Maple, for public consumption. This release has a lot of exciting new features that you can read about in full in the changelog, but there are three that I want to draw your attention to in particular. Maps in SassScriptMaps in SassScript permalink As language designers,
jQuery Mobile入門
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
CSS Styleguide CSSにはスコープという概念が存在しないのでコードを指定する順番を管理してカスケーディングを意図した通りにおこなわせる必要があります。また、インデントや命名規則など好みや考え方が異なることも多いです。 スタイルガイドは知識を共有することで認識のズレをできるだけ無くし、制作をする上での約束事を決めることだろうと考えています。以下のガイドラインはCSSとSass（scss記法）を扱う上でベターだと考えていることをドキュメントとしてまとめたものです。 このガイドラインは2015年11月15日公開（2016年1月14日に改定）されたもので、最新のガイドラインはGitHubで公開しています。 css-styleguide | GitHub manabuyasuda はじめに このスタイルガイドはCSSを扱う上でベターだと思われる方法をまとめたものです。必ずしも正しいもの
TAMでは規模の大きな企業さまと仕事をすることが多いので、スタイルガイドを使った案件も比較的多いです。 数百ページ規模のサイトのスタイルガイドを作成してきましたが、考え方が少しずつ固まってきました。そして、この考え方はコードを書く人だけがもっていればいいわけではなく、ディレクターやデザイナー、部分的にはクライアント（発注者）にも共有しておく必要があると感じています。 この記事を読んだあとに、スタイルガイドを作るうえで考えておくべきことを知り、全員のスタート地点を揃えることができればいいなと思っています。 コーディングの知識がないとわからない箇所もありますが、冒頭にコーディング担当者以外に向けた要約を入れているので安心してください。 内容は以下のようになっています。 スタイルガイドを使うメリットとデメリットを共有する コーディング前に情報設計とデザインを固めておく ページの量産までにスタイル
Web制作者のためのCSS設計の教科書
Web制作者のためのCSS設計の教科書 ( •́谷•̀)「CSSの本書いたよーヽ(=´▽`=)ﾉ」 ということで@hilokiさんから頂きました。ありがとうございます。 著者（@hiloki）について 前著も有名で、私から改めて紹介するまでもないかもしれませんが、カンファレンスや様々な勉強会でCSSについての講演を数多く行ってきており、 CSSが持つ弱点を理解し、設計の重要性を訴えてきた有識者の一人 です。 スライドを見ると分かる通り、CSSプリプロセッサの話に始まり、CSSの設計の話や、最近ではWeb Componentsを交えた話もされていて、CSSと戦ってきた傷跡が生生と感じられます（大袈裟）。今回の著書は得てきたナレッジの集大成といえるのではないでしょうか。 谷 拓樹 (著) 内容について 各章の概要をざっと振り返ってみます。 第1章 CSSにおける設計とは 第2章 CSSの基本を
WebサービスのUIやサイト制作のベースに使えるCSSフレームワーク。Bootstrapが代表的ですが、ほかにも人気のフレームワークをピックアップして紹介します。 CSSのフロントエンドフレームワークは百花繚乱です。しかし本当に優れたものだけに絞り込むことは可能です。 この記事では、私が考える「現在のフレームワークのベスト5」を比較します。強みと弱み、向いている分野があるので、プロジェクトで求めるものに応じて使い分けてください。プロジェクトが単純なら、複雑なフレームワークは不要です。また大半はモジュールベースですから、必要なコンポーネントを選んで使うか、別々のフレームワークのコンポーネントを併用することもできます。 紹介するフレームワークはGitHubの評価を基にしているので、最初に紹介するのは、もちろん一番人気のBootstrapです。 注：紹介する情報の一部は翌週ないし翌月には古くなっ
大規模なプロジェクトにおいて最適な構造を見つけ出すために自分自身(そして自分の周りの人たち)のプロセスを分析してきたが、その結果、私が見つけ出したのはプロセスは規模の大小に関わらず大規模なサイトであっても小規模なサイトであっても同じように有効なプロセスだった。 プロジェクトやチームが大きくなるのに併せてCSSをより柔軟に、よりメンテナンスしやすいCSSを書くための構造について学んでいこう。 What is it? SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在に
実務でCSSをガッツリ書くことになったので、復習の意を込めて自分用のチートシートを作成しました。 今回は現場でよく使われているBEMの書き方について調べたことのまとめです。 BEMとは BEMはBlock Element Modifierの略で、CSSを設計･命名していく手法です。 Block： 大枠となる独立した要素 Element： Block中の要素 Modifier： BlockやElementのスタイル 保守性の高さから1番多く使われている命名規則だと思います。 BEMを使う目的 BEMは名前の衝突を避けるために考案されたCSS設計です。 保守性の高さを解決するための手法は他にもあり、HTMLはシンプルがな書き方が求められますが、まだまだ決定打に欠けています。 BEMは見た目が汚いですが、シンプルを求めて面倒な目にあうよりは、少々汚くても扱いやすいBEMが多くの現場で採用されてい
マークアップエンジニアとして約4年間働いてきました。そして、これからはフロントエンドエンジニアとして静的なWebサイトから、動的なWebアプリケーションを作成する仕事に変わります。 そこで、4年間のまとめとして、マークアップエンジニアとして学んだことを書いてみようと思います。 これからエンジニアになる、もしくは目指す方のお役に立てれば幸いです。 マークアップエンジニアとは？ マークアップエンジニアとは、HTML・CSS・JavaScriptを使い静的なWebサイトをつくる人です。人によってはデザインまでやるひとや、PHP等のサーバーサイドまで対応するひともいますが、ぼくの業務範囲ではそれらはありませんでした。 作業の流れ デザイナーからデザインカンプをもらう デザインカンプを文書構造に変換し、マークアップしていく マークアップにスタイルを当て、見た目をデザインカンプに近づけていく アニメー
こんにちは、クレイの亀井です。もうすっかり秋ですね！コンビニやケーキ屋さんに芋栗南瓜のスイーツがもりだくさんでテンション上がりっぱなしです さて本題に入ります。先日9月30日にクレイ社内で Sass 勉強会を開催し、CSS 設計について発表しました。そのことについて今回はブログに書こうと思います。 開催することになった経緯 数ヶ月前から社員のキャリアアップのため、『クレイ社員補完計画』が開始しました。週に4時間まで自分の好きなことを勉強する時間をとれ、2ヶ月に一度ブログや勉強会などの場で成果を発表します。 私ははじめ別のテーマにしていたのですが、いまいちモチベーションが上がらず、相談した結果 Sass をテーマに勉強会を開催することになりました。 社会人になってから2年半、スライドを制作して発表をするという経験がなかったのですが、いつか外部の勉強会で LT などしてみたいと思っていたためい
みんなが知ってるような知らないようなFLOCSSの話
FLOCSSは2014に公開したCSSの構成案・設計手法 SMACSSのようにモジュールを分類して、責務を切り分け BEMの思想を取り入れたセレクタ設計、命名規則を採用 MCSSのようなカテゴライズ（レイヤー）間のルールを持つ Foundation Reset/NormalizeやVariablesなど Layout ページのストラクチャや、レイアウトモジュール Object/Component Buttonなどのプリミティブなモジュール Object/Project プロジェクト固有、Componentより抽象度の低いモジュール Object/Utility 単一の機能を持つヘルパーモジュール
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
ご挨拶はじめまして！ 食べログのFE（フロントエンジニア）チーム リーダーをやっております、 辻です。 食べログのフロントエンドってどんな印象でしょうか？ 「めっちゃ大変そう」でしょうか？ 出典：https://www.slideshare.net/YoshieYamamoto/ss-83840311 「食べログ フロントエンド」でググるとこの記事が上位に表示されますので、この印象がある方もいるかと思います。 こちらのスライド「食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･」では、 場当たり的な実装を繰り返さないために生まれたFEチームについて、 他チームのエンジニア・デザイナーをサポートする苦労、 分業体制の食べログで納期とメンテンス性のバランスをとる難しさ、 jQuery+Backbone.JS、Gulp+webpack、SMACSS+BEM+FLOCSSなどで構成され
この1ページの質問表は、チームで効果的なフロントエンドガイドラインをつくり一貫性とまとまりのあるコードを共に書けるようにする為の補助ツールである。 HTML HTMLの方針 HTMLを書く上でのチームとしての基本方針は何か？ (例： セマンティックなHTML5マークアップを書く, アクセシビリティ, 等。 これらの 資料 を 参照) HTML Tools HTML プリプロセッサーを使用しているか？ (例： HAML, Jade, など) テンプレートエンジンを使用しているか？ (Mustache, Handlebars, など) バックエンドの構成はフロントエンドに影響するか？ (例： WordPress はマークアップのクラスにwp-paginateを加える) もしあれば, そうしたルールをについてさらに説明できるか？ HTML 記述のスタイル スペースかタブか？ コメントルールはどう
その書き方、古くなぁ～い？なくなくなくなくなくなくなぁ〜い？ そんなわけで、先日発売になりました書籍現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4一冊ご恵贈頂きました。 最新のコーディング事情を知りたい、またはHTML + CSSコーディングの上級者を目指すのであれば絶対におさえておくべき一冊です！ 書籍の紹介 近年のWebコーディングはスマートフォンをはじめとする対応デバイスが劇的に増えたことから、非常に手間のかかる工程になりました。検証や最適化まで含めたすべてを手作業でこなすのは無理が生じてきており、さまざまな制作支援ツールやフレームワークを活用しながら進めるなど、従来のワークフローから大きく変化を遂げています。 本書ではこのような“モダン”なHTML＋CSSコーディングのあり方と、作業の効率化＆適正化を図る手法・技術・ツールを網羅的
毎日たくさんのコードを、実際に手を動かしながら勉強しているのですが、HTMLやCSSをいつも白紙の状態から書いているわけではありません。いつも必ず記述する部分は、テンプレートとしてそのままコピーしてから書き始めるようにしています。 インターネットで「HTML,CSS,テンプレート」と検索すると、HTMLとCSSのファイルを無料で配布しているサイトがたくさんみつかります。 高品質なデザインのものから、レスポンシブに対応しているものまでたくさんあるので、コードを見るだけも勉強になりますね〜。 今回はそういったデザインまで完成しているテンプレートではなく、HTML・CSSそれぞれのコードを書き始める際に、必要最低限は記述しておいたほうがよさそうなコードについて考えてみました。 レスポンシブ対応！HTMLテンプレート HTMLを書く際に、上記のコードをテンプレートとして使っています。 DOCTYP
以下、ブログに書いたのとほぼおなじ内容だけどこっちにも転載してみます。 github: https://github.com/rstacruz/rscss githubのREADMEをドキュメント化したもの: http://ricostacruz.com/rscss/index.html （このドキュメント自体がRSCSSの実践例になってる） しばらく CSS とか追ってなかったので、触るにあたって「むやみにCSS書いてたら後で確実に死ぬし、そういえばなんかOOCSSとかあったな」と思っていろいろ調べてたら OOCSS の他にも SMACSS とか BEM とか SuitCSS とか FLOCSS とかなんかいろいろ出てきて大変でした。たしか SMACSS くらいまでは記憶があるんだけど…。 で、どうもどれもしっくり来ないのでさらに調べてみると RSCSS というものを発見。「フレームワー
【CSS設計】SMACSSからCSSプリプロセッサとの付き合い方について学んだこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まずSMACSSとは SMACSSとはCSS設計手法の一つです。『Scalable and Modular Architecture for CSS』の頭文字をとってSMACSSと呼ばれています。SMACSSの特徴は５つのカテゴリに分類をして、それぞれの考え方に合わせた設計を行うのが特徴です。 今回の記事では、SMACSSについての解説は割愛させていただきます。SMACSSの詳しい内容については、『Scalable and Modular Architecture for CSS』をぜひ読んでみてください。こちらは日本語に翻訳もされていて、かなり読みやすく参考になるところも多いのでオススメです。 またすぐに学びたいという方はCodeGridさんの記事が参考になるので読んでみてください。 SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid もちろん『最強のCSS設計
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Architecture | en.ja Article
Ja - Scalable and Modular Architecture for CSS
第45回 CSSのコンポーネント化がもたらすメリット | gihyo.jp
フロントエンドの命名や設計の基本と自分の現在の設計 - Qiita
サービスの成長を止めたらあかん！『よりよいCSS設計』を考えよう！ - コネヒト開発者ブログ
CSSアーキテクチャについて軽くまとめてみた - Qiita
APB CSS - Atomic Parts Base CSS -
知っておきたいCSS設計法 | 第1回 OOCSSの基本
CSS Style Guides | CSS-Tricks
Getting Started with webpack – Insightful Software
OOCSSの欠点とEvery Declaration Just Onceのもたらすもの
Frontrend Conference アウトラインメモ
脱カオスなCSSのために実践している7つの事 - Toro_Unit
無謀にもJavaScriptなしでやってみる! Riot.js入門 - Qiita
PRECSS - Manage your CSS with prefixes.
Modern CSS Explained For Dinosaurs
CSSとSassのコーディングスタイルガイドを作ってみた - Qiita
質の高いスタイルガイドを作成するために考えておくべきこと ｜ Tips Note by TAM
Bootstrapだけじゃない！2017年のCSSフレームワークベスト5
Ja - Scalable and Modular Architecture for CSS
【命名規則】BEMを使った書き方についてまとめてみた【CSS】 - Qiita
マークアップエンジニアに必要な技術 - Qiita
社内Sass勉強会を開催しました
フロントエンドエンジニアブログ を始めます！｜食べログ フロントエンドエンジニアブログ
フロントエンドガイドラインについての質問表 - Qiita
コーディング上級者になりたかったら絶対読むべき！「現場のプロが教えるHTML+CSSコーディングの最新常識」
スッキリ素早く始めるためのHTMLテンプレート・リセットCSS | panmimi design
RSCSS というCSS設計について - Qiita