小学算数1200472 views

Computer368134 views

LaTeX962207 views

雑学1473627 views

高校国語788355 views

中学社会668782 views

世界の国564562 views

中学理科1630686 views

英語613685 views

中学英語811754 views

HTML/CSS

記号・文字

インライン要素

ブロック要素

CSSによる装飾

CSSのコード規約

Help

Tools

News Spreadsheet Calendar Bookkeeping Markdown Tables Language Model News Slides Tier List Pen Tool Illustration Crayon Watercolor Pixel Art ASCII Art Perspective Endless Stairs Graph Mind Map ER Diagram Family Tree Meme Curved Text Image Editor Mosaic Retro Filter Pencil Sketch Swirl Effect Line Art OCR/Highlighter Makeup Editor Favicon Video Trimmer Scrolling Video Video Title Color Picker Color Extractor Bonfire Fireworks Cherry Blossom Water Ripple Water Splash Breaking Glass Glass Texture Fabric Texture Wood Grain Marble Texture Brick Wall Texture Metal Texture Washi Paper Texture Cardboard Texture CSS Button Icon Maker Bar Chart Grouped Bar Chart Stacked Bar Chart Pie Chart Line Chart Area Chart Stacked Area Chart Scatter Plot 3D Bar Chart 3D Pie Chart Bar Chart Race Bubble Chart Population Pyramid Pictogram Earnings Candlestick Chart Investment Risk Mortgage Simulator Calculator Matrix Calculator Function Graph Polynomial Expansion Venn Diagram Field Visualizer Rubik's Cube Group Theory Traveling Salesman Voronoi and Delaunay Fractal Column Arithmetic Draw Math Figures Arithmetic Animation Arithmetic Word Problems Counting with Tree Diagrams Cube Nets Rolling Dice Cross Sections Motion Path Mechanics Waves Electromagnetic Waves Capacitors Light and Lenses Thermodynamics How Semiconductors Work Molecular Structures Atomic Orbitals Electrochemical Cells Chemical Equilibrium Crystal Lattices Buffer pH Organic Reaction Map Periodic Table Complex Ions DNA Double Helix Cell Division Membrane Channels Nerve Impulse Muscle Contraction Hormones and Homeostasis Rock Classification Weather Constellations Solar and Lunar Eclipses 3D Modeling Floor Plan Seismic Structures Intersection Turn Maglev Cooking Animation Origami Live Viewer Count GeoJSON Map Railway Map Population Map Crime Map Land Price Map School Map Shrine and Castle Map House of Representatives Map Word Map Solitaire Reversi Hakoiri Musume Chess Hamburger Ripple Slide Puzzle Maker Neon Pinball Novel Maker Japanese Typing Practice Piano Score Editor Music Theory Shogi Strategy Piano Rhythm Game

English

© Rollpie

BEMから脱出したHTMLとCSSのコーディング規約を考えた

BEM に代わるスタイルを考えた：

<div class="header">
	<div class="header-left">
		<div class="headerLeft-logo"></div>
		<div class="headerLeft-categories"></div>
	</div>
	<div class="header-right">
	</div>
</div>

親子関係はハイフンで表す。ブロックやエレメントの区別はなく、要素名はキャメルケースにする。

コーディング規約・命名規則も考えた：

色やフォントサイズなどのみを指定する個別のクラスを使わない

コピー・ペーストを悪と考えない

クラス名に日本語を使わない

子要素を持たない要素に class をふらない

float でなく flex を使う

before や after を駆使する

無駄な省略形を使わない

div で a タグを囲うことに躊躇する

複数形を駆使する

兄弟関係をアンダースコアで明示する