•  09-06-2019
  •  | 
  •  

문제

좀 더 명확하게 말씀드리겠습니다.

나. 싫어하다.CSS.

그것은 끝나지 않는 악몽이다.모든 사소한 레이아웃 변경은 해킹처럼 느껴집니다.문제에 대한 해결책은 곧 유명해질 쌀 푸딩에 육두구를 얼마나 넣을지 정확히 계산하려고 하는 일부 요리사처럼 숫자를 바꾸는 일이 종종 포함되는 것 같습니다.그런 다음 다중 브라우저 문제, 다중 해상도 문제가 발생합니다.

..간단히 말해서, 그것은 고통스럽습니다.원한다면 PITA.

많은 프레임워크는 특정 주전자를 더 쉽게 처리하기 위해 HTML(사용자 정의 태그, JSF 구성 요소 시스템)에서 추상화하려고 합니다.

CSS에 비슷한 개념을 적용한 것을 사용해 본 적이 있나요?다양한 브라우저 간 마법을 수행하는 것, 변수와 같은 지원(왜 해당 색상을 원할 때마다 #3c5c8d를 입력해야 하는가), 계산된 필드(CSS 및 JS로 '컴파일'됨) 등을 지원합니다.

아니면 내가 이것에 대해 올바르게 생각하고 있습니까?아주 둥근 구멍을 통해 아주 정사각형 블록을 밀어 넣으려고 하는 걸까요?

도움이 되었습니까?

해결책

항상 템플릿 엔진을 사용하여 CSS 파일에 변수 및 계산 된 필드를 추가 할 수 있습니다.

다른 팁

내가 가장 잘 찾은 것은 CSS를 배우는 것입니다. 정말 CSS를 배우라는 뜻입니다.

배우기에는 혼란스러운 언어가 될 수 있지만, 이에 대해 충분히 읽고 연습하면 결국 가장 좋은 방법을 배우게 될 것입니다.

핵심은 자연스러워 지도록 충분히하는 것입니다.CSS는 시작하기 전에 무엇을하고 싶은지 알고 있고 충분한 경험이 있다면 매우 우아 할 수 있습니다.

당연히, 때때로하는 것이 주요 PITA이지만, 정말 연습을하고 효과가있는 것과 그렇지 않은 것을 배우면 브라우저 간 문제도 그렇게 나쁘지 않습니다.문제를 해결하는 방법.

필요한 것은 연습 뿐이며 시간이 지나면 능숙해질 수 있습니다.

우연히 Ruby를 사용하는 경우 Sass .그것은 계층 적 선택자를 지원합니다 (들여 쓰기를 사용하여 계층을 설정), 무엇보다도 구문 적 관점에서 삶을 더 쉽게 확장 할 수 있습니다 (자신을 훨씬 덜 반복합니다).

하지만 나는 확실히 당신과 함께 있습니다.저 자신을 소규모 CSS 전문가라고 생각하지만, Javascript (Prototype, JQuery 등)와 같은 CSS 용 도구가 있으면 좋을 것 같습니다.당신은 당신이 원하는 것을 도구에 말하고, 그것은 뒤에서 브라우저 불일치를 처리합니다.그것은 이상적 일 것입니다, methinks.

이것은 이전 답변에 대해 자세히 설명합니다.

처음 CSS를 사용하기 시작했을 때 변수, 표현식 등을 지원하지 않는 것이 아픔이라고 생각했습니다.하지만 점점 더 많이 사용하기 시작하면서 이러한 문제를 극복하기 위해 다른 스타일을 개발했습니다.

예를 들어 다음 대신 : 라코 디스

할 수있는 작업 : 라코 디스

이렇게하면 선언 된 색상을 한 자리에 유지할 수 있습니다.

CSS를 충분히 사용하면 대부분의 브라우저 불일치를 쉽게 극복 할 수 있습니다.CSS 해킹을 사용해야하는 경우이를 수행하는 더 좋은 방법이있을 것입니다.

그분들에게 유감이지만 여러분 모두 요점을 놓쳤습니다.

추상화 라는 단어가 핵심입니다. 당신과 Sally가 웹 사이트를 만들고 있다고 가정 해 보겠습니다. 그녀가 모서리를 둥글게 만드는 동안 당신은 양식을 스타일링합니다. 당신과 그녀 모두 소수의 선택자를 정의했습니다.

당신이 모르게 Sally의 이름과 충돌하는 클래스 이름을 선택했다면 어떨까요? CSS에서 작업 할 때 세부 사항을 "숨길"(추상화) 수 없습니다. 그렇기 때문에 IE에서 버그를 수정 한 다음 다른 사람들이있는 그대로 사용할 수있는 자체 솔루션을 만들 수 없습니다. 프로그래밍 언어로 프로 시저를 호출하는 것처럼 사전 및 사후 조건 만 신경 쓰고 어떻게 내부에서 작동합니다. 달성하고자하는 무엇을 생각하면됩니다.

이것은 웹의 가장 큰 문제입니다. 추상화 메커니즘이 전혀 없습니다! 여러분 대부분은 "불필요합니다. 담배를 끊으세요!"라고 외칠 것입니다.

대신 레이아웃 버그를 수정하거나 모서리를 둥글게 만들거나이 사례 또는 해당 사례에 대한 "최고"마크 업에 대해 반복해서 토론하는 작업을 수행합니다. 솔루션을 설명하는 사이트를 찾은 다음 답을 복사하여 붙여 넣은 다음 도대체 무엇을하고 있는지 생각조차하지 않고 특정 사례에 맞게 조정합니다! 예, 그렇게 할 것입니다.

폭언 끝

<인용구>

그런 다음 여러 브라우저 문제가 발생합니다.

IE에서 일부 불일치를 제거하는 데 도움이되는 이 가 있습니다.jQuery를 사용하여 자바 스크립트를 통해 일부 선택기를 추가 할 수도 있습니다.

Dan 에 동의합니다. 배우면 별 문제가 아닙니다., 심지어 재미.

이것이 SO의 문제입니다. 지금까지의 모든 답변은 타당한 지적을 했으며 최종 답변으로 간주되어야 합니다.요약해 보겠습니다.

나는 이 모든 것의 조합이 확실히 많은 문제를 해결한다고 생각합니다. (공평하게 말하면 CSS를 깊이 배우는 것이 모든 사람에게 선택 사항은 아니지만;어떤 사람들은 시간을 정당화할 만큼 충분히 사용하지 않습니다).

위의 사항 중 어느 것도 다루지 않는 몇 가지 문제가 있지만(특정 유형의 계산된 필드에는 JS 라이브러리 작성이 필요하다고 생각합니다), 이는 확실히 좋은 시작입니다.

변수 지원을 위해 CSS 헤더와 함께 PHP를 사용하여 큰 효과를 냈습니다.어떤 언어로든 할 수 있다고 생각합니다.다음은 PHP 샘플입니다. 라코 디스

<인용구>

문제에 대한 해결책은 곧 유명한 쌀 푸딩이 될 육두구의 양을 정확히 계산하려는 요리사처럼 숫자를 뒤 흔드는 것 같습니다.

IE에서 작업 할 때만이 문제가 발생합니다.

참조를 찾을 필요없이 대부분의 것을 코딩 할 수있는 수준까지 CSS를 배운 경우 (여전히 참조를 정기적으로 검색하는 경우 실제로 알지 못하며 불만을 제기 할 수 없다고 생각합니다), 그리고 파이어 폭스 / 사파리 용으로 개발하면 아주 좋은 곳입니다.

FF / Safari에서 작동 한 후에는 IE 호환성의 고통과 고통을 끝까지 놔두십시오. 그러면 일반적으로 CSS가 아닌 IE가 잘 속한 IE에 비난을 돌릴 것입니다.

CSS 변수 출시 예정 (상대적으로),하지만 오래 기한이 지난 것에 동의합니다.그 동안 Sass와 같은 CSS 템플릿 엔진 또는 선택한 동적 웹 언어를 사용하여 프로그래밍 방식으로 스타일 시트를 생성 할 수 있습니다.

CSS 프레임 워크의 경우 YUI 그리드 를 고려할 수 있습니다.기본 레이아웃을 훨씬 빠르고 간단하게 만들지 만 원시 형식으로 사용하면 의미론이 손상됩니다.

CSS (및 브라우저 골칫거리)에 대한 진정한 이해의 핵심은 상자 모델 및 일부 브라우저에서 사용하는 잘못된 모델.일단 그것을 내려 놓고 선택기를 배우기 시작하면 브라우저 특정 속성에서 벗어나 CSS가 기대하는 것이 될 것입니다.

또한 CSS의 레이아웃 프레임 워크 인 BlueprintCSS 를 확인하세요.모든 문제를 해결하는 것은 아니지만 많은 문제가 있으며 CSS를 직접 작성할 필요가 없습니다.

초보자가 CSS에 대해 갖는 일반적인 오류는 특이성과 관련이 있다고 생각합니다. a 태그의 스타일을 지정하는 경우 정말로 문서의 모든 항목에 스타일을 지정하거나 a 태그의 특정 "클래스"를 지정 하시겠습니까?

보통 CSS 선택기로 매우 구체적으로 시작하여 적절하다고 판단되면 일반화합니다.

다음은 주제에 대한 유머 기사이지만 정보 제공도 가능합니다. 특정 전쟁

CSS는 배우는 데 약간의 시간이 걸리지 만 처음에 가장 실망스러운 점은 모든 브라우저가 동일한 방식으로 작동하도록하기 위해 너무 많은 해킹이 필요하다는 사실이었습니다. 논리를 고수하지 않는 시스템을 배우는 것은 어리석은 것처럼 보이지만 저는 W3 사양의 형태로 각 브라우저의 특이성 뒤에 논리가 있다는 막연한 믿음에 집착했습니다. 새로운 세대의 브라우저가 서서히 등장하는 것 같습니다.하지만 IE6는 여전히 매일 제 삶을 지옥으로 만듭니다.

호환 / 유효한 CSS 코드와 브라우저의 조잡한 구현 사이에 추상화 계층을 만드는 것은 나쁜 일이 아닐 것입니다. 그러나 그러한 것이 만들어 졌다면 JS (또는 jQuery)에 의해 구동되어야합니까? (그리고 처리 비용 측면에서 불합리한 부담이 될까요?)

CSS로 스크립팅 할 때 '평준화'하는 것이 유용하다는 것을 발견했습니다. 아마도 다른 종류의 재설정 스크립트가 많이있을 것입니다. 그러나 YUI 재설정을 사용하면 다른 방법으로 겪게되는 단점의 수를 줄이는 데 도움이되었으며 YUI 그리드는 때때로 삶을 조금 더 쉽게 만듭니다.

@SCdF : 여기에 귀하의 요약이 공정하다고 생각합니다.그러나 어떤 사람들이 CSS를 배울 시간이 없다는 주장은 가짜입니다. 잠시만 생각해보십시오.마스터 한 기술을 대체하면 그 이유를 알 수 있습니다. <인용구>

I.미움.자바.나를 위해 그것을 쓸 무언가가 있습니까?모든 사람이 Java를 마스터 할 시간이있는 것은 아닙니다.

CSS는 확실히 불완전한 기술입니다. 5 년 후에는 브라우저 비 호환성 문제를 더 이상 다루지 않을 것이며 (거의 다 됐습니다), 더 나은 작성자 측 도구를 갖게되기를 바랍니다 (설명하는 종류의 변수와 계산을 제공하는 Visual Studio 매크로를 직접 작성 했으므로 불가능한 것은 아닙니다. 그러나 실제로 이해하지 않고도이 기술을 효과적으로 사용할 수 있어야한다고 주장하는 것은 그렇지 않습니다.합리적이지 않습니다.

하지만 당신은 이에 대해 올바르게 생각하고 있습니다. 아마도 여전히 CSS의 다양한 브라우저 구현을 이해해야 할 것입니다.이는 단지 애플리케이션이 존재하는 환경을 이해하는 것뿐입니다.

명확히 하기 위해:이것은 CSS를 이해하는 것이 아닙니다.언어를 잘 알고 있더라도 언어의 중복성, 중복성 및 제어 구조 부족을 처리해야 합니다.

저는 10년 넘게 CSS를 탄탄하게 작성해 왔으며 언어는 강력하고 효과적이지만 CSS를 구현하는 것은 형편없다는 결론에 도달했습니다.그래서 저는 다음과 같은 추상화 레이어를 사용합니다. 사스 또는 더 적은 또는 xCSS 언어에 인터페이스합니다.이러한 도구는 CSS와 유사한 구문을 사용하므로 문제 영역의 문제를 해결합니다.PHP와 같은 것을 사용하여 CSS를 작성하는 것은 가능하지만 최선의 접근 방식은 아닙니다.

추상화 계층을 통해 언어의 문제를 숨김으로써 프로젝트의 전체 수명 주기 동안 무결성을 유지하는 더 나은 제품을 제공할 수 있습니다.CSS를 직접 작성하면 속도가 빨라집니다. 소프트웨어 부패 대부분의 CSS 코더가 제공하지 않는 견고한 문서를 제공하지 않는 한.잘 문서화된 CSS 프레임워크를 작성하고 있다면 어쨌든 직접 작성하지는 않을 것입니다.그것은 효율적이지 않습니다.

CSS의 또 다른 문제는 중첩 블록 선언에 대한 지원이 부족하다는 것입니다.이는 코더가 평면적이고 전역적인 클래스 세트를 구축하고 명명 규칙에 따라 이름 충돌을 처리하도록 장려합니다.우리 모두는 전역 변수가 악하다는 것을 알고 있는데 왜 CSS를 그런 식으로 작성합니까?클래스를 전체 문서 모델에 노출시키는 대신 클래스에 컨텍스트를 제공하는 것이 더 낫지 않습니까?명명 규칙이 작동할 수도 있지만 이는 언어를 작성하기 위해 숙달해야 하는 또 다른 작업일 뿐입니다.

좋은 CSS를 작성하는 데 자부심을 갖고 있는 분들이 프로그래밍에서 마크업까지 모범 사례를 적용해 보시길 바랍니다.추상화 레이어를 사용한다는 것은 좋은 CSS를 작성하는 기술이 부족하다는 의미가 아니라 언어의 약점에 대한 노출이 제한되었다는 의미입니다.

CSS에서 추상화 할 필요가 없습니다. 추상화에서 CSS 자체를 인식해야합니다. CSS는 화면에 픽셀을 배치하는 것이 아닙니다. 대신 브라우저가 이러한 결정을 내리는 데 도움이되는 규칙 시스템을 작성하는 것입니다. 이것은 CSS를 작성할 때 브라우저에서 적용 할 내용을 모르기 때문에 필요합니다. 브라우저가 작업을 수행 할 환경도 모릅니다.

이를 익히려면 시간이 걸립니다. 주말에는 CSS를 습득 할 수없고 잘 지낼 수 없습니다. 언어의 진입 장벽이 낮지 만 물이 깊게 흐르기 때문에 약간 속이는 것입니다. 다음은 CSS에 능숙 해지기 위해 마스터해야하는 몇 가지 주제 입니다.

  • 캐스케이드 및 상속
  • 박스 모델
  • 부 동체와 새로운 플렉스 박스를 포함한 레이아웃 방법
  • 포지셔닝
  • 스타일을 모듈화하고 유지하기 쉽게 유지하기위한 SMACSS 또는 BEM과 같은 현재 모범 사례

    이 모든 것을 미리 알 필요는 없지만 계속 진행해야합니다. 일반적으로 다른 언어 및 프로그래밍과 마찬가지로 계속해서 더 많은 것을 배우고 기술을 마스터해야합니다. CSS는 웹 개발의 기본 부분이며, 더 많은 개발자가 다른 언어에 제공하는 것과 동일한 존중으로 처리해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top