클래스 없는 CSS 테마 28종을 한 페이지에서 갈아 끼워 비교하는 CSS Bed, 해커뉴스에서 재조명
- cssbed.com은 클래스 없는 CSS 테마 28종을 같은 HTML 문서에 갈아 끼워 비교하는 사이트임. HTML only, awsm.css, bahunya, bamboo, bootstrap, holiday.css, marx, mvp.css, pico.css, sakura, simple.css, tacit, tufte, water.css-dark/light, yorha 등이 목록에 있음
- 원 출처는 2019년 해커뉴스 스레드(id 19593866)이고, 테마 추가와 버그 제보는 깃허브 ubershmekel/cssbed에서 받음
- 댓글에서 가장 많이 언급된 테마는 pico.css이고 simple.css, tacit, w3c-chocolate, marx, holiday.css(5KB)가 뒤를 이음. pico.css의 최신 포크로 mucss.org도 소개됨
- 다크모드를 지원하는 테마가 거의 없고, 버튼이 버튼처럼 보이지 않으며, 방문한 링크와 방문하지 않은 링크를 구분하지 않는 테마가 많다는 지적이 댓글에 올라옴
Hacker News opinions
난 무조건 pico.css임. simple.css, tacit, w3c-chocolate도 괜찮았음
난 marx가 좋더라
pico.css는 요즘 포크가 따로 있음. mucss.org 한번 봐봐
난 holiday.css. 용량이 5KB밖에 안 됨
이런 클래스 없는 스타일시트만 모아서 비교해주는 사이트도 있음. dohliam.github.io/dropin-minimal-css
2019년에 올라온 글이네. 요즘 LLM 덕에 다시 쓰이지 않을까 싶음
용어는 정확히 하면 reset style sheet임
브라우저마다 다른 기본 동작을 초기화하는 거랑 클래스 없는 스타일링이랑 무슨 상관임? 둘은 다른 얘기인데
프로토타이핑할 때 클래스 없는 CSS 진짜 좋아함. 요즘은 LLM이 대신해주니까 예전만큼 필요하진 않은데, 아주 작은 페이지 만들 땐 여전히 좋음. 에셋 갱신 확인하러 서버에 한 번 더 다녀오는 바이트보다 인라인으로 넣는 게 더 작을 정도라 로딩 속도 차이가 느껴짐
웹사이트 만들어본 입장에선 당연한 소리로 들림. 근데 실무에선 원하는 모양 만들려면 클래스를 몇 개 붙이게 됨. 나도 미세 조정하다가 클래스 지옥 만든 적 있는데 요즘은 참으려고 함
아이디어는 좋은데 테마 하나하나 넘겨보기가 너무 힘듦. 스크롤하면서 바로 비교할 수 있으면 좋겠는데 그러면 번들이 커지니까 뭐
썸네일로 한번에 정리해둔 이미지가 있음. i.imgur.com/KXjiYxO.png
다크모드 지원하는 테마가 이렇게 적다니 놀라움. 요즘은 다크모드가 기본값이어야 한다고 봄
그 테마들 자체가 오래돼서 아무도 관리 안 하는 거임
며칠 전에 CSS를 직접 짰는데 7줄이면 끝났고 8, 9번째 줄이 OS 설정 연동 다크모드였음. 별로 어려운 일도 아닌데 10KB짜리 CSS 프레임워크들이 안 해둔 게 아이러니함
웹 접근성 체크리스트 만든 w3 사이트조차 눈이 아픈 디자인인데 아무도 신경 안 쓰는 게 끔찍함
cssbed.com/vanillacss만 도메인이 엉뚱하게 리다이렉트됨. 나머지는 다 정상임
개인용 서버사이드 앱 만들 때 pico.css 드롭인이 UI 기준으로 딱 좋았음. 부트스트랩으로도 충분한 호스팅 사이트들도 봤고, LLM이 CSS 이상하게 만드는 걸 막는 용도로도 괜찮음
classless라는 데 강조를 두는 게 좀 의외임. 레이아웃을 조금이라도 바꾸려면 element 선택자만으로는 안 되니까. 한 페이지 넘어가면 matcha.css(matcha.mizu.sh) 같은 걸 시작점으로 쓰는 게 현실적임
거의 다 훑어봤는데 기본 타이포그래피도 제대로 잡은 게 없었음. 제목 아래 문단 여백이 위보다 작아야 하는데 그것도 안 지켰고, 모바일에서 좌우 여백이 0인 테마도 많았음. 기본값이 전체적으로 별로임
버튼이 버튼처럼 안 보이게 만든 테마가 대부분이라 아쉬움
그것뿐만 아니라 방문한 링크랑 안 한 링크를 구분해주는 테마가 거의 없음. 테마 목록 눌러보면서 어디까지 봤는지 표시가 안 돼서 바로 알았음