CSS 프레임워크 웹 디자인에 대한 CSS 튜토리얼

저는 개인적으로 CSS 프레임워크 개발 경험을 요약하고 바보짓을 했습니다. 귀하의 논의를 통해 우리가 함께 발전할 수 있기를 바랍니다. :)

1. CSS 프레임워크
중국의 인터넷 산업은 10년 동안 발전해왔고, 브라우저도 초기 인기 NS에서 현재의 FF3.IE7 등으로 진화했습니다. 프론트의 위치는- 최종 개발 엔지니어도 탄생했습니다. 최근 몇 년 동안 웹 개발 분야에서 "프레임워크"라는 단어가 매우 인기가 있었습니다. YUI, JQuery 및 Prototype과 같은 JavaScript 프레임워크는 실제로 웹 사이트를 개발할 때 프런트엔드 개발 엔지니어를 위한 강력한 도구가 되었습니다. 왜? 프레임워크에는 도구, 함수 라이브러리, 규칙이 포함되어 있으며 재사용 가능한 공통 작업에서 공통 모듈을 추상화하려는 시도가 포함되어 있어 디자이너와 프로그래머가 반복적인 개발을 피할 수 있습니다. 일반인의 관점에서 보면 반복 작업에서 대부분의 시간을 절약할 수 있습니다.

CSS를 작성할 때도 마찬가지입니다. 처음에는 텍스트 색상과 콘텐츠 레이아웃만 정의하고 이제는 모든 퍼포먼스를 정의합니다. CSS 프레임워크도 점차 진지하게 받아들여지고 있습니다. 왜냐하면 재사용을 위해 구체적인 표현에서 추상 모듈을 추출하는 것이 사용자 다운로드를 줄이고 팀 및 개인 개발을 촉진하는 가장 중요한 수단이라는 것을 모두가 깨닫고 있기 때문입니다.

2. CSS 프레임워크 개발 순서
a) Reset.css 포맷

CSS 포맷의 진짜 장점은 작업을 빠르게 시작할 수 있고 새로운 프레임워크에 도입할 수 있다는 것입니다. HTML 파일 프레임워크에서는 패딩과 여백을 재설정할 필요가 없으므로 브라우저에서 통일된 레이아웃과 동일한 성능을 얻을 수 있습니다.

b) 레이아웃 레이아웃.css

페이지가 2열인지 3열인지, 전체 화면인지 1024×768인지 정의합니다...

디자인 웹사이트에는 다양한 종류의 레이아웃이 있지만 대부분은 필요한 레이아웃을 선택적으로 도입함으로써 원하는 페이지 레이아웃을 빠르게 적용할 수 있습니다.

c) 기본 스타일 type.css

본문의 글꼴 크기와 색상, h1-h6, a:link-a:active, p 등을 정의합니다.
ul 클래스를 "ul-text"로 정의하여 동일한 아이콘, 줄 간격 및 링크 색상을 표시하는 등의 기본 스타일 CSS 참조입니다.
다음과 같이 적용할 수도 있습니다: class="ul-text square", 사각형 아이콘이 li 앞에 표시됩니다.

　d) 테이블 수정 table.css

　 table, tr, td, th, thead, tfoot, tbody, caption 및 기타 태그의 성능을 정의합니다.
기본 스타일과 동일하지만 기존 웹사이트의 표 제시 형태는 거의 모든 데이터 처리이기 때문에 참고자료가 별도로 저장되어 있습니다. 예를 들어 table-style-1을 테이블에 적용하면 검은색 테두리가 있는 테이블이 되고, table-style-2는 노란색 테두리가 있는 테이블이 됩니다.

e) 양식 수정 form.css

fieldset, label, 버튼, input, select 및 textarea 태그의 성능을 정의합니다.
대부분의 웹사이트의 양식, 버튼, 입력 상자는 거의 동일합니다. 이 CSS를 도입한 이유는 다양한 브라우저에서 통일된 표시를 용이하게 하기 위해서입니다. 기본 버튼, 입력 상자 등은 브라우저마다 표시되는 방식이 매우 다릅니다. 처음에는 형식화된 CSS로 통합되었지만 입력 상자의 테두리와 버튼 스타일은 이 CSS에서 정의해야 합니다. 불행하게도 선택을 통일할 수 없습니다. js를 사용하여 구현하는 것을 고려한다면 비용이 너무 높습니다.

　f) 인쇄 수정 print.css

　인쇄된 출력 페이지를 수정합니다.

g) 다른 CSS를 담고 있는 CSS

frontpage.css, list.css,detail.css,register.css 등

다양한 내용에 따라 이동 참조 해당 CSS를 소개합니다. 예를 들어 목록 페이지에 테이블 수정이 없으면 table.css가 도입되지 않습니다. 코드를 저장합니다.

3. CSS 프레임워크 폴더 생성
a) 핵심 메인
은 재설정.css, 레이아웃.css, type.css, print.css를 저장합니다.

b) bud 모듈
table.css, form.css, album.css 및 기타 CSS를 저장합니다.

c) 꽃잎 특정 애플리케이션
캡슐화된 CSS를 저장합니다. frontpage.css, llist.css,detail.css,register.css 및 기타 CSS. 이 폴더에 저장된 CSS는 직접 참조됩니다.

폴더 이름은 개인 취향에 따라 전자, 양성자 등으로 명명했으면 좋겠습니다! 헤이-헤이!

4. CSS 프레임워크의 장점
a) 개발 효율성을 향상시킵니다.
b) 간편한 유지 관리를 위해 표준화된 이름 정의.
　c) 프로젝트 개발 프로세스 표준화
　d) CSS 코드가 더 명확하고 간단해졌습니다. HTML 코드가 더 합리적입니다.

5. CSS 프레임워크의 단점.
　a) 학습 비용이 증가합니다. 전체 프레임워크를 이해하고 프레임워크의 설명서를 읽어야 합니다.
b) CSS 프레임워크는 소규모 프로젝트와 같은 페이지에 비해 너무 비대합니다. 프레임워크에는 사용하지 않을 코드가 많이 있을 수 있습니다.
c) 실력 향상에 도움이 되지 않을 수도 있습니다. 프레임워크에 너무 의존적이어서 버그 문제를 해결하기가 어렵습니다. 프레임워크에 내재된 버그를 포함합니다.
d) 필요한 프레임워크와 개발 프레임워크를 선택하는 것은 고통스럽습니다. 글을 쓰고 나니 점점 더 경직되고 부풀어오르는 것을 발견했습니다. 미안해요 -_-

　6. CSS 프레임워크를 개발하고 사용할 때 흔히 발생하는 문제입니다.
　1. 페이지에 외부 참조 스타일이 너무 많습니다.
예를 들어 ul의 여백 정의는 형식화된 CSS에서 0으로 선언되고, 기본 스타일 CSS에서는 margin: 5px 10px가 선언될 수 있습니다.
따라서 Yslow에는 여러 정의가 나타납니다.

2. 컴포넌트 재사용성을 고려합니다.
예를 들어 양식 정의의 CSS는 모든 양식 수정을 정의하는데, 등록 페이지에서는 이 CSS의 30%만 필요하다고 가정합니다. 불필요한 70%를 잘라내야 할까요?

위의 두 가지 문제점을 토대로, 있어야 할 것과 없어야 할 것이 없도록 캡슐화하는 것이 해결책이라고 개인적으로 생각합니다. http 연결 수와 CSS 크기를 줄여보세요. 그러나 이것이 완전히 완료되면 CSS의 재사용성이 매우 떨어지게 되며 이후 단계에서 수동으로 캡슐화하는 것은 매우 고통스러울 것입니다. 우리는 “특정 상황에는 구체적인 분석이 필요하다”는 Xiao Ma의 말만 적용할 수 있습니다. 인생은 정말 모순입니다...

3. 지원해야 할까요?
지원하고 싶다면 가장 큰 목적은 브라우저의 규모를 자유롭게 확장할 수 있도록 하는 것이라고 볼 수 있습니다. 사용자의 해상도가 매우 큰 모니터 사용자와 작은 모니터 사용자에게 매우 유용합니다. 그러나 사용자의 브라우저 데이터를 수집한 결과 이 ​​두 가지 목적에 해당하는 사용자가 거의 없다는 사실을 발견했습니다. 이러한 사용자를 위해 일반 개발 시간의 두 배 이상을 소비하는 것은 분명히 비용 효율적이지 않다고 생각됩니다. 그래서 우리가 tbsp를 개발할 때 우리 팀에서는 지원하지 않기로 결정했습니다. 물론 이는 제안일 뿐이며 우리는 이를 사용하여 사용자에게 최고의 경험을 제공할 수 있기를 바랍니다.

위의 6가지 사항은 저와 Taobao UED 팀 전체의 일상적인 발전에 대한 생각과 요약입니다. 의견이 다를 수도 있습니다. 메시지를 남겨서 함께 논의해 보세요.

위 내용은 CSS 프레임워크 웹 디자인에 대한 CSS 튜토리얼 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!