チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめ
エラーの発見や回避、フォーマットの一貫性、重複の回避。チームでCSSを書くときにの生産性とメンテナンス性をあげたいときに便利なツールが「Stylelint」です。特徴と導入方法を解説します。 フロントエンド開発はすでに円熟期に入っており、コード品質管理ツールの使用も増えてきました。このことがよく表れているのは、JavaScriptのエコシステムです。JavaScriptにおけるLintツールは、フロントエンド開発者がコードの正しい構成と一貫性を保証するために使われます。ツールに関する最近の調査では、開発者の大多数がJavaScriptでLintツールを使っていると答えました。 CSSコーディングでは、コード品質管理ツールの使用に向けた動きはいくぶん緩やかで、同様の調査では開発者の大半がワークフローでCSSのLintツールを使っていないと答えました。 この記事では、スタイルシートにおけるli
CSSのコードを整理し、効率的に管理する方法のまとめ
CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。 CSSを効率的に管理する一連のソリューションについて紹介します。 OOCSSはオブジェクト指向のCSSの略です。OOCSSのアプローチには、2つのポイントがあります。 構造とデザインの分離 コンテナとコンテンツの分離 このアプローチにより、制作者は異なる場所でも使用できる総合的なclassを利用することができます。 これには、良いニュースと悪いニュースがあります 良いニュース: 再利用することで、コードの量を減らします。「DRY Principle」と呼ばれるものです。 悪いニュース: 保守が複雑になります。特定の要素のスタイルを変更する時、ほとんどのclassが共通で使用されているため、そのスタイ
BEMによるフロントエンドの設計 | 第1回 基本概念とルール
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
【CSS】CSSプロパティの記述順について考えてみた | unitopi - ユニトピ -
こんにちは！ 新米ライターのケインでございます。 前回の記事で予告した通り、今回は「CSSのプロパティ記述順」についてお話致します。 CSSプロパティ記述順の公式ルールは存在する？ CSSプロパティの記述順については、厳密に定義されたルールは存在しません。 ですが、推奨記述順に関するガイドラインというのは、FireFoxでおなじみMozilaさんの「mozilla.org Base Styles（※上部に記載されているSuggested orderの箇所）」や、W3Cさんの「CSS2 Specification」で掲載されているようです。 mozilla.org Base Stylesではどう推奨しているか？？ Suggested order:（※Mozillaさんより抜粋） display list-style position float clear width height marg
はじめてのCSS設計 - Qiita
少し前からBEMやSMCASSなどのCSS設計などを知り、なるほどこういう方法があるのかと、苦戦しながら実践していました。 そんな中@hiloki@githubさんが自前でFLOCSSというCSS設計思想をGithubで公開していたので、 自分もこういうの作ってみたい！と思いたち、 稚拙ながら設計を考えてみました。 OOCSS,SUIT,SMACSS,FLOCSSあたりを参考にしています。 CSSのカテゴライズ Base Component Unit layout pack Asset utility assist CSSをこのように分割します。 Base SMACSSのBaseにあたるものです。 Component ページを構成するパーツのすべてです。 再利用しやすいよう、親に依存せず、Component単独でスタイルを維持できるように設計します。 Componentは自分自身の見た目の
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
