UI 개발, 접근성
NHN 마크업 코딩 컨텐션 CheatSheet (HTML, CSS)
https://ilec.tistory.com/entry/NHN-%EB%A7%88%ED%81%AC%EC%97%85-%EA%B0%9C%EB%B0%9C-%EC%B0%B8%EA%B3%A0%EC%9A%A9-CheatSheet
https://nuli.navercorp.com/tool/codingCon
마크업 관련 참고 WAI-ARIA
NULI 접근성 https://nuli.navercorp.com/
WAI-ARIA 2.1 적용사례 https://aoa.gitbook.io/skymimo/
Make UI Component using WAI-ARIA https://slides.com/yamoo9/aoa/fullscreen
UI 개발 참고에 도움이 되는 사이트
NTS UIT개발실 기술블로그 https://wit.nts-corp.com/
CSS 리팩토링
- 퍼블리셔, 마크업 개발자, UI 개발자, 프론트엔드 개발자(Node.js 환경) 등 클라이언트 사이드의 User Interface, 디자인 시스템 등을 만드는 경우 CSS 작성 전 혹은 리팩토링이 필요할 때 참고할 수 있는 자료
Code smells in CSS
품질,유지보수 용이성,완결성(integrity)에 대해 생각할 거리를 던져 주는 CSS 컨벤션
- 취소 스타일(Undoing styles)
- 매직 넘버(Magic numbers)
- 조건부 선택자(Qualified selector)
- 절대값(Hard-coded/absolute values)
- 폭력적인 스타일(Brute forcing)
- 위험한 선택자(Dangerous selectors)
- 즉흥적인(Reactive) !important
- ID 사용 피하기
CSS를 리펙터링하는 방법
기존 코드 정리 및 재구성 새로운 기능을 추가하거나 버그를 수정하지 않고 리팩토링이 도움이 됩니다. CSS 폭발 방지, 코드 가독성 및 재사용 성 향상과 CSS를 더 매끄럽고 빠르게 실행할 수 있습니다.
1. 초기 감사 실시
2. 관리 계획 수립
3. 트랙 진행
4. CSS 코딩 스타일 가이드 설정 (명명, 서식지정, 선언, 단위, 주석)
5. 일관된 파일 구조 설정
6. 미사용 및 중복 규칙 제거
7. 특이성 감소출처 https://ko.savtec.org/articles/coding/how-to-refactor-css-a-guide.html
CSS Minify (경량화, 용량 감소, 성능 최적화)
VSCode Extentions - CSS Minify
- 값 에서 단위를 제거
- 모든 float 값에서 제거
- 클로저에서 마지막을 제거
- 불필요한 공백을 제거
- 16진수 값을 줄입니다
- 작은 따옴표와 큰따옴표를 제거
출처 https://marketplace.visualstudio.com/items?itemName=DiegoMolina.css-minify
지금 CSS 레거시 코드를 쓰고 있나요?
어떻게 하면 코드가 서서히 부패하는 것을 방지할 수 있을까?
CSS는 팀 스포츠다.
내가 작성한 코드를 이어받아 일할 후임(혹은 6개월 후의 나 자신)은 넘겨받은 코드를 이해하고 작성 방식을 그대로 따라해야 할 것이다. 이들이 구체성의 늪에 빠지지 않게 하려면 어떻게 해야할 지 생각해 보아야 한다. 이 작업으로 인해 코드의 다른 부분에는 별다른 영향이 없을 것이라고 어느 정도 확신할 수 있어야 할 것이다.
CSS를 작성하는 데는 팀 단위의 협동이 필요하며, 많은 사람들이 후일에 이 코드를 읽고, 기여할 것이라는 것을 염두해 두어야 한다. 현재는 나 혼자만 책임을 지고 있는 코드라 하더라도, 나중에는 누가 유지보수를 맡게 될지 어찌 알겠는가?
BEM, SMACSS, ITCSS와 같이 최근에 나온 CSS 설계 방법론은 개인 뿐만 아니라 팀 단위의 유지 보수성을 높여준다. 이 방법론들은 구체성을 낮추고, 모듈화를 이끌며, 네이밍을 일관성있게 유지할 수 있는 특정 설계 패턴을 알려준다. 덕분에 코드의 가독성이 높아져서 코드를 읽고 이해해야 하는 사람들에게 도움이 된다. 설계 패턴으로 인해 작성 방식에 제약이 가해지기 때문에 어떤 식으로 코드를 유지보수 할지 감을 잡을 수 있다.
그러나 가장 중요한 것은, 작업에 참여하는 사람들이 코드에 대해 일관적인 접근 방식을 취하는 것에 동의하고 계속해서 그 기준을 준수하며 작업을 하는 것이다. 그럼으로써 팀원들이 전부 동일한 방식으로 작업을 하고, 장기적으로는 표준을 유지하는 데 기여하고 있음을 명백하게 확신할 수 있다.
리팩토링 작업을 할 때는, 지금 당장 코드가 돌아가는 데 집중하는 것보다 더 큰 그림을 볼 필요가 있다. 작업이 끝난 후에도 장기적으로 자기 자신 뿐만 아니라 다른 사람들이 유지보수를 할 것이라는 것을 고려해야 한다.출처 https://gratiaa.github.io/young-blog/2016/10/09/are-you-writing-CSS-regacy/
Refactoring CSS: Strategy, Regression Testing And Maintenance
CSS 파일 크기, 로딩 시간, 렌더링 성능을 최적화할 수 있는 CSS 최적화 전략
출처 https://www.smashingmagazine.com/2021/07/refactoring-css-introduction-part1/
Refactoring HTML and CSS
리팩토링은 코드 기반의 디자인을 개선하기 위해 코드를 다시 작성하고 재구성하는 프로세스입니다. 이 방법은 모든 언어에 적용할 수 있지만 이 기사에서는 HTML과 CSS에 초점을 맞출 것입니다. 리팩토링할 때 염두에 두어야 할 몇 가지 목표는 다음과 같습니다.
- 복잡성을 줄이기 위해 다시 작성
- 재사용 가능하게 만드십시오. (코드스니펫)
- 유연하게 만들 수 있는 방법에 대해 생각해 보세요.
- 코드를 읽기 쉽게 만드십시오.
Case Study: Large Scale CSS Refactoring in a Legacy Application
거대한 리팩토링 프로젝트는 시간이 걸릴 것입니다. 엄청난 시간. 한 덩어리로 모든 시간을 차단할 수 있었다 하더라도 여전히 거대했을 것입니다. (장기적인 계획)
출처 https://dev.to/kathryngrayson/case-study-large-scale-css-refactoring-in-a-legacy-application-52lc
(모바일) 브라우저 테스트
모바일 및 태블릿 CSS 분기 https://webclub.tistory.com/48
사파리 브라우저, 아이폰 iOS CSS Hacks 정리 https://virz.net/710-2/
CSS Hacks
특정 브라우저에만 적용되는 기법 (렌더링 방식 차이)
https://zxchsr.tistory.com/5
https://blog.naver.com/preserde/130021317266
https://amati.io/css-hack-for-old-browser/
CSS 성능 체크 (CSS Test)
CSS 코딩 컨벤션 참고
CSS 코드 작성 규칙
https://jeonghakhur.gitbooks.io/frontend-coding-convention/content/css/
디버깅 시간을 절약할 수 있는 CSS 네이밍
😃
