HTML과 CSS에 시각적 의미

중간 트랜잭션 http://www.aliyun.com/zixun/aggregation/6858.html "> seo 진단 Taobao 게스트 클라우드 호스트 기술 홀

사이트와 사용자 (단순화 된 버전)의 스택

TXJS 회의의 마지막 날, 개발자는 내게 물었다:

객체 지향 CSS는 성능 기반으로 클래스 이름 많이 떠나지 않을?

네트워크 스택의 각 레이어는 그것의 자신의 구조를가지고 있습니다. PHP 미들웨어를 구축 하는 데 사용할 데이터베이스 스키마를 기대 하지 않는다 고 HTML과 CSS 같은 것을 기대 하는 사람들. HTML은 데이터를 나타내는 의미 있는 방식으로 또는 코드 의미 라고 부르는 콘텐츠 작성 해야 합니다. Html에서 코드 의미는 휴대성과 사용의 용이성에 대 한 매우 중요 합니다. 다른 한편으로, CSS 정말 스택에 별도 레이어에 이며 페이지의 시각적 의미를 반영 하는 그것의 자신의 건축 필요.

시각적 의미 페이지 디자인에 반복의 모든 패턴을 설명합니다. 그들은 귀하의 사이트의 기본 구성 요소를 묘사. 사실, 그들은 종종 쉽게 사이트를 통해 응용 프로그램을 구현할 수 있도록 조금 수정이 필요 합니다. 시각적 의미 체계 연결 되지 않으며 반드시 HTML 의미, 각 스택의 특정 요구를 충족 하는 스키마가 필요 하기 때문에.

껍질에서 스타일 템플릿 구조

마찬가지로, 많은 PHP 개발자는 PHP CSS와 HTML 스키마 일치 싶어요. 아마도 그들에 게 가장 친숙 한 추상화 레이어 중 하나를 적용 하려고 도전 하는 더 많은 것? 내가 그것의 부끄러워. 때 페이스 북에, CSS 레이어를 맞게 PHP 레이어를 싶었습니다. 다행히도, 페이스 북 reined 있고 내 이해를 개선 하는 데 도움이 몇 가지 스마트 개발자 있다.

넣어 하드 CSS와 PHP로 HTML 수 방지 코드 (원음) 너무 지루한 이며 PHP 보다 CSS와 HTML 요구에 대 한 자세한 개체 구조 때문에 결국 비 대 한 코드로 이어질. 각 서식 파일 여러 가지 방법으로 다양 한 다른 HTML 및 CSS 개체의 조합을 포함 하기 때문에 사실, PHP 템플릿 본질적으로 적절 한 되지 않습니다.

시각적 의미! = 성능에 기반 하는 클래스

그것은 내가 "Giantblueheading" 같은 클래스 이름을 제안 하지는 중요입니다. 클래스 이름을 정의 특정 시각적 클래스의 이름이 아닌 하려는 개체 구조를 나타내는 데 필요 합니다. 예를 들어 내가 자주 하기로 더 추상 클래스 이름을 기억 같이 "미디어"는 기억 하기 쉬운. 미디어 블록은 고정 폭 그림 또는 플래시 및 일부 텍스트 또는 다른 콘텐츠 결합 됩니다.

미디어 블록 아이콘 및 링크 또는 프로필 사진 및 사용자 이름 같은 많은 다른 상황에서 사용할 수 있습니다. 특정 사용 사례는 객체 구조에서 분리 된다. HTML은 CSS 개체의 인스턴스로 볼 수 있습니다.

OOCSS 오픈 소스 프로젝트에서 미디어 블록, 및 많은 다른 기본 개체에 대 한 코드를 찾을 수 있습니다.

추 신: 당신이 OOCSS에 익숙하지 않은, 당신은 읽을 수 있습니다 Oocss FAQ 및 FAQ의 99CSS 중국어 번역

HTML과 CSS에 시각적 의미

저자: 니콜 설리반

HTML과 CSS에 시각적 의미

저작권을 존중 하시기 바랍니다, 감사 합니다 소스를 표시 하시기 바랍니다 재현!

기존 주소: http://www.qianduan.net/visual-semantic-in-html-and-css.html