일반적으로 사용되는 CSS 명명 규칙 요약, 매우 실용적임(컬렉션)

CSS 네이밍은 영어 소문자 또는 조합으로 이름을 짓고, 단어는 "-"로 연결됩니다. 일반적으로 사용되는 CSS 네이밍 사양으로는 텍스트 네이밍 사양, 페이지 구조 네이밍 사양, 네비게이션 네이밍, 기능 네이밍 등이 있습니다.

CSS 네이밍은 일반적으로 영어 단어 소문자나 이름의 조합을 사용하며, 단어는 "-"로 구분하며, 영어 단어는 한눈에 알아볼 수 있는 간단한 단어가 아닌 이상 축약하지 않습니다. 다음으로 CSS에서 일반적으로 사용되는 명명 규칙을 공유하겠습니다.

[추천 과정: CSS 튜토리얼]

텍스트 명명 Convention

index .css: 일반적으로 홈페이지에서 스타일을 만드는 데 사용됩니다.

head.css: 헤드 스타일, 여러 페이지 헤더의 디자인 스타일이 동일한 경우에 사용됩니다.

base.css: 공유 스타일.

style.css: 독립 페이지에서 사용되는 스타일 파일입니다.

global.css: 페이지 스타일의 기본, 글로벌 퍼블릭 스타일로 페이지에 반드시 포함되어야 합니다.

layout.css: 레이아웃, 레이아웃 스타일, 일반적인 유형이 많을 때 사용되며 일반적으로 홈페이지 페이지 및 상품 페이지에서 사용됩니다.

module.css: 모듈, 상품 페이지에 사용되며 다른 스타일과 함께 사용할 수도 있습니다. .

master.css: 기본 스타일 시트

columns.css: 열 스타일

themes.css: 기본 스타일

forms.css: 양식 스타일

mend.css: 패치, 위 스타일을 기반으로 한 전용 패치 .

페이지 구조 명명:

페이지: 전체 페이지를 나타내며 가장 바깥쪽 레이어에 사용됩니다.

wrap: 모든 요소를 ​​함께 감싸는 래퍼, 가장 바깥쪽 레이어에 사용

wrapper: 페이지 주변은 가장 바깥쪽 레이어에 사용되는 전체 레이아웃 너비를 제어

container: 가장 바깥쪽 레이어에 사용되는 전체 컨테이너 Layer

head, header: 헤더 영역, 헤드에 사용

nav: 탐색 모음

content: 콘텐츠, 웹 페이지의 중간 본문에 사용되는 웹 사이트에서 가장 중요한 콘텐츠 영역

main: 웹 사이트의 주요 영역 ( 가장 중요한 위치를 나타냄), 중간 메인 콘텐츠

column: 열

sidebar: 사이드바

foot, footer: 바닥글, 바닥글에 사용됩니다. 웹사이트의 일부 추가 정보 배치 영역(또는 저작권이라는 이름)은 하단에 사용됩니다.

Navigation naming:

nav, navbar, Navigation, nav-wrapper: 탐색 모음 또는 탐색 패키지, 가로 탐색을 나타냄

topnav : 상단 탐색

mainbav: 기본 탐색

subnav: 하위 탐색

sidebar: 측면 탐색

leftsidebar 또는 sidebar_a: 왼쪽 탐색

rightsidebar 또는 sidebar_b: 오른쪽 탐색

title: 제목

summary: 요약

메뉴: 메뉴, 해당 영역에는 일반 링크와 메뉴가 포함되어 있습니다.

submenu: 하위 메뉴

drop: 드롭다운

dorpmenu: 드롭다운 메뉴

links: 링크 메뉴

기능 이름:

logo: 웹사이트 표시 로고

banner: 슬로건, 광고 표시줄, 상단 광고 표시줄

login: 로그인, (예: 로그인 양식: form-login)

loginbar: 로그인 표시줄

register: 등록

tool, 도구 모음: 도구 모음

search: 검색

searchbar: 검색 창

searchlnput: 검색 입력 상자

shop: 현재를 나타내는 리본

icon: 작은 아이콘

label: 상표

homepage: 홈페이지

subpage: 보조 페이지 하위 페이지

hot: 인기 핫스팟

list: 기사 목록, (예: 뉴스 목록: list-news)

scroll: 스크롤

tab: 태그

sitemap: 사이트 맵

msg 또는 메시지: 프롬프트 정보

current: current

joinus : Join

status: status

btn: 버튼, (예: 검색 버튼은 다음과 같이 쓸 수 있습니다: btn-search)

tips:tips

note: note

guild: 가이드

arr, 화살표: 화살표 표시

service: service

breadcrumb: (예: 페이지 위치의 탐색 프롬프트)

download: 다운로드

vote: 투표

siteinfo: 웹사이트 정보

partner: 파트너

link, friendlink : 친근한 링크

copyright : 저작권 정보

siteinfoCredits : 신뢰성

siteinfoLegal : 법률 정보