アジア圏のエンジニアと仕事するうえで必要なオフショア開発メソッド【開発フロー編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 フィリピン・セブ島に来て1年半が経ちました。なんだかあっという間です……。 これまでセブ島でエンジニアさんを雇い、教育し、日本との仕事を受ける体制を作ることに注力してきました。初めは、急にエンジニアがいなくなったり、クオリティが低かったりと、失敗が続き大変でしたが、最近はいい感じに回るようになってきたと思います。 そこで今回はオフショア開発でアジア圏のエンジニアとプロジェクトを成功させるため、普段僕らが取り組んでいる開発フローについてご紹介します。他の地域でも使えると思うので参考になれば幸いです。 もくじ コミュニケーション 品質管理 開発環境 まとめ 1. コミュニケーション 指示書はなるべくシンプルな英単語＋記号を用いる LIGのサイト制作では、とくにアニメーションの実装がよくありますが、これを説明
gooラボ スタッフブログ
1月22日（水）に、gooラボOpenTechTalk4を開催。今回は、「画像最適化・CSS設計・Backbone.js」といった幅広いテーマで 開催し、多くの方にご参加いただきました。それでは、当日の模様をお伝えします。 ------------------- トップバッターは、NTTレゾナント(株) トップ編成担当 岡崎 晶彦 テーマは、画像の最適化 (GDO:Graphic Data Optimization←これは岡崎の造語。) 画像を含む視覚情報は、五感のうち80%以上の影響力を持つと言われており、UXに大きく影響します。そこで、画像の最適化の トレンドやニーズやお薦めのツールを紹介。Googleトレンドでも4Kはうなぎのぼりにのびており、iphone5も4K対応済みという 状況を踏まえ、将来の画像度は4Kを基準にするとよいと提唱。画像の最適化で重要な3つのポイント（①画像の数
When to use which CSS methodology
Over the years more and more CSS methodologies started to appear. In this post we try to find the right CSS methodology for a certain situation, because there just isn’t the perfect one for every situation, unfortunately. Alright then, let’s dive right into this abyss. I just want to create a single page or a simple site . The content is mostly text and maybe a form or two. There aren’t any co-wor
ワクワクする未来を語ろう！gooラボ「ネットの未来カンファレンス」開催します - gooラボ スタッフブログ
1月22日（水）に、gooラボOpenTechTalk4を開催。今回は、「画像最適化・CSS設計・Backbone.js」といった幅広いテーマで 開催し、多くの方にご参加いただきました。それでは、当日の模様をお伝えします。 ------------------- トップバッターは、NTTレゾナント(株) トップ編成担当 岡崎 晶彦 テーマは、画像の最適化 (GDO:Graphic Data Optimization←これは岡崎の造語。) 画像を含む視覚情報は、五感のうち80%以上の影響力を持つと言われており、UXに大きく影響します。そこで、画像の最適化の トレンドやニーズやお薦めのツールを紹介。Googleトレンドでも4Kはうなぎのぼりにのびており、iphone5も4K対応済みという 状況を踏まえ、将来の画像度は4Kを基準にするとよいと提唱。画像の最適化で重要な3つのポイント（①画像の数
技術日記＠kiwanami
求められている気がしたので、EmacsLispについて知っていることを書いておこうと思った。 PerlでWebAppの開発に必要なN個のこと - Islands in the byte stream 開発に必要なN個のこと by Google パッケージマネージャ Cask を使うのが今風。先日CartonというPerlのパッケージマネージャと名前がかぶっていたので、改名された。 https://github.com/cask/cask ちなみに、普段使いであれば、Emacs24.xから標準で入っているpackage.elを使うか、el-getを使う。 Bitbucket | The Git solution for professional teams アプリケーションサーバ イベントドリブンなElnodeと、httpd.elをpure Emacsで書きなおした simple-httpd
An introduction to CSS Methodologies: Naming Conventions and File Structures by Danielle on CodePen
123 CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. CSS Methodologies are structured ways of writing and organizing your CSS and HTML. Adopting a standard convention has benefits across small and
チーム開発でのCSS命名規則 - Qiita
SMACSSのイメージ Base ... サイトの基本となるスタイル Layout ... 大枠を囲うエリア Module ... 再利用可能なパーツ Project ... 再利用しないページ固有のパーツ State ... 状態 Theme ... サイトのテーマ(配色) 基本ルール CSSのクラスはモジュール化を意識した命名規則に従ってクラス名をつける。 単語間はハイフン区切りでつなぐ。 ※例としてprofileの下層の子要素はprofile-が引き継がれる。 <div class="m-profile"> <img src="user.png" alt="User Name" class="m-profile-icon"> <strong class="m-profile-name">User Name</strong> <div class="m-profile-content"
2014-05-27 StylusでBEMとかSMACSS CSS Stylus 最新のSass（まだ安定版ではない？）だと@at-rootを利用して以下のようにBEMができる。 .block { @at-root #{&}__element { } @at-root #{&}--modifier { } } 出力結果。 .block { } .block__element { } .block--modifier { } 安定版ではまだ使えないうえ、記述がちょっと面倒。でも、それ、Stylusでできるよ、と。 こんな感じでStylusの標準機能で使えます。 .block &__element color blue 出力結果。 .block { } .block__element{ color: #00f; } 記述もすっきりしていて気持ちいい。 といいつつも、やはり世間的にはSass全盛
You have just been onboarded to an existing project to replace a departing developer. Or maybe you just opened that old project of yours from a few years ago. You are faced with dread and horror when looking at the code. You can do only one thing: Clean up this mess! Does that sound familiar to you? Of course it does, we all encounter this at some point or the other. You know that cleaning up a CS
Keeping it simple with CSS that scales - Andy Bell
This is the written version of my new talk, “Keeping it simple with CSS that scales”, which I first delivered at State of the Browser 2019. It’s a very long read, so I recorded an audio version, too: CSS has a weird place on the web today. There’s a lot of polarisation, with the opinion being seemingly split on “CSS sucks” and “CSS rules, learn it better, fools”. I empathise with the “CSS rules” c
参考 知っておきたいHTMLテンプレート設計法 - OOCSSの基本 ルール 場所に依存した指定方法をしない レゴのように考える スキン 装飾など。smacssでいうモジュールの部分。 構造 骨格。 参考 SMACSSによるCSSの設計 ベースとレイアウト つくってるプロジェクトでは、oocssだけで十分で、smacssはガチで取り入れなくてもいい気がした。理由↓ レイアウト>>使う機会が少ない。gridなどを使う機会があまりない。あるとしても、oocssでいう骨格を作るのと同等（な気がしている）。 テーマルール>>使わなそう モジュール>>oocssのスキン的な考えで十分 状態>>これは普段からやっている気がする。 ベース 要素そのもののデフォルトスタイル レイアウト ページをエリアごとに分割 モジュール 再利用可能なパーツ 状態（ステート） レイアウトやモジュールの特定の状態を示す テ
Decoupling Your HTML, CSS, and JavaScript — Philip Walton
Any non-trivial site or application on the Web today will contain a large amount of HTML, CSS, and JavaScript. As the use of the Internet evolves and our dependence on it increases, having a plan for organizing and maintaining your front-end code is an absolute must. In today’s large Web companies, an increasing number of people are touching an increasingly large percentage of the front-end code.
【CSS】normalize.cssと仲良くなろう！わからない記述をコツコツ調べてみました！ | panmimi design
最近、reset.cssからnormalize.cssに移行したのですが、normalize.cssの内容がなかなか頭に入らないので全ての内容を書き写してみました。 すると、知らない要素や使ったことのないプロパティが出てくる出てくる！ 知らないままだと不安なので、一つずつ調べてみました。今回はその中のいくつかをピックアップしてご紹介します。 ※normalize.cssはこちらからダウンロードできます。 normalize.cssのわからない記述を調べてみます！ まずは最初に記述されているhtmlの設定です。 html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } font-familyはわかるのですが、text-size-adjust: 100%;…これ
The Role of Utility Classes in Scalable CSS | David Clark Develops the Web
Lately, I’ve been thinking about how to write scalable CSS. Not so much about how to pull off snazzy effects, or take advantage of the latest modules, or play clever tricks with preprocessors — but how to create stylesheets that will remain coherent, maintainable, consistent, and extendable as projects grow and change — and how to do this systematically. I’ve been reading everything I can find on
Naming Conventions have proven to be a great guide line for all kind of things people want to name. There are Systematic Names in biology and chemistry, and a specific scheme for postal codes which are kind of a naming convention for regions. Also products have a scheme for getting their names: Books for example have ISBN. Or, more specific, Nokia has naming conventions for their products. Naming
February 28, 2017Front-End Tooling Trends for 2017 Do you have more than two years’ development experience? Are your advanced CSS skills aided with Sass and Autoprefixer? Is your JavaScript knowledge reasonable and you’re happy using Gulp, npm, and jQuery? If so, you’re a typical developer, according to Ashley Nolan’s Front-End Tooling Survey. Lies, Damn Lies, Statistics and Surveys Surveys such a
Nathan provides an introduction to CSS architecture that will help you design a structure for your code so your projects and teams can grow without becoming an unmanageable mess. architecture: the complex or carefully designed structure of something Have you ever worked on a CSS project that gradually became a hot, sticky mess? It’s difficult to keep track of what styles affect what HTML: minor ch
BLOG ブログ ホーム ブログ css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss) 前置き css設計・命名規則の件ですが、マークアップする上で避けては通れない比較的面倒な悩み事です。 案件によってはクライアント様側からのルールが決められている場合もあり、その場合はそのルールに則って構築すれば済むことですが、一般的にはマークアップする方にお任せされることも多いですね。 その場合、個人の好みだったり、その時の流行りなどから、悪く言えば適当に設計されることも多いかと思います。 なんだったら「css設計ってナニ？」的な場合も多々見受けられます… 新規構築も、運用も1人で全て行うような案件であれば問題ないとも言えますが、チームでの構築や運用は別の方(もしくは別会社の方)が行うような場合は、その設計自体や命名規則などがハッキリとしたルールに則ってい
株式会社アンティー・ファクトリーXAチーム（マークアップエンジニアチームの名称）の Advent Calendar 1日目担当の@kokushinです。 業務ではWebサイトのマークアップに加え、JavaScriptを用いた演出・機能実装などを行っております。 プライベートでは、Vue.jsを使ったWebアプリやCSSフレームワークなんかを自作して遊んでおり、最近だとサーバーサイド言語にも手を出し始めました。楽しいです。 CSS設計に関してはまだ苦手意識がありますが、OOCSS・SMACSS・BEM・FLOCSSなどの設計論や、Atomic Designといった考え方が登場したことで昔よりかは随分と良くなりましたね。 弊社では主にFLOCSSを取り入れて業務に活かしているのですが、プライベート開発のときは「独自のCSS設計を考えて実際に使ってみよう」と決めていたので、Webサイトのソースや
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Tom Genoni. Tom built an open source Chrome Extension for analyzing CSS. I’ll let him introduce it. It’s a new web project. You’re starting from scratch. The front end is going to be clean and orderly. You’ve set your defaults. Your CSS files are organized. Y
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 - インプレスブックス
■著者プロフィール 谷 拓樹（たに・ひろき） 株式会社サイバーエージェント フロントエンドエンジニア 中小企業向けのアプリケーション開発、スタートアップでのスマートフォンサイト制作などを経て、現在はコミュニティサービスの開発、UIデザイン、テクニカルディレクションを担当している。Frontrend、JS Girls、html5jなどのコミュニティ活動や講演活動、その他技術書の執筆もおこなう。著書に『HTML5＋CSS3で作る 魅せるiPhoneサイト』（ラトルズ）など。 ●Twitter ●ブログ ●GitHub ■読者のみなさまへ （本書「はじめに」より抜粋） 私がWeb業界での仕事をはじめて10年近くになりますが、もともとはエンジニアというよりは、デザイナーと呼ばれるレイヤーの出身です。規模の小さなITベンチャーで、UIデザイナー兼マークアップエンジニアを勤めるところからはじめ、これま
SMACSSとは、Scalable and Modular Architecture for CSSを略語して「スマックス」と読みます。 CSSには命名規則について悩んだりしますが、その対策のためOOCSSやBEMといったルール作りが定番でした。そのOOCSSやBEMをいいところを交えてできた新しいルールがSMACSSです。「ベース」・「レイアウト」・「モジュール」・「ステート」・「テーマ」の５つのカテゴリーに分けます。 ちなみに私はこの２つのサイトを読ませて頂きました。 SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid SMACSS 読んだ – CHROMA レイアウトルール 「ベース」 ようするにbody部分、Reset.cssやNomalize.cssで対応は十分です。 「レイアウト」 ヘッダー、フッター、サイド、ナビメニュー、コンテンツとして大きく分類さ
Inspired by Mark Otto's tour of GitHub's CSS and Ian Feather's tour of Lonely Planet's CSS, I thought I would join the party and talk about how we do CSS at CodePen. Overview [1] We use SCSS. [2] We use Autoprefixer. [3] We use the Rails Asset Pipeline. [4] The SCSS file that represents the CSS file that actually gets loaded is just a table of contents. [5] We have a style, but mostly just because
Scalable and Modular Architecture for CSS (or SMACSS for short) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. E-book available in
Components Components の命名規則 Elements Elements の命名規則 Element のセレクター 複数の単語が使いたい タグセレクタを避ける Variant Variant の命名 Element の variant ダッシュ・プレフィックス ネストした Component ネストした Component の Variant ネストした Component の単純化 Layout ポジションに関するプロパティを避ける 固定寸法 親要素でポジションを定義する Helpers Helper の命名 Helper の整理 CSS structure ファイル単位でひとつの Component Use glob matching 過剰なネストを避ける 落とし穴 ネストした Component で死亡 懸念事項 その他のリソース その他のソリューション BEM 用
Responsive Deliverables
In a world of growing front-end complexity, what are we handing off to clients? April 02, 2013 During the era of Print Design, companies would approach agencies for a brand identity system. Don Draper would then hire one of two people: either Paul Rand or Saul Bass. Paul Rand’s work with Westinghouse makes a great case study for building a design system. The identity work started with a simple log
Drupal 8 でテーマ開発をしよう（前編） ～Drupal 7 からの変更点とテンプレートとテーマの違い～ | さくらのナレッジ
はじめまして、スタジオ・ウミの大野と申します。さくナレには最初の投稿となりますので、まずは簡単な自己紹介をさせていただきます。 スタジオ・ウミは滋賀県の琵琶湖の畔で Drupal を専門としたウェブ制作会社です。これまでは関西や地元企業のお客様を主体に制作のお仕事をさせていただいておりましたが、今年の4月に東京にもオフィスを開設し、関東圏内でも活動させていただくようになりました。 私が Drupal を初めて触ったのがバージョン 4.7 の頃で、Drupal が好きで好きで他の CMS には目もくれず、今年で開発歴が10年目になってしまいました。私自身はまだエンジニアを自負していますが、社内ではデザイン以外の業務であればディレクションから開発まで、ケースに応じて殆どのことをしています。 本稿では Drupal.org の Theme folder structure の記事を参考に、テーマ
タイムスケジュール平日
11日（月）〜15日(金)は夜の時間帯の開催となります。 平日の大まかな時間の流れ 19時 : 受付開始 19時30分〜21時30分 セッション 22時まで : 撤収 GitについてLevel Up! まだ間に合うGitの使い方を一からくわしく Web関連の開発において、無くてはならない存在となりつつあるGit。共同作業するにも、本番にデプロイするにも、コードの共有やバックアップにも利用できて便利この上ありません。ただ、なかなか導入に踏み切れない敷居の高さがイメージとしてあることも事実。また、1人の人が知っていてもチーム全体で利用できないと、効率的なGitの利用ができません。本セッションではマウス操作だけでGitが扱えるSourceTreeを利用して、初めての方でもGitが使えるようになるということを目指してsessionを行います。 スピーカー : 大串肇 Web制作会社にてデザイナー兼
From Zero to Front-end Hero (Part 1) — Free Code Camp
By Jonathan Z White I remember when I first started learning front-end development. I encountered so many articles, and was so overwhelmed by how much material I would need to learn that I didn’t even know where to start. This guide will help you navigate learning front-end development. It provides learning resources that I found effective in the past, along with supplementary explanations. To kee
)
CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2)
CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2) Denise R. Jacobs | 2013 年 4 月 10 日 CSS アーキテクチャ シリーズで前回(英語) 取り上げた、有名なスケーラブルなモジュール構造のアプローチには、CSS の考え方や CSS の構築方法を変えるのに役立つ特徴がすべて含まれています。これらのアプローチは多くの分野で重なり合っていて、CSS を強化するプロセスのどの側面が真に重要かを示唆しています。新しいサイトを構築するのであれば、いずれのアプローチに従っても問題ありませんが、ここで実行しようとしているのは、手に負えない状態になってしまった既存の CSS を整理することです。 つまり、既に説明したアプローチはどれをとっても優れた威力を発揮しますが、本当に必要なのは、たとえば "Jus
webpack 4 複数のstyl(css)を別ファイルで出力するためのwebpack.config.js | e-joint.jp
webpack 4では extract-text-webpack-plugin が deplicated になったので、代替の minicss-ectract-plugin を使おうと思ったのだけど、簡単にはいかなかった。のでまとめ。 dir.src = 'src' , dir.dest = 'public' って感じです。 ///////////////////////////////////////////////////////////////////////////////////// // Requirement const path = require('path') const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') const MiniCssExtractPlugin =
国内外のWebメディア、ブログから、マーケティングやWeb制作に役立つ注目記事をピックアップ。先週は、EC業界とWeb業界の違い、Illustrator用の便利なスクリプト、フロッグデザインが選ぶ2015年のテックトレンドなどが話題でした（ピックアップ期間＝2015/1/5〜1/11）。 マーケティング／ソーシャル／SEO Webコンテンツの成果を評価するたった1つの指標「One Metric」（前編） | Moz - SEOとインバウンドマーケティングの実践情報（Web担当者Forum） http://web-tan.forum.impressrd.jp/e/2015/01/05/19010 悩ましいコンテンツマーケティングの評価方法を紹介。期待値に対する達成度合いを「One Metric」としてコンテンツ評価に利用するというアプローチ、ぜひ試してみたいですね。 「Web業界からEC業界
【中級者・上級者向け】CSSの理解度チェックシート
今の自分のCSS力を計測するためのチェックシートをつくってみました。足りていない知識やトピックに気付けるよにと作成しています。知らないトピックがあれば、適宜調べながら知識を補っていきましょう。この記事は、定期的に整理して更新していきます。 CSS中級者〜上級者向けの内容が多いかと思いますが、全然わからないという人はこれを元にひとつひとつ調べて理解を深めていきましょう。 リセットCSSを活用している::before、::afterを使いこなせるmin-width、max-widthを使いこなせるメディアクエリーの意味を理解して使いこなせるvw、vhの単位を使いこなせるline-height、letter-spacingを使いこなせるoverflow:hidden、overflow-x、overflow-yを使いこなせるword-breakの使い方がわかるpadding-topを用いて縦横比を
今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。 今回の完成形 今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。 .test-1 { margin-top: 16px; font-size: 16px; } @media screen and (min-width: 600px) { .test-1 { margin-top: 24px; font-size: 18px; } } @media screen and (min-width: 960px) { .test-1 { margin-top: 32px; font-size: 20px; } } .test-2
UX Engineering
A few months ago I was thrilled to be officially deemed a "UX Engineer" (UXE) at LogMeIn. I was going to get the chance to build Design Systems! But once the excitement wore off, I quickly realized how undefined the UXE role is. I tried Googling the position but came up empty handed. Although a few companies, such as Google and Etsy, are starting to hire UXEs, the position differs vastly between c
ちょっと日がたってしまっているのですが、 先日 第25回 デザイナー向けプログラム部 #p4dに参加してきました。 現在コソコソと作成中のアプリをHerokuにデプロイできず1月以上躓いていたところを助けていただきました。 学んだ事を復習を兼ねてメモ。 Railsで作ったアプリをHerokuにデプロイする際の注意点。 /config/application.rbに下記のAsset Pipeline用の設定をする。 config.assets.initialize_on_precompile = false を1行入れるだけ。 長い文字列はString型ではなくText型を使用する HerokuにデプロイするアプリでMySQLを使用していた場合、アップロードしたらDBがMySQLからPostgreSQLに変換されます。 ローカルでMySQLだと問題無く動いていたのですが、PostgreSQL
Sassの力をフルに引き出すには、もっと根っこからCSSのコーディング方法を変える必要がある！と思い、BEMを取り入れたコーディングを始めました。 Sassだけに頼っても、生産性は上がらない！ Sassを使い始めたものの、思ったほど効率が上がらない。なにか引っかかっておりました。いろいろ考えた結果、Sassがどうとかじゃなくて、自分のコーディングスタイルをもっと見なおした方がいいという結論に。 「CSS設計の教科書」を読む そんな折、「Web制作者のためのCSS設計の教科書」という書籍が発売されていたので購入。今の自分にぴったり。早速読んでみました。 冒頭で、破綻しやすいコーディング例の紹介がありました。その中の一つに、IDセレクタを起点にして、その子要素のhtmlにスタイルを当てるやり方が解説されていて、まさに自分が当てはまっていました。 この記法はhtmlは汚れずらいけど、htmlが変
webpackでRailsアプリのアセットをビルドする - Money Forward Developers Blog
エンジニアの大塔です。 現在はRailsアプリのフロントをメインで触ってます。 webpackerに頼らないフロントエンドビルド環境を構築してみたので、そのお話をします。 背景 フロントエンドではNode.jsを使ってJavaScriptやCSS等のアセットをトランスパイルすることが一般的になったかと思います。 思い出すだけでも、フロントエンドではgrunt, Browserify, webpack, SystemJS, rollup.jsと色々なフロントエンドのビルドに絡むツールが出てきました。 自分自身も、元々はBrowserifyやwebpackでES6やTypeScriptのビルドを実行していました。 そのため、初めてRails絡みのプロジェクトに参加してから、Sprocketsによって管理されるアセットに触れ、モダンなフロントエンドとRailsの折衷をどうすれば良いか色々考えてい
Domain error
Domain error Failed to resolve DNS path for this host
HTMLとCSSの学習書で有名なものは初心者向けのものが多く、ある程度知識を身に付けて後は独学で進めてきたというWebデザイナー、エンジニアの方が多いのではないでしょうか。確かにWeb上に様々な情報が掲載されているので、独学で学べる内容も多いかもしれません。ただ、やはり書籍というのは1冊に情報がまとまっており、体系立てて知識を覚えていくためにはとても有効な手段です。 今回は、中級者・上級者向けのHTMLとCSSに関する本を中心に、一人前のWebデザイナーであれば押さえておきたい知識が紹介されている書籍をご紹介していきたいと思います。 CSS、Sass関連のおすすめ書籍 シンプルなようで奥が深い、CSSやSass関連のおすすめ書籍です。CSSはしっかりと管理しておかないと後でメンテナンス性が低下してしまったり、チームで制作を行う場合は制作における効率が低下してしまったりします。より分かりやす
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
StylusでBEMとかSMACSS - blog.strobe-scope.net
Cleaning Up a CSS Codebase — SitePoint
oocss&smacss&bemでのcss改善まとめ - Qiita
CSS Naming Conventions: Less Rules, more Fun
Front-End Tooling Trends for 2017 — SitePoint
Thoughtful CSS Architecture and Organization
css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss)
2017年度・自分なりのWebサイト制作向けCSS設計論 - Qiita
Starting A Refactor With CSS Dig | CSS-Tricks
SMACSS（スマックス）について自分なりのまとめ
CodePen's CSS by Chris Coyier on CodePen
SMACSS - Scalable and Modular Architecture for CSS
RSCSS という CSS 設計について - PYTHONIC BOOM BOOM HEAD
Web業界とEC業界の違い／イラレ便利スクリプト／2015年テックトレンド
初心者でも分かるscssのメディアクエリをまとめる「mqpacker」の使い方
normo.jp | 第25回 デザイナー向けプログラム部 #p4dに参加してきました。
Sassがきっかけで変化したCSSコーディング。BEMを取り入れてみました。 – Stella Design
中上級者のためのHTML＋CSSのおすすめ書籍 | Web Design Trends