동적으로 생성 된 CSS

Question

JavaScript에서 동적으로 생성 된 스타일 태그로 많은 정적 CSS 파일을 대체 할 것을 고려하고 있습니다. 내 목적은 전체 문서에 대한 스타일 시트를 작성하는 것이 아니라 탭, 슬라이드 쇼 등과 같이 페이지에 추가되는 플러그인에 사용하는 것입니다. 현재 다루는 스타일 시트는 10 ~ 20 행입니다.

내가 몇 가지 이점을 참조하십시오

• 부하 만 JS의 대신 모두 JS의 파일과 CSS를 실시간으로 테마를 정의하는
• 능력을 선택기를 정의하는
• 능력 (예를 들어 변수로 색상을 입력) 파리 (예 : 네임 스페이스가 클래스 이름)
• 추가 브라우저 특정 스타일에

단점이 될 것입니다 무엇 이 접근법은? 이 주제에 대해 좋은 참고 자료를 추천 해 주시겠습니까?

는 제가 조사를 좀 해봤 다음과 같은 도구 발견

• less을 -하지만 여전히 CSS 자바 스크립트를 사용하여 별도의 스타일 시트
• DiceJS (분명히 새로운 라이브러리)

Answer 1

또 다른 이점을 확인 일반적으로 주어진 시간에 동시에 4 개의 자산 만로드합니다.

그러나 페이지로드시 결합하는 모든 작업을 수행하면 페이지가 처리 자체만으로도 느려질 수 있습니다 ... 최종 CSS 블록을 구성하기 위해 반복해야하는 항목 수에 따라 .

성능면에서 볼 때 javascript가 결합 된 CSS 파일에 포함 된 스타일을 우아하게/효율적으로 대체 할 것 같지는 않습니다.

다른 점은 프로덕션 환경에서 라이브러리를 사용하여 축소, 최적화, JS 코드에서 난독 화 된 코드 세트를 미리 생성 한 다음 1을 갖는 다른 옵션을 사용할 수도 있다는 것입니다 js 파일과 페이지로드시로드 된 1 개의 css 파일로 구성되어 있습니다. 그러면 속도 /로드 이점을 위해 캐시 할 수 있습니다. Boilerplate lib에는이 스크립트가 있습니다.

하루의 끝 : 에너지가 생성되거나 파괴되지 않습니다.주의를 기울이지 않으면 한 곳에서 최적화하고 다른 곳에서 해를 입 힙니다.

Answer 2

를로드 할 필요 내 의견으로는 조금 어수선 해 보인다. 자신을 언급하면서, 나는 LESS 또는 SASS 또는 그와 비슷한 것을 사용하도록 권합니다. 그렇습니다. 추가 리소스가로드 될 수는 있지만 스타일을 지정하기 위해 JavaScript를 사용하는 것보다 훨씬 가치가 있다고 생각합니다. 내 의견으로는, 그것은 목적을위한 잘못된 도구입니다.

Answer 3

덜 빠릅니다. 자바 스크립트에서 맞춤 라이브러리를 사용하여 CSS를 생성해야한다고 생각하지 않습니다. 가능한 한 자바 스크립트를 CSS에서 분리하여 보관하는 것이 좋습니다.

자바 스크립트 로직을 트리거하기 위해 특정 요소 class = ""속성을 사용하지만 덜 스타일에 사용되는 클래스와 중복되지 않습니다. (중복을 방지하기 위해 서로 다른 케이스 규칙을 사용합니다).

CSS의 일부분을 동적으로로드하는 것이 많은 이점도 아닙니다. 우리는 less.js 자바 스크립트를 개발하는 동안 실행하지만 우리는 항상 생산을위한 'lessc'컴파일러를 실행하기 때문에 우리는 항상 1 개의 스타일 시트를 가지고있다 (그리고 YUI Compressor로 압축한다).

총 CSS가 엄청나게 큰 경우가 아니라면 첫 번째 히트시 큰 CSS 파일을로드 한 다음 파일을 캐시에 저장하는 것이 좋습니다.

모든 CSS가 항상로드되고 (부품뿐만 아니라), 충돌하는 규칙이 없는지 확인하는 데 도움이됩니다. 리팩토링을해야하고 애플리케이션의 일부가 다른 URL로 이동해야하는 경우 (갑작스러운 오버랩이 모두 표시되는 경우) 실제로 이점이 있습니다.

그래서 저는 여러분이 필요로하는 스타일을 동적으로 생성하여 문제를 해결하기보다는 CSS에 대한 더 나은 조직이 필요할 수도 있음을 제안합니다.당신이 이하의 효과적인 사용의 좋은 예를 찾고 있다면

, 브라우저이기 때문에 페이지에로드 될 때마다 추가 자산이 전체 페이지 로딩 속도가 느려 있다는 것 Twitter Bootstrap