安田学 manabuyasuda

DORCSS(division of roles CSS)

DORCSS（ドールシーエスエス）はRole（役割）を分担・分割（Division）することで影響範囲を管理する、CSS設計の構成案です。

基本的な考え方は、

デザインカンプをコーディングするときに困りがちなことや、こうしてもらえると助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。

このドキュメントは指示ではなく、エンジニア目線の提案です。必ずしも正しいとは考えていませんし、このドキュメントをもとに意見を出し合えたらと思っています。

基本的にデザインカンプに残して欲しいとしていますが、共有されているのであればデザインカンプ以外でも構いません。デザイナーの頭の中にだけある状態はさけたいと考えているので、ストックしておく場所としてデザインカンプを選んでいます。

ツーツはPhotoshopを想定しています。これは単純にPhotoshopで作られることが多いからです。違うツールを使っている場合は、読み替えるか、読み飛ばしてください。

	/**
	* @desc - 現在のスクリーンサイズを返します。
	* @return {Number} currentScreenWidth
	* @example
	* var currentScreenWidth = isScreenWidth();
	$(window).on('resize', debounce(function() {
	currentScreenWidth = isScreenWidth();
	}, 200));
	*/
	function isScreenWidth() {

	$(function() {

	/**
	* Q&Aのような対になるアコーディオンコンポーネントに対応できます。
	*/
	$('.js-accordion__list').on('click', function() {
	$(this).toggleClass('is-active').next().toggleClass('is-active');
	});

	});

	block variables
	doctype html
	html(lang="ja")
	head(prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#")
	meta(charset="UTF-8")
	meta(http-equiv="X-UA-Compatible" content="IE=edge")
	meta(name="viewport" content="width=device-width, initial-scale=1.0")
	title #{pageTitle}
	meta(name="description" content=pageDescription)
	meta(name="keywords" content=pageKeywords)

	@mixin _border-shadow($size: 1px, $color: currentColor) {
	box-shadow:
	$size 0 0 0 $color,
	0 $size 0 0 $color,
	$size $size 0 0 $color,
	$size $size 0 0 $color inset;
	}

	p= 'Q&A'
	//- <p>Q&A</p>


	- var pageUrl= relativePath;
	- var currentUrl = '/' + pageUrl;
	ul
	li
	a(class={isCurrent: currentUrl === '/index.html'} href='/index.html') Home
	li

	function elementHide() {
	$(document).on('click', function(e){
	if( !$(e.target).closest('.element1, .element2').length ){
	$('.element1').removeClass('is-active');
	}
	});
	}
	elementHide();