각 회사마다 코딩컨벤션이 있어서 그에 맞게 코딩을 하면 된다고 한다.
구글의 코딩컨벤션이 왜인지 궁금해진 나.
보기나 하자.
Omit optional tags (optional).
정말 저 많은 태그들이 옵셔널 태그였단 말잉가?
Class Name Style
Use class names that are as short as possible but as long as necessary.
Try to convey what a class is about while being as brief as possible.
Using class names this way contributes to acceptable levels of understandability and code efficiency.
/ Not recommended /
.navigation {}
.atr {}
/ Recommended /
.nav {}
.author {}
줄임말을 안쓰는 게 요즘 좋은 코드의 흐름이라는데
구글은 줄임말을 recommended~
Class Name Delimiters
Separate words in class names by a hyphen.
Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.
/ Not recommended: does not separate the words “demo” and “image” /
.demoimage {}
/ Not recommended: uses underscore instead of hyphen /
.error_status {}
/ Recommended /
.video-id {}
.ads-sample {}
오호 하이픈 쓰라고 나와있다!
Type Selectors
Avoid qualifying class names with type selectors.
Unless necessary (for example with helper classes), do not use element names in conjunction with classes.
Avoiding unnecessary ancestor selectors is useful for performance reasons.
/ Not recommended /
ul.example {}
div.error {}
/ Recommended /
.example {}
.error {}
css에서 클래스 쓸 때 쓸데없이 앞에 타입셀렉터 써주지 말아라.
❓❔ 근데 이거 선택자 우선순위 정할 때 구체성에 영향 주고 싶을 때만 쓰라는 얘긴가...? 궁금! 물어봐야겠다.
➕ 빔캠프의 이종찬강사님이 특강오셨을 때 많이 강조하셨던 내용 : 타입셀렉터를 css에 쓰지 말아라!
ㅋㅋㅋ 간단명료.
0 and Units
Omit unit specification after “0” values, unless required.
Do not use units after 0 values, unless they are required.
flex: 0px; / This flex-basis component requires a unit. /
flex: 1 1 0px; / Not ambiguous without the unit, but needed in IE11. /
margin: 0;
padding: 0;
0 뒤에 values를 쓰지 말라는 건데 단위를 말하나보다.
required 일 때 빼고 쓰지마라~
❔❓왜용?
음 연관있는 다른 요소 프로퍼티에서 단위 다르게 쓰면 오류나나?
Hexadecimal Notation
Use 3 character hexadecimal notation where possible.
For color values that permit it, 3 character hexadecimal notation is shorter and more succinct.
/ Not recommended /
color: #eebbcc;
/ Recommended /
color: #ebc;
오 16진수로 색같은 거 쓸 때 겹치는 건 안써도 되나보다!
신기해😃
Declaration Order
Alphabetize declarations.
Put declarations in alphabetical order in order to achieve consistent code in a way that is easy to remember and maintain.
Ignore vendor-specific prefixes for sorting purposes. However, multiple vendor-specific prefixes for a certain CSS property should be kept sorted (e.g. -moz prefix comes before -webkit).
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
중간에 하이픈으로 연결된 프로퍼티 빼고 알파벳순서로 하라고 하는데 진짠가? 기억하고 유지보수하기 쉽다고 하네용
👋Parting Words
Be consistent.
If you’re editing code, take a few minutes to look at the code around you and determine its style. If they use spaces around all their arithmetic operators, you should too. If their comments have little boxes of hash marks around them, make your comments have little boxes of hash marks around them too.
The point of having style guidelines is to have a common vocabulary of coding so people can concentrate on what you’re saying rather than on how you’re saying it. We present global style rules here so people know the vocabulary, but local style is also important. If code you add to a file looks drastically different from the existing code around it, it throws readers out of their rhythm when they go to read it. Avoid this.
구글의 마지막으로 하고싶은 말.
좀 다정하게 말해줘라~! 신입이 보면 긴장될 듯.
(난 미리봐서 괜찮을듯 우하하)
🚫Avoid this.
요약하면
주변보고 잘 따라하고, 너 코드 짜고 원래 있던 코드들에 비해 니 코드가 개성이 넘치면 민폐끼치는 거다!
라는 거 같다...
별게 다 재밌네 참나
