悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
タグ
- すべて
- 3d (17)
- 404 (4)
- ADR (5)
- AWS (171)
- Accessibility (109)
- ActiveRecord (25)
- Amazon (6)
- Android (5)
- Apache (11)
- Apollo (13)
- App Runner (5)
- Architecture (185)
- Atomic Design (17)
- BEM (41)
- CI (39)
- CSS (827)
- CSS in JS (19)
- Chrome (130)
- CircleCI (31)
- CoffeeScript (18)
- Copilot (8)
- DI (6)
- Datadog (11)
- Design Pattern (10)
- Design System (67)
- ECMAScript (6)
- ES6 (30)
- Economy (14)
- Fargate (16)
- Flexbox (24)
- Git (170)
- GitHub Actions (24)
- GitHub Pages (7)
- Google (81)
- Grunt (85)
- Hotwire (13)
- Illustrator (12)
- Java (8)
- JavaScript (759)
- Jenkins (6)
- Jest (11)
- Learn (7)
- Linux (50)
- Material Design (24)
- Microservices (19)
- Mocha (6)
- Next.js (52)
- Node.js (136)
- PWA (9)
- Performance (362)
- Puma (8)
- RSpec (45)
- Rails (465)
- React (340)
- React Native (7)
- Responsive Image (24)
- Responsive Web Design (5)
- Route53 (6)
- RuboCop (9)
- Ruby (209)
- SEO (37)
- SQL (8)
- SSL (5)
- SVG (147)
- SWR (9)
- Sass (163)
- Service Worker (21)
- Sketch (23)
- Slide (672)
- Soccer (5)
- Spring Boot (18)
- Static Site Generator (6)
- Storybook (47)
- Sublime (14)
- TDD (12)
- Tutorial (586)
- TypeScript (64)
- UI (133)
- UX (52)
- Unix (9)
- Vagrant (36)
- Vue.js (65)
- Web Components (31)
- Web Design (258)
- WebAssembly (12)
- WebGL (9)
- Webdesign (9)
- Work (43)
- ai (18)
- ajax (9)
- amp (15)
- angular (20)
- animation (179)
- ansible (23)
- api (41)
- app (52)
- apple (18)
- async (22)
- atom (41)
- babel (5)
- backbonejs (12)
- background (9)
- backup (6)
- bash (20)
- bff (6)
- blog (12)
- book (92)
- bookmarklet (7)
- bootstrap (26)
- bower (7)
- browser (110)
- browserify (21)
- build (5)
- bundler (9)
- business (16)
- button (13)
- cache (11)
- calc (5)
- call (5)
- cancancan (5)
- canvas (34)
- capistrano (12)
- capitalism (5)
- capybara (9)
- career (23)
- cdn (8)
- centering (6)
- chart (10)
- cheatsheet (16)
- chef (8)
- class (12)
- classname (5)
- cli (19)
- click (7)
- codereview (12)
- coding (44)
- color (50)
- command (5)
- compass (10)
- component (24)
- cookie (13)
- criticalpath (5)
- criticalrenderingpath (8)
- crossbrowser (16)
- css3 (54)
- cssmodules (11)
- customfield (8)
- custommenu (8)
- customposttype (18)
- customtaxonomy (11)
- d3js (11)
- data (6)
- database (18)
- db (7)
- debug (25)
- deeplearning (8)
- deferred (9)
- deploy (31)
- design (129)
- development (100)
- devise (8)
- devops (17)
- devtools (30)
- dhh (6)
- directory (11)
- direnv (6)
- display (5)
- dns (5)
- docker (132)
- document (124)
- dom (23)
- drag (5)
- dummy (7)
- e2e (9)
- ecs (31)
- ecss (5)
- editor (6)
- education (6)
- effect (24)
- electron (10)
- em (16)
- emoji (7)
- engineer (37)
- english (19)
- error (10)
- eslint (9)
- event (21)
- evernote (6)
- express (7)
- extend (7)
- extension (55)
- fastly (6)
- favicon (8)
- fetch (5)
- figma (8)
- filter (8)
- firefox (8)
- flat (11)
- float (5)
- flux (19)
- font (79)
- form (70)
- framework (28)
- free (16)
- frontend (84)
- function (6)
- functionsphp (6)
- gallery (36)
- game (13)
- gem (43)
- generator (51)
- ghq (9)
- gif (6)
- gitflow (5)
- github (176)
- go (10)
- golang (7)
- googleanalytics (5)
- googlemap (11)
- gpu (13)
- gradation (20)
- graph (6)
- graphql (42)
- grid (31)
- gulp (83)
- heroku (11)
- history (52)
- homebrew (18)
- hook (9)
- hooks (7)
- houdini (7)
- hover (14)
- html (121)
- html5 (73)
- http (34)
- http2 (17)
- https (16)
- hubot (7)
- iOS (18)
- iPad (6)
- iam (8)
- icon (52)
- ie (32)
- image (68)
- immutableinfrastructure (8)
- import (6)
- infrastructure (14)
- input (5)
- interaction (12)
- interview (7)
- iphone (5)
- itamae (5)
- jQuery (195)
- jade (9)
- jamstack (12)
- japan (12)
- japanese (7)
- jasmine (5)
- json (5)
- jwt (8)
- karma (5)
- kernel (5)
- kit (6)
- koa (6)
- kubernetes (6)
- lambda (7)
- layout (32)
- learning (14)
- less (6)
- library (286)
- life (16)
- lightbox (9)
- line (6)
- lineheight (6)
- links (68)
- lint (7)
- loading (54)
- localstorage (5)
- log (16)
- mac (61)
- machinelearning (9)
- mackerel (12)
- mail (5)
- management (61)
- map (19)
- margin (5)
- markdown (18)
- markup (14)
- math (9)
- mediaquery (19)
- memory (9)
- middleman (14)
- migration (7)
- mobile (74)
- modal (8)
- model (15)
- module (30)
- monitoring (9)
- music (5)
- mvc (10)
- mysql (33)
- navigation (39)
- navigationtiming (6)
- neta (8)
- network (41)
- nginx (30)
- npm (70)
- npmscripts (9)
- nthchild (6)
- oocss (16)
- oop (21)
- oss (5)
- package (63)
- pagenation (5)
- pagespeed (11)
- parallax (18)
- path (6)
- pattern (14)
- peco (32)
- percol (6)
- perspective (5)
- phantomjs (7)
- philosophy (88)
- photo (7)
- photoshop (48)
- php (29)
- picture (18)
- plugin (232)
- png (7)
- pokemongo (34)
- politics (6)
- polyfill (9)
- polymer (14)
- portfolio (8)
- postcss (19)
- prefetch (8)
- presentation (10)
- prettier (5)
- print (8)
- privacy (11)
- processing (6)
- programming (122)
- promise (18)
- prototype (15)
- publish (6)
- pullrequest (15)
- px (6)
- python (16)
- rack (11)
- ransack (5)
- rds (7)
- reactive (5)
- readme (6)
- rebase (5)
- recoil (8)
- redux (45)
- refactoring (32)
- reference (28)
- regexp (10)
- rem (9)
- rendering (34)
- reproduce (40)
- require (6)
- reset (8)
- responsive (150)
- rest (8)
- role (5)
- rollup (8)
- routing (7)
- rss (9)
- s3 (11)
- sakura (9)
- scansnap (10)
- scraping (8)
- scroll (45)
- scrum (11)
- search (10)
- security (98)
- selenium (14)
- self (5)
- server (12)
- serverspec (7)
- shadowdom (5)
- shapes (12)
- shell (37)
- shellscript (8)
- slack (17)
- slider (6)
- slim (6)
- smacss (14)
- sns (11)
- sociality (7)
- spa (24)
- specificity (8)
- sprite (15)
- sqs (5)
- srcset (11)
- ssh (13)
- ssr (7)
- statistics (5)
- stream (17)
- styleguide (53)
- stylus (9)
- susy (6)
- swagger (7)
- systemd (7)
- tab (8)
- table (8)
- tailwind (12)
- technology (15)
- template (17)
- terminal (16)
- terraform (11)
- test (175)
- text (25)
- theme (20)
- theory (89)
- this (5)
- threejs (5)
- time (9)
- timeline (5)
- tips (10)
- tmux (8)
- tool (11)
- tools (6)
- tooltip (9)
- touch (13)
- transform (12)
- transition (5)
- travisci (18)
- twitter (7)
- typography (65)
- usability (29)
- validation (7)
- velocity (7)
- version (7)
- video (49)
- vim (135)
- virtualdom (13)
- visualization (6)
- w3c (17)
- waiaria (18)
- web (58)
- webfont (15)
- webpack (49)
- webpacker (5)
- webservice (181)
- webサービス (12)
- web制作 (21)
- whatwg (5)
- windows (7)
- wordPress (188)
- workflow (19)
- wpquery (5)
- xss (5)
- yarn (12)
- yeoman (8)
- zindex (13)
- zsh (34)
- 自炊 (11)
- 設定 (6)
- 電子書籍 (10)
- CSS (827)
- JavaScript (759)
- Slide (672)
- Tutorial (586)
- Rails (465)
- Performance (362)
- React (340)
- library (286)
- Web Design (258)
- plugin (232)
smacssとoocssに関するsh19eのブックマーク (4)
-
sh19e 2014/09/09
- oocss
- CSS
- smacss
- Architecture
- Slide
リンク -
-
CSS アーキテクチャ、パート 4: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 3 と 4)
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 CSS アーキテクチャ、パート 4: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 3 と 4) Denise R. Jacobs | 2013 年 5 月 9 日 野放し状態の CSS を管理するのは容易ではありません。有名な スケーラブルなモジュール構造の CSS のアーキテクチャ (英語) を学んだ方は、CSS についてのチームの苦悩の原因を突き止めることができたことに大喜びすると同時に、そこで提案された変更をドキュメントやワークフローに追加する方法を見積もってみて愕然としたに違いありません。 MetaCoax による CSS のリファクタリング プロセス (英語) では、
-
CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2)
CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2) Denise R. Jacobs | 2013 年 4 月 10 日 CSS アーキテクチャ シリーズで前回(英語) 取り上げた、有名なスケーラブルなモジュール構造のアプローチには、CSS の考え方や CSS の構築方法を変えるのに役立つ特徴がすべて含まれています。これらのアプローチは多くの分野で重なり合っていて、CSS を強化するプロセスのどの側面が真に重要かを示唆しています。新しいサイトを構築するのであれば、いずれのアプローチに従っても問題ありませんが、ここで実行しようとしているのは、手に負えない状態になってしまった既存の CSS を整理することです。 つまり、既に説明したアプローチはどれをとっても優れた威力を発揮しますが、本当に必要なのは、たとえば "Jus
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設定を変更しましたx