안녕하세요! GDG `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

71. CSS and BEM
CSS문제를 CSS로
개발자의 인지적 노력
Preprocessor

72. Out of CSS

73. Out of CSS
In Javascript

74. in javascript with Webpack

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

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. 감사합니다.