Download as PDF, PPTX
Uploaded by성훈 백
CSS와 BEM
CSS의 의미와 특징을 이해하고, BEM과 CSS Modules 두 방법론을 소개했습니다. BEM은 블록, 엘리먼트, 모디파이어로 이름 짓는 명명 규칙을 제시하며, CSS Modules은 파일 이름과 클래스 이름 해시를 사용하여 충돌을 방지합니다. 마지막으로는 두 방법론의 장단점과 개발환
![[21.11.15] 아스테라 스터디 PPT](https://cdn.slidesharecdn.com/ss_thumbnails/21-211115071410-thumbnail.jpg?width=640&height=640&fit=bounds)
![[WEB UI BASIC] CSS_1](https://cdn.slidesharecdn.com/ss_thumbnails/webuibasicweek2css-150419055801-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
CSS와 BEM
- 1.
- 2. CSS의 의미와 특징 CSS의방법론과 BEM CSS Modules BEM과 CSS Modules
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. CSS의 확장 implicit dependencies DeadCode Global Namespace Restyling
- 21. implicit dependencies Dead Code GlobalNamespace CSS의 확장 Readable less calculate Sustainable Isolation Restyling
- 22.
- 23. Naming Convention /File Structure
- 24.
- 25.
- 26.
- 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.
- 35.
- 36.
- 37. 1. Unintentional dependencies 2.Long cascade rules 3. An out of control Classes
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. B- independentanywhereonthepage =Component BEM ?
- 46.
- 47. B- independentanywhereonthepage =Component E- nomeaningonitsown,it’snameofapartforfunction BEM ?
- 48.
- 49. B- independentanywhereonthepage =Component E- nomeaningonitsown,it’snameofapartforfunction M-differentversionofablockoranelement BEM ?
- 50.
- 51. 1.Useclassnameselectoronly A rules ofBEM 2.Notagnameorids 3.Nodependencyonotherblocks/elementsonapage
- 52.
- 53.
- 54.
- 55.
- 56. BEM and .navigation { &—item{ &__last { } } } .navigation .navigation—item .navigation—item__last SASS CSS
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 71. CSS and BEM CSS문제를CSS로 개발자의 인지적 노력 Preprocessor
- 72.
- 73. Out of CSS InJavascript
- 74. in javascript withWebpack
- 76.
- 77. CSS Modules inWebpack
- 78. CSS Modules inWebpack header.scss
- 79. CSS Modules inWebpack Filename Class HashComponent =
- 80.
- 81.
- 82.
- 83. CSS and CSSModules Webpack 학습, 제한적 환경 No more conflicts. CSS in JS with Webpack
- 84.
- 85.
- 86. BEM과 CSS Modules inCSS in Javascript 개발자의 인지적 노력 Webpack 별다른 도구 없이 웹팩, 바벨, 플러그인....
- 87. BEM과 CSS Modules 나에게맞는 걸 선택하자.
- 88. implicit dependencies Dead Code GlobalNamespace CSS를 이해하자 Readable less calculate Sustainable Isolation Restyling
- 90. CSS의 의미와 특징 CSS의방법론과 BEM CSS Modules BEM과 CSS Modules
- 91.
- 92. Github : https://github.com/Lutece e-mail: lallaworld1st@gmail.com
- 93. 발표 후 많은분들이 질문을 해주셨는데 시간이 없어 모두 답변하지 못해 많이 아쉬웠습니다. 그래서 질문을 위한 저장소를 만들었습니다. URL : https://github.com/Lutece/Ask-for-everything 이 곳에서 Issues에 질문을 올려주시면 시간이 되는대로 꼭 답변해드리겠습니다. (저는 github를 상시에 확인합니다.)
- 94. 경청해주신 모든 분들께감사드립니다.
- 95.