첫째, 가독성이 있습니다
어떤 사람들은 CSS 가 프로그램이 아니므로 가독성이 필요하지 않다고 생각합니다. 어떤 사람들은 CSS 가 쓰기만 하면 읽을 수 있다고 생각하는데, 왜냐하면 간단하기 때문이다. 다양한 선행 프로세서를 제외하면 기본 CSS 구조는 프로그래밍이 필요한 부분은 없지만 혼란을 초래할 수 있습니다. 두 가지 이유가 있습니다. 첫째, CSS 는 우선 순위와 범위를 포함하는 계층화될 수 있습니다. 만약 잘 쓰지 못한다면, 사람들은 그것의 뜻을 읽기가 매우 어렵다. 둘째, CSS 속성이 많고 CSS3 에는 많은 고유 속성이 도입되었습니다. 선택기에는 수십 개의 속성이 포함될 수 있습니다. 예를 들어, 제가 무작위로 쓴 CSS 코드는 다음과 같습니다.
스팬 {
-webkit-box-shadow: 6px 4px 4px 레드;
-moz-box-shadow: 6px 4px 4px 레드;
Box-shadow: 6px 4px 4px 레드;
}
구역 범위 {
테두리 너비: 4px
테두리 스타일: 대시;
테두리 색상: 파란색;
}
# 상자 {
테두리-왼쪽: 2px 순수 빨간색;
테두리-하단: 2px 순수 빨간색;
}
언뜻 보면 아무것도 없다. 모두 국경입니다. 대략 볼 수 있듯이 이 CSS 는 단지 빨간색 그림자를 추가하여 상자를 더욱 입체적으로 보이게 할 뿐이다. 하지만 중간 부분은 파괴적인 것 같습니다. 너는 너무 어리석어서 알아차리지 못한다고 말할지도 모른다. 네, 이 세 부분이 수만 줄의 CSS 에 분산되어 있을 때는 보이지 않습니다. 그래서 자연스럽게 누군가가 우리의 귀여운 브라우저를 떠올렸습니다. 네, 브라우저에서 목표에 작용하는 CSS 스타일을 빠르게 찾을 수 있지만, 그것은 모든 악의 근원이기도 합니다. 우선, 나는 네가 중간 부분이 무엇을 위해 쓴 것인지 모른다고 가정한다. 왜냐하면 너는 브라우저를 통해 찾았기 때문이다. (알버트 아인슈타인, Northern Exposure (미국 TV 드라마), 예술명언) 그럼 두 가지 가능성이 남아 있습니다. 어쨌든, 그것을 바꾸고 왜 존재하는지 보세요. 이전 비극의 가능성은 100% 였고, 다음 비극의 가능성은 90% 였다. 왜냐하면 너는 이미 구덩이에 빠졌기 때문이다. 곧 우리는 그것을 수정하는 것과 관련된 다른 곳이 있다는 것을 알게 될 것이고, 그런 다음 브라우저에서 또 다른 알 수 없는 스타일을 탐구할 것이다. 네가 모든 것을 이해할 때, 너는 이미 수만 줄의 코드에 대해 명확한 인식을 가지고 있을 것이다. 아마도 가장 운 좋게도, 너는 몇 시간을 낭비했는데, 단지 수정만 하면 된다는 것을 알게 되었다.
물론, 우리는 순진하게 우리가 그것들을 함께 쓰면 쉽게 찾을 수 있다고 생각할 수 있다. 나는 계속해서 이 생각을 따라 이 문제를 폭로하려고 노력할 것이다.
서비스 용이성
소위 사물이 유류로 모이는 것은 매우 일리가 있다. 사람들은 사물을 분류하는 것에 익숙하지만 문제는 분류 기준이다. 스타일은 업무에 관심이 없다. 문자 내용이 무엇이든, 기능이 무엇이든지, 스타일 (예: 크기, 간격, 폭 높이, 색상 등) 에만 관심이 있다. 한 구성 요소의 스타일만 간단하게 합치면 짧은 코드를 반복해서 작성할 수 있습니다. Don' t 당신은 그것이 얼마나 진지 하다 고 생각 합니까? 내가 너에게 밤을 하나 들어줄게.
옆으로 서다
박스-섀도우: 6px4px4px # aa3343;
}
탐색 {
박스-섀도우: 6px4px4px # ab3633;
}
。 항목 {
상자 그림자: 6px 4px 4px # AA3732
}
. item.otherStatus {
상자 그림자: 6px4px4px # aa3132;
}
위의 예를 계속 진행하면 박스에는 그림자가 필요하지만, 이 프로젝트의 UI 가 사이드바, 탐색기, 항목을 포함한 통일된 경우 어떻게 합니까? 만약 내일 고객이나 UX 가 그의 머리를 찍는다면, 그림자는 빨간색이 아니라 회색이어야 합니까? 글로벌 대체는 생명을 구하는 지푸라기라고 순진하게 생각하지 마라. 첫째, 빨간색과 블러를 색조로 사용하는 사이트는 거의 없다. 코드 #AA3333 을 사용해야 합니다. 그리고 사이드바는 #A43433, 내비게이터는 #AB3633 등을 사용합니다. 항목에는 두 가지 상태가 있습니다. 두 상태의 색상은 다릅니다. 어떻게 이런 일이 가능할까요? 하지만 브라우저를 열면, 원래 거의 같은 색이 그림자 속에서 똑같다는 것을 알 수 있습니다. (존 F. 케네디, Northern Exposure (미국 TV 드라마), 예술명언) 누가 알겠어요? 이는 단지 하나의 색상일 수 있으며 사용 시 모델에서 임의로 선택됩니다.
대량의 중복은 코드 중복뿐만 아니라 인적 자원까지 동기화하기 때문에 자신의 수정이 완전히 일치한다는 것을 보장하기 어렵다. 특히 일관되지 않고 독특한 것이 도입되었다. CSS 를 얕보지 마라. 그 결과는 일정과 인력의 압력이다. 다음은 PM 이 인월 신화 본 적이 있는가 하는 것이다.
누가 너에게 이렇게 쓰라고 했니? 코드를 읽을 때, 우리는 묻기를 좋아하는데, 애초에 왜 이렇게 썼을까? 하지만 천천히 당신은 그 역사를 읽을 것이고, 때로는 무의식적으로 읽을 것입니다. 이것은 우리를 다음 토론으로 안내했다.
둘째, 확장성
확장성은 사람을 속이는 것이다. 확장성이란 기존의 기초 위에서 새로운 사물의 성능을 발전시키는 것이지만, 가독성과 유지 보수성을 유지해야 한다는 전제도 있어야 한다고 생각합니다.
단순히 서비스성을 추구하는 것은 자멸이다. 그 이유는 간단하다. 신구 코드가 완전히 분리될 때 확장성이 가장 높다. 이전 부분에 영향을 주지 않아도 새로운 스타일을 마음대로 발휘할 수 있기 때문이다. 신기하지 않나요? 이렇게 쓴 코드는 분명히 우리가 이전에 물어본 코드일 것이다. 그래서 너 자신에게 대답해라, 나는 처음에는 가독성과 유지 보수성을 고려하지 않고, 단지 새로운 스타일을 빠르게 추가하고 싶어서 썼다.
그렇다면 좋은 확장성은 무엇일까요? 간단히 말하면 다재다능한 제품입니다. 예를 들어, 상자, 아마도 그 스타일이 딱 맞을 것이다.
셋째, 재사용 가능성
내가 계속 말한 것이 반복인 것 같으니 재사용에 대해 말해 봐. CSS 코드를 재사용하는 방법은 세분성, 하나 또는 두 개의 속성 재사용 여부 또는 큰 선택기 그룹 재사용과 같은 큰 문제입니다. 또 다른 예는 객체가 클래스 또는 html 의 속성을 재사용할지 여부입니다. 이러한 선택은 그다지 중요하지 않지만 영향이 크므로 전체 CSS 구조의 변화라고 할 수 있습니다. 우리는 box 의 그림자를 가지고 재사용을 계속 토론했다.
。 그림자
-WebKit-box-shadow: 6px4px4px # a9334;
-moz-box-shadow: 6px4px4px # a93334;
Box-shadow: 6px4px4px # a9334;
왼쪽 테두리: 2px 단색 # a93334 \ 9;
Border-bottom: 2pxsolid # a93334 \ 9;
}
Shadow 클래스가 있는 것 같습니다. 어떤 목표에도 이 그림자를 추가할 수 있지만 이로 인해 재사용 문제가 발생합니다. 위의 파괴적인 CSS 스타일과 마찬가지로 한 항목에 이미 다른 두 개의 테두리가 있는 경우 이 클래스를 제거할 수 없습니다. 그래서 재사용 할 때, 필요한 것을 고려해야 할 뿐만 아니라, 필요 없는 것도 고려해야 한다. 표시 및 오버플로와 같은 기타 필수 속성도 고려해야 합니다. 사용자 에이전트로 인해 많은 속성이 요소에 숨겨져 있기 때문입니다.