더 빠르고 더 효과적인 CSS 스타일링

나는 CSS 스타일링의 어떤 방법이 더 빨리 (현명한 렌더링인지), 그리고 어떤 방법이 더 합리적인지에 대한 호기심을 갖고 있습니다. (꽤 주관적인 말입니다.) .더 빠르고 더 효과적인 CSS 스타일링

나는 기본 클래스를 만들 수 있습니다와 같은 :

.rounded-corners-5 { 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
}

또는

여러 개의 ID를/클래스에 스타일을 적용하는 다른 방법을 수행 할 수 있습니다

이

#box1, #header, #container, .titles { 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
}

출처

2010-06-08 Anthony

이것은 구현 (브라우저)에 달려 있다고 생각합니다. 그리고 나는 그 차이가 최소한이라고 생각합니다. –

나는 더 나은 코딩 스타일로 간주되는 것에 관심이 있습니다. 처음에는 언뜻보기에 더 좋을 것 같지만, css 대신 html에 둥근 모서리의 스펙을 넣을 것이므로 걱정거리가 있습니다. – tster

나는 테스터와 동의한다 : 첫 번째 것은 HTML에 시각적 명령을 넣는 것을 의미한다. (목적 대신 그들의 모습을 묘사하는 이름을 가진 클래스를 항상주의하라.) 논리적 용도 (예 : .section)가있는 경우 더 깨끗합니다. 그렇지 않으면 두 번째 버전을 사용하게됩니다.

당신이 정말로 겪고있는 것은 CSS에서 추상화가 부족하다는 것입니다. 즉, 중복을 피하기 위해 중복 및/또는 홀수 그룹으로 고통받는 경향이 있습니다. this article about Sass을보고 싶을 수도 있습니다. 일반적인 생각은 Sass 문서 (꽤 CSS는 아니지만 유사 함)를 작성한 다음 CSS 문서로 컴파일하여 배포하는 것입니다.

출처

2010-06-08 18:48:13

SASS와 같은 전처리 기의 지식없이이 질문을했습니다. 얼마나 무지가 그렇게 많은 좌절을 만들 수 있는지는 놀랍습니다. :). – Anthony

난 항상을 사용을 두 번째 방법은 내게 더 논리적 인 것처럼 보입니다. 필자는 렌더링이 더 빠를 지 알지 못하지만, 파일에 더 깔끔하고 실제로 비슷한 ID/클래스를 모두 유지합니다.

출처

2010-06-08 18:21:38

하나의 요소에 여러 ID와 클래스가 없으면 첫 번째 방법이 더 빨리 작동합니다. HTML 또는 서버 스크립트를 편집 할 때 클래스/ID가 수행하는 작업을보다 쉽게 기억할 수 있기 때문입니다 . 그래도 렌더링 속도가 더 빨라지는지는 모르겠지만 브라우저의 렌더링 시간, 컴퓨터 사용 시간 등과 같은 많은 것들에 주관적이라고 할 수 있습니다. 다양한 렌더링 엔진 (나는 변화가 없어도 우리 모두가 알고 싫어하는 2 가지를 알 수 없다 ...).

출처

2010-06-08 18:27:12 mmirate

어느 것이 더 빨리 렌더링 될지 알 수 없습니다. 하지만 유지 관리 관점에서 볼 때 은 두 번째 옵션을 사용하여 싫어하는입니다. #header 요소에 CSS의 여러 위치에 정의 된 규칙이있을 수 있기 때문입니다. 나는 변화를 원할 때마다 그것을 사냥하고 싶지 않을 것입니다.

출처

2010-06-08 18:28:58 jessegavin

저는 구문이 속도면에서 중요하다고 생각하지 않습니다.

브라우저가 다시 칠해야 할 때 성능이 향상되었습니다. :hover과 같은 이벤트가 발생하거나 DOM을 변경하면 발생합니다. absolute 또는 fixed으로 표시된 요소에 대한 재 페인트는 인라인이 아니므로 다시 칠하기가 적기 때문에 가장 빠릅니다. 따라서 서라운드 요소를 다시 칠할 필요가 없습니다.

Firebug 용 Google Page Speed 애드온을 사용하면 페인트가 다시 발생하는 것을 볼 수 있습니다.

나는 많은 것들을 빠르게해야하는 브라우저 가속기를 이와 같은 것들에 사용할 것이라고 믿는다.

구문과 관련하여 두 번째 예와 같이 요소의 내용이나 사용법을 설명하는 클래스와 ID를 사용합니다. 이제 .rounded-corners-5 클래스의 모든 요소에 border-radius: 10px이 있어야한다고 결정할 때 HTML을 변경할 필요가 없습니다. 스타일과 구조를 유지하십시오.

출처

2010-06-08 18:43:49 SQLighter

더 적은 공간을 차지하고 웹 페이지로드 속도를 높이고 렌더링 속도를 높이는 것이 더 효율적입니다.

검색 엔진 최적화 (SEO)에도 도움이됩니다.

출처

2010-06-08 18:51:31 Venemo

스타일에 관한 한 html을 함수로만 작성하고 CSS를 작성하여 양식을 추가하십시오. 따라서 이드에게는 요소를 식별해야합니다. 본질적으로 html로 스타일을 쓰는 다른 방향으로 간다. .blue{color:blue} 이것은 html을 클래스로 복잡하게 만듭니다. CSS의 목표는 CSS 시트를 바꾸고 모양과 느낌을 완벽하게 제어 할 수있게하는 것입니다.

출처

2010-06-08 19:18:01

더 빠르고 더 효과적인 CSS 스타일링

답변

관련 문제