Submit Search
Upload
CSS와 BEM
•
12 likes
•
1,583 views
성훈 백
Follow
안녕하세요! GDG `CSS와 BEM`세션 발표자료 공유드립니다.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 95
Download now
Download to read offline
Recommended
BEM It! for Brandwatch
BEM It! for Brandwatch
Max Shirshin
HTML5 Canvas
HTML5 Canvas
Robyn Overstreet
Open source APM Scouter로 모니터링 잘 하기
Open source APM Scouter로 모니터링 잘 하기
GunHee Lee
BEM - CSS, Seriously
BEM - CSS, Seriously
Roland Lösslein
Vue Vuex 101
Vue Vuex 101
LocNguyen362
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
경원 이
HTML Semantic Elements
HTML Semantic Elements
Reema
Introduction to Javascript
Introduction to Javascript
Amit Tyagi
Recommended
BEM It! for Brandwatch
BEM It! for Brandwatch
Max Shirshin
HTML5 Canvas
HTML5 Canvas
Robyn Overstreet
Open source APM Scouter로 모니터링 잘 하기
Open source APM Scouter로 모니터링 잘 하기
GunHee Lee
BEM - CSS, Seriously
BEM - CSS, Seriously
Roland Lösslein
Vue Vuex 101
Vue Vuex 101
LocNguyen362
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
경원 이
HTML Semantic Elements
HTML Semantic Elements
Reema
Introduction to Javascript
Introduction to Javascript
Amit Tyagi
CSS3 notes
CSS3 notes
Rex Wang
Local storage
Local storage
Adam Crabtree
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Scouter와 influx db – grafana 연동 가이드
Scouter와 influx db – grafana 연동 가이드
Ji-Woong Choi
JavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
HTML5
HTML5
Hatem Mahmoud
HTML5 Local Storage
HTML5 Local Storage
Lior Zamir
Spring Data Jpa
Spring Data Jpa
Ivan Queiroz
Introduction to HTML5 Canvas
Introduction to HTML5 Canvas
Mindy McAdams
Promises, Promises
Promises, Promises
Domenic Denicola
A Deeper look into Javascript Basics
A Deeper look into Javascript Basics
Mindfire Solutions
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
NAVER Engineering
HTML CSS JS in Nut shell
HTML CSS JS in Nut shell
Ashwin Shiv
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
Soumen Santra
Introduction à React JS
Introduction à React JS
Abdoulaye Dieng
Django admin site 커스텀하여 적극적으로 활용하기
Django admin site 커스텀하여 적극적으로 활용하기
영우 박
Intro to HTML5 audio tag
Intro to HTML5 audio tag
satejsahu
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
Ji-Woong Choi
Html5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
Html5 Basics
Html5 Basics
Pankaj Bajaj
The Cascade is Dead
The Cascade is Dead
chriseppstein
HTML and CSS Coding Standards
HTML and CSS Coding Standards
Saajan Maharjan
More Related Content
What's hot
CSS3 notes
CSS3 notes
Rex Wang
Local storage
Local storage
Adam Crabtree
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Scouter와 influx db – grafana 연동 가이드
Scouter와 influx db – grafana 연동 가이드
Ji-Woong Choi
JavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
HTML5
HTML5
Hatem Mahmoud
HTML5 Local Storage
HTML5 Local Storage
Lior Zamir
Spring Data Jpa
Spring Data Jpa
Ivan Queiroz
Introduction to HTML5 Canvas
Introduction to HTML5 Canvas
Mindy McAdams
Promises, Promises
Promises, Promises
Domenic Denicola
A Deeper look into Javascript Basics
A Deeper look into Javascript Basics
Mindfire Solutions
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
NAVER Engineering
HTML CSS JS in Nut shell
HTML CSS JS in Nut shell
Ashwin Shiv
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
Soumen Santra
Introduction à React JS
Introduction à React JS
Abdoulaye Dieng
Django admin site 커스텀하여 적극적으로 활용하기
Django admin site 커스텀하여 적극적으로 활용하기
영우 박
Intro to HTML5 audio tag
Intro to HTML5 audio tag
satejsahu
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
Ji-Woong Choi
Html5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
Html5 Basics
Html5 Basics
Pankaj Bajaj
What's hot
(20)
CSS3 notes
CSS3 notes
Local storage
Local storage
An introduction to Vue.js
An introduction to Vue.js
Scouter와 influx db – grafana 연동 가이드
Scouter와 influx db – grafana 연동 가이드
JavaScript & Dom Manipulation
JavaScript & Dom Manipulation
HTML5
HTML5
HTML5 Local Storage
HTML5 Local Storage
Spring Data Jpa
Spring Data Jpa
Introduction to HTML5 Canvas
Introduction to HTML5 Canvas
Promises, Promises
Promises, Promises
A Deeper look into Javascript Basics
A Deeper look into Javascript Basics
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
HTML CSS JS in Nut shell
HTML CSS JS in Nut shell
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
Introduction à React JS
Introduction à React JS
Django admin site 커스텀하여 적극적으로 활용하기
Django admin site 커스텀하여 적극적으로 활용하기
Intro to HTML5 audio tag
Intro to HTML5 audio tag
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
Html5 and-css3-overview
Html5 and-css3-overview
Html5 Basics
Html5 Basics
Similar to CSS와 BEM
The Cascade is Dead
The Cascade is Dead
chriseppstein
HTML and CSS Coding Standards
HTML and CSS Coding Standards
Saajan Maharjan
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
vzaccaria
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Edition
bensmithett
Css Systems
Css Systems
Stephen Burgess
How to write css
How to write css
chengbo xu
Building Performance - ein Frontend-Build-Prozess für Java mit Maven
Building Performance - ein Frontend-Build-Prozess für Java mit Maven
Oliver Ochs
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...
Michael Posso
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
Michael Posso
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
In a Rocket
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
Aaron Gustafson
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
Jake Johnson
Rock Solid CSS Architecture
Rock Solid CSS Architecture
John Need
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
chriseppstein
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Deepu S Nath
Php ppt
Php ppt
Maharishi Dayanand university
Giacomo Zinetti - 1001 ways to write CSS today - Codemotion Rome 2019
Giacomo Zinetti - 1001 ways to write CSS today - Codemotion Rome 2019
Codemotion
SCSS Implementation
SCSS Implementation
Amey Parab
CSS Methodology
CSS Methodology
Zohar Arad
Roadmap 01
Roadmap 01
quangnv17071980
Similar to CSS와 BEM
(20)
The Cascade is Dead
The Cascade is Dead
HTML and CSS Coding Standards
HTML and CSS Coding Standards
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Edition
Css Systems
Css Systems
How to write css
How to write css
Building Performance - ein Frontend-Build-Prozess für Java mit Maven
Building Performance - ein Frontend-Build-Prozess für Java mit Maven
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
Rock Solid CSS Architecture
Rock Solid CSS Architecture
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Php ppt
Php ppt
Giacomo Zinetti - 1001 ways to write CSS today - Codemotion Rome 2019
Giacomo Zinetti - 1001 ways to write CSS today - Codemotion Rome 2019
SCSS Implementation
SCSS Implementation
CSS Methodology
CSS Methodology
Roadmap 01
Roadmap 01
More from 성훈 백
GDSC_백성훈.pdf
GDSC_백성훈.pdf
성훈 백
Frontend test-environment 이해하기
Frontend test-environment 이해하기
성훈 백
GraphQL이란?
GraphQL이란?
성훈 백
Css system
Css system
성훈 백
Es6 module
Es6 module
성훈 백
CSS Rendering - 1
CSS Rendering - 1
성훈 백
More from 성훈 백
(6)
GDSC_백성훈.pdf
GDSC_백성훈.pdf
Frontend test-environment 이해하기
Frontend test-environment 이해하기
GraphQL이란?
GraphQL이란?
Css system
Css system
Es6 module
Es6 module
CSS Rendering - 1
CSS Rendering - 1
Recently uploaded
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
Recently uploaded
(20)
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
CSS와 BEM
1.
백성훈Seonghoon Baek CSS 와
BEM
2.
CSS의 의미와 특징 CSS의
방법론과 BEM CSS Modules BEM과 CSS Modules
3.
CSS
4.
Presentation
5.
Sizing Positioning CSS for Presentation Painting
6.
Responsive CSS for Presentation Functions Dynamic
control
7.
CSS의 의미
8.
CascadingStyleSheet
9.
CascadingStyleSheet
10.
inheritance Cascade rules
11.
user-agent inheritance Cascade rules
12.
user-agent selectors inheritance Cascade rules
13.
user-agent selectors source order inheritance Cascade rules
14.
user-agent inline selectors source order inheritance Cascade rules
15.
!important user-agent inline selectors source order inheritance Cascade rules
16.
Cascading user-agent inline selectors inheritance
17.
CSS의특징
18.
!important inline selectors source order inheritance Cascade rules user-agent
19.
CSS의 특징 GlobalNamespace
20.
CSS의 확장 implicit dependencies Dead
Code Global Namespace Restyling
21.
implicit dependencies Dead Code Global
Namespace CSS의 확장 Readable less calculate Sustainable Isolation Restyling
22.
Design Methodology
23.
Naming Convention /
File Structure
24.
Naming Convention
25.
Naming Convention .navigation >
div
26.
Naming Convention > div.navigation ?
27.
Naming Convention 1. 의미있는
단어로 지정해야 합니다.
28.
Naming Convention .navigation >
div:not(.logo)
29.
less calculate .item .item .logo .item .navigation >
div:not(.logo)
30.
less calculate .item .item .logo .navigation >
div:not(.logo) .item
31.
less calculate .item .item .logo .navigation >
div:not(.logo) .item Event & Restyling
32.
less calculate 2. 선택자의
복잡성은 웹 성능을 저하시킨다.
33.
Naming Convention 1. 의미있는
단어로 이름을 짓자. 2. 선택자의 복잡성을 줄이자.
34.
B E M
35.
BEM ?
36.
BEM ?
37.
1. Unintentional dependencies 2.
Long cascade rules 3. An out of control Classes
38.
BEM ?
39.
HTML-Interface BEM ?
40.
Block+Block+Block Block+Block+Block BEM ? Block+Block+Block
41.
BEM ? Block Element Modifier
42.
BEM ? Block__Element—Modifier
43.
BEM ? Block__Element—Modifier
44.
B- independentanywhereonthepage BEM ?
45.
B- independentanywhereonthepage =
Component BEM ?
46.
BEM .navigation
47.
B- independentanywhereonthepage =
Component E- nomeaningonitsown,it’snameofapartforfunction BEM ?
48.
BEM .navigation .navigation__link
49.
B- independentanywhereonthepage =
Component E- nomeaningonitsown,it’snameofapartforfunction M-differentversionofablockoranelement BEM ?
50.
BEM .navigation .navigation__link .navigation__link—active
51.
1.Useclassnameselectoronly A rules of
BEM 2.Notagnameorids 3.Nodependencyonotherblocks/elementsonapage
52.
.navigation .navigation—item .navigation—item__last .navigation .item:nth-last-child(1) .item BEM is
53.
.navigation .navigation—item Readable less calculate Sustainable Isolation .navigation—item__last BEM is
54.
Preprocessor BEM and
55.
BEM and
56.
BEM and .navigation { &—item
{ &__last { } } } .navigation .navigation—item .navigation—item__last SASS CSS
57.
BEM Examples
58.
BEM Examples Navigation
59.
BEM Examples Navigation Navigation__inner Navigation__logo Navigation__links
60.
BEM Examples Navigation Navigation__inner Navigation__logo Navigation__linksNavigation__link—active
Navigation__link
61.
예제를 더 보기쉽게
박스
62.
FileStructure
63.
File Structure
64.
File Structure
65.
File Structure
66.
ComponentDrivenDesign
67.
File Structure Component
68.
Components CSS Javascript HTML CSS Javascript HTML +
69.
BME Examples
70.
71.
CSS and BEM CSS문제를
CSS로 개발자의 인지적 노력 Preprocessor
72.
Out of CSS
73.
Out of CSS In
Javascript
74.
in javascript with
Webpack
75.
76.
Plugins in Webpack
77.
CSS Modules in
Webpack
78.
CSS Modules in
Webpack header.scss
79.
CSS Modules in
Webpack Filename Class HashComponent =
80.
CSS Modules
81.
Plugins
82.
Readable less calculate Sustainable Isolation CSS Modules
83.
CSS and CSS
Modules Webpack 학습, 제한적 환경 No more conflicts. CSS in JS with Webpack
84.
BEM과 CSS Modules
85.
BEM과 CSS Modules header__container___2TL19navigation__navigation-links
86.
BEM과 CSS Modules in
CSS in Javascript 개발자의 인지적 노력 Webpack 별다른 도구 없이 웹팩, 바벨, 플러그인....
87.
BEM과 CSS Modules 나에게
맞는 걸 선택하자.
88.
implicit dependencies Dead Code Global
Namespace CSS를 이해하자 Readable less calculate Sustainable Isolation Restyling
89.
90.
CSS의 의미와 특징 CSS의
방법론과 BEM CSS Modules BEM과 CSS Modules
91.
Q & A
92.
Github : https://github.com/Lutece e-mail
: lallaworld1st@gmail.com
93.
발표 후 많은
분들이 질문을 해주셨는데 시간이 없어 모두 답변하지 못해 많이 아쉬웠습니다. 그래서 질문을 위한 저장소를 만들었습니다. URL : https://github.com/Lutece/Ask-for-everything 이 곳에서 Issues에 질문을 올려주시면 시간이 되는대로 꼭 답변해드리겠습니다. (저는 github를 상시에 확인합니다.)
94.
경청해주신 모든 분들께
감사드립니다.
95.
감사합니다.
Download now