최신 CSS 코드 작성을 위한 20가지 팁
- 黄舟원래의
- 2017-01-18 13:09:571055검색
CSS 캐스케이딩 스타일시트
CSS(Cascading Style Sheet)는 캐스케이딩 스타일시트입니다. HTML(Standard Generalized Markup Language의 응용 프로그램) 또는 XML(Standard Generalized Markup Language의 하위 집합)과 같은 문서 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다.
Margin Collapse가 무엇인지 이해하세요
다른 많은 속성과 달리 상자 모델의 수직 여백은 만날 때, 즉 요소의 아래쪽 여백이 다른 요소의 위쪽 여백과 인접해 있으면 두 값 중 더 큰 값만 유지됩니다. 다음의 간단한 예에서 배울 수 있습니다.
.square { width: 80px; height: 80px;
}.red { background-color: #F44336; margin-bottom: 40px;
}.blue { background-color: #2196F3; margin-top: 30px;
}위의 예에서는 빨간색과 파란색 사각형의 여백을 더하면 70px가 되지 않고 빨간색 아래쪽 여백만 유지됩니다. 이러한 현상을 방지하기 위해 몇 가지 방법을 사용할 수 있지만 보다 조화롭게 보이도록 margin-bottom 속성을 최대한 균일하게 사용하는 것이 좋습니다.
레이아웃에 Flexbox 사용
기존 레이아웃에서는 플로트 또는 인라인 블록을 사용하는 데 익숙하지만 전체 웹사이트보다는 문서 서식을 지정하는 데 더 적합합니다. Flexbox는 레이아웃을 위한 전문 도구입니다. Flexbox 모델을 사용하면 개발자가 레이아웃에 편리하고 확장 가능한 다양한 속성을 사용할 수 있습니다. 한 번 사용하면 놓칠 수 없을 것으로 예상됩니다.
.container { display: flex; /* Don't forget to add prefixes for Safari */display: -webkit-flex;
}Flexbox에 대한 많은 소개와 팁을 제공했습니다. 알아야 할 5가지 Flexbox 기술과 같은 Tutorialzine.
CSS 재설정 사용
지난해 브라우저의 급속한 발전과 사양 통일로 인해 브라우저 기능의 파편화가 개선되었으나 여전히 브라우저별로 차이가 있는 부분이 있습니다. 행동 차이가 많다. 이 문제를 해결하는 가장 좋은 방법은 CSS 재설정을 사용하여 모든 요소에 대해 통일된 스타일을 설정하여 상대적으로 통일되고 깔끔한 스타일 시트를 기반으로 작업을 시작할 수 있도록 하는 것입니다. 현재 널리 사용되는 재설정 라이브러리에는 Normalize.css, minireset 및 ress가 포함되어 있으며 브라우저 간에 알려진 많은 차이점을 수정할 수 있습니다. 그리고 외부 라이브러리를 사용할 계획이 없다면 다음 기본 규칙을 사용하는 것이 좋습니다.
* { margin: 0; padding: 0; box-sizing: border-box;
}위 규칙은 쓸모없어 보이지만 다른 브라우저에서 제공하는 경우 다른 기본값 설정 여백/패딩의 경우 여전히 상당히 까다로울 수 있습니다.
모든 것이 Border-box여야 합니다
많은 초보자가 box-sizing 속성을 이해하지 못하더라도 이는 실제로 매우 중요합니다. 이를 이해하는 가장 좋은 방법은 두 값을 살펴보는 것입니다.
기본값은 content-box입니다. 즉, 요소의 높이/너비 속성을 설정하면 해당 요소에만 영향을 미칩니다. 콘텐츠 크기 . 예를 들어,
border-box: 너비/높이에 패딩과 측면이 포함됩니다. 예를 들어 너비: 100px인
요소를 border-box로 설정하면 스타일과 레이아웃이 매우 편리해집니다. 이런 식으로 하위 요소의 패딩이나 측면에 대해 걱정하지 않고 상위 요소에 높이 및 너비 제한을 설정할 수 있습니다. 이 제한을 위반합니다.
이미지를 배경 이미지로 사용
如果需要在响应式的环境下展示图片，有个简单的小技巧就是使用该图片作为某个
img { width: 300px; height: 200px;
}div { width: 300px; height: 200px;
background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');
background-position: center center; background-size: cover;
}section{ float: left; margin: 15px;
}不过这种方式也是存在缺陷的，譬如你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到，有个不错的属性叫object-fit可以解决这个问题，不过该属性目前的浏览器支持并不是很完善。
Better Table Borders
HTML中使用Tables进行布局一直是个很头疼的问题，它们使用起来很简单，但是无法进行响应式操作，并且也不方便进行全局样式设置。譬如，如果你打算为Table的边与单元的边添加样式，可能得到的结果如下:
table { width: 600px; border: 1px solid #505050; margin-bottom: 15px; color:#505050;
}td{ border: 1px solid #505050; padding: 10px;
}
这里存在的问题是出现了很多的重复的边，会导致视觉上不协调的情况，那么我们可以通过设置border-collapse:collapse来进行处理:
注释格式优化
CSS虽然谈不上一门编程语言但是其仍然需要添加注释以保障整体代码的可读性，只要添加些简单的注释不仅可以方便你更好地组织整个样式表还能够让你的同事或者未来的自己更好地理解。对于CSS中整块的注释或者使用在Media-Query中的注释，建议是使用如下形式：
/*---------------
#Header
---------------*/header { }header nav { }/*---------------
#Slideshow
---------------*/.slideshow { }而设计的细节说明或者一些不重要的组件可以用如下单行注释的方式:
/* Footer Buttons */.footer button { }.footer button:hover { }同时，不要忘了CSS中是没有//这种注释方式的:
/* Do */p {
padding: 15px; /*border: 1px solid #222;*/}/* Don't */p {
padding: 15px; // border: 1px solid #222; }使用Kebab-case命名变量
对于样式类名或者ID名的命名都需要在多个单词之间添加-符号，CSS本身是大小写不敏感的因此你是用不了camelCase的，另一方面，很久之前也不支持下划线，所以现在的默认的命名方式就是使用-:
/* Do */.footer-column-left { }/* Don't */.footerColumnLeft { }.footer_column_left { }而涉及到具体的变量命名规范时，建议是使用BEM规范，只要遵循一些简单的原则即可以保证基于组件风格的命名一致性。你也可以参考CSS Tricks来获得更多的细节描述。
避免重复代码
大部分元素的CSS属性都是从DOM树根部继承而来，这也是其命名为级联样式表的由来。我们以font属性为例，该属性往往是继承自父属性，因此我们并不需要再单独地为元素设置该属性。我们只需要在html或者body中添加该属性然后使其层次传递下去即可:
html { font: normal 16px/1.4 sans-serif;
}使用transform添加CSS Animations
不建议直接改变元素的width与height属性或者left/top/bottom/right这些属性来达到动画效果，而应该优先使用transform()属性来提供更平滑的变换效果，并且能使得代码的可读性会更好:
.ball { left: 50px; transition: 0.4s ease-out;
}/* Not Cool*/.ball.slide-out { left: 500px;
}/* Cool*/.ball.slide-out { transform: translateX(450px);
}Transform的几个属性translate、rotate、scale都具有比较好的浏览器兼容性可以放心使用。
不要重复造轮子
现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。这些库可以帮助我们解决从小的代码片到用于构建完整的响应式应用的全框架。所以如果下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在GitHUB或者CodePen上搜索可行方案。
尽可能使用低优先级的选择器
并不是所有的CSS选择器的优先级都一样，很多初学者在使用CSS选择器的时候都是考虑以新的特性去复写全部的继承特性，不过这一点在某个元素多状态时就麻烦了，譬如下面这个例子:
a{ color: #fff; padding: 15px;
}a#blue-btn { background-color: blue;
}a.active { background-color: red;
}我们本来希望将.active类添加到按钮上然后使其显示为红色，不过在上面这个例子中很明显起不了作用，因为button已经以ID选择器设置过了背景色，也就是所谓的Higher Selector Specificity。一般来说，选择器的优先级顺序为：ID(#id) > Class(.class) > Type(header)
避免使用!important
认真的说，千万要避免使用!important，这可能会导致你在未来的开发中无尽的属性重写，你应该选择更合适的CSS选择器。而唯一的可以使用!important属性的场景就是当你想去复写某些行内样式的时候，不过行内样式本身也是需要避免的。
使用text-transform属性设置文本大写
<div class="movie-poster">Star Wars: The Force Awakens</div>.movie-poster {
text-transform: uppercase;
}Em, Rem, 以及 Pixel
已经有很多关于人们应该如何使用em，rem，以及px作为元素尺寸与文本尺寸的讨论，而笔者认为，这三个尺寸单位都有其适用与不适用的地方。不同的开发与项目都有其特定的设置，因此并没有通用的规则来决定应该使用哪个单位，这里是我总结的几个考虑:
em – 其基本单位即为当前元素的font-size值，经常适用于media-queries中，em是特别适用于响应式开发中。
rem – 其是相对于html属性的单位，可以保证文本段落真正的响应式尺寸特性。
px – Pixels 并没有任何的动态扩展性，它们往往用于描述绝对单位，并且可以在设置值与最终的显示效果之间保留一定的一致性。
在大型项目中使用预处理器
估计你肯定听说过 Sass, Less, PostCSS, Stylus这些预处理器与对应的语法。Preprocessors可以允许我们将未来的CSS特性应用在当前的代码开发中，譬如变量支持、函数、嵌套式的选择器以及很多其他的特性，这里我们以Sass为例:
$accent-color: #2196F3;a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}使用Autoprefixers来提升浏览器兼容性
使用特定的浏览器前缀是CSS开发中常见的工作之一，不同的浏览器、不同的属性对于前缀的要求也不一样，这就使得我们无法在编码过程中记住所有的前缀规则。并且在写样式代码的时候还需要加上特定的浏览器前缀支持也是个麻烦活，幸亏现在也是有很多工具可以辅助我们进行这样的开发:
Online tools: Autoprefixer
Text editor plugins: Sublime Text, Atom
Libraries: Autoprefixer (PostCSS)
프로덕션 환경에서 축소된 코드 사용
페이지 로딩 속도를 향상시키기 위해 프로덕션 환경에서는 기본적으로 압축된 리소스 코드를 사용해야 합니다. 압축 과정에서 전체 파일의 크기를 줄이기 위해 모든 공백과 반복이 제거됩니다. 물론 압축된 코드는 읽을 수 없으므로 개발 단계에서는 일반 버전을 계속 사용해야 합니다. 현재 CSS 압축을 위한 다양한 도구가 있습니다.
온라인 도구 - CSS Minifier(API 포함), CSS 압축기
텍스트 편집기 플러그인: Sublime Text, Atom
라이브러리: Minfiy (PHP), CSSO 및 CSSNano (PostCSS, Grunt, Gulp)
어떤 도구를 선택하느냐는 확실히 자신의 작업 흐름에 따라 다릅니다~
Caniuse 보기
브라우저에 따라 크게 다릅니다 호환성이므로 적응해야 하는 브라우저를 대상으로 할 수 있는 경우 caniuse의 특정 기능에 대한 브라우저 버전 호환성, 특정 접두사를 추가해야 하는지 또는 특정 플랫폼에 버그가 있는지 등을 쿼리할 수 있습니다. 그러나 caniuse를 사용하는 것만으로는 충분하지 않으며 탐지를 위해 몇 가지 추가 서비스를 사용해야 합니다.
검증: 검증
CSS 검증은 HTML 검증이나 JavaScript 검증만큼 중요하지 않을 수 있지만 공식 출시 전에 Lint 도구를 사용하여 CSS 코드를 검증하는 것은 여전히 유용합니다. 의미있는. 코드의 잠재적인 오류에 대해 알려주고 모범 사례를 충족하지 않는 일부 코드에 대해 메시지를 표시하며 코드 성능을 향상시키기 위한 몇 가지 제안을 제공합니다. Minifers 및 Autoprefixers와 마찬가지로 사용 가능한 도구가 많이 있습니다.
온라인 도구: W3 Validator, CSS Lint
텍스트 편집기 플러그인: Sublime Text, Atom
라이브러리: lint( Node.js, PostCSS), css-validator (Node.js)
위는 최신 CSS 코드 작성을 위한 20가지 제안입니다. 더 많은 관련 콘텐츠를 보려면 주의하세요. PHP 중국어 홈페이지(www.php.cn)!