CSS와 BEM
12 likes1,600 views
CSS의 의미와 특징을 이해하고, BEM과 CSS Modules 두 방법론을 소개했습니다. BEM은 블록, 엘리먼트, 모디파이어로 이름 짓는 명명 규칙을 제시하며, CSS Modules은 파일 이름과 클래스 이름 해시를 사용하여 충돌을 방지합니다. 마지막으로는 두 방법론의 장단점과 개발환
CSS와 BEM
- 1. 백성훈Seonghoon Baek CSS 와 BEM
- 2. CSS의 의미와 특징 CSS의 방법론과 BEM CSS Modules BEM과 CSS Modules
- 3. CSS
- 4. Presentation
- 7. CSS의 의미
- 17. CSS의특징
- 20. CSS의 확장 implicit dependencies Dead Code Global Namespace Restyling
- 21. implicit dependencies Dead Code Global Namespace CSS의 확장 Readable less calculate Sustainable Isolation Restyling
- 23. Naming Convention / File Structure
- 25. Naming Convention .navigation > div
- 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 ?
- 45. B- independentanywhereonthepage = Component BEM ?
- 46. BEM .navigation
- 47. B- independentanywhereonthepage = Component E- nomeaningonitsown,it’snameofapartforfunction BEM ?
- 49. B- independentanywhereonthepage = Component E- nomeaningonitsown,it’snameofapartforfunction M-differentversionofablockoranelement BEM ?
- 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
- 55. BEM and
- 56. BEM and .navigation { &—item { &__last { } } } .navigation .navigation—item .navigation—item__last SASS CSS
- 57. BEM Examples
- 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
- 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
- 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
- 83. CSS and CSS Modules Webpack 학습, 제한적 환경 No more conflicts. CSS in JS with Webpack
- 84. BEM과 CSS Modules
- 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. 감사합니다.