CSS 기술을 향상시키는 20가지 CSS 팁

프런트엔드 개발에서는 효율성에 점점 더 많은 관심을 기울이고 있습니다. 즉, 선택기를 사용하여 렌더링을 빠르게 로드하고 코드를 단순화합니다. Less 및 SCSS와 같은 전처리기가 작동할 때 우회해야 하며 CSS를 직접 사용하는 것이 더 빠릅니다.

여기에서는 반복되는 규칙과 재정의를 줄이고, 레이아웃의 스타일 프로세스를 표준화하고, 자신만의 프레임워크를 효율적으로 만드는 데 도움이 될 뿐만 아니라 많은 일반적인 문제를 해결하는 데 도움이 되는 20가지 CSS 팁을 다룹니다.

1. CSS 재설정(reset) 사용

normalize.css와 같은 CSS 재설정 라이브러리는 브라우저 간 일관성을 보장하기 위해 웹 사이트 스타일에 대한 보다 명확한 표준을 제공할 수 있습니다.

대부분의 프로젝트에는 이러한 라이브러리에 포함된 모든 규칙이 필요하지 않습니다. 레이아웃의 모든 요소에 간단한 규칙을 적용하여 모든 여백 및 패딩을 제거할 수 있습니다. 기본 박스 모델. margin、padding改变浏览器默认的盒模型。

*{
     box-sizing:border-box;
     margin:0;
     padding:0
}

使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。

2、继承盒模型

让盒模型从html 继承：

html {    
    box-sizing: border-box;  
}    
*, *:before, *:after {    
    box-sizing: inherit;  
}

3、使用flexbox布局来避免margin的问题 （Get Rid of Margin hacks width Flexbox）

当你多少次试着去设计栅格布局如：组合或者图片画廊，如果使用浮动的方式，那么就需要去清除浮动和重置外边距来使其分解成所需要行数。为了避免nth-、first-、last-child 问题 ，可以使用flexbox 的space-between 属性值。

.flex-container{
  display:flex;
  justify-content:space-between;
}
.flex-container .item{              
  flex-basis:23%;
}

4、使用:not() 解决lists边框的问题

在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。比如说一个导航菜单，通过使用borders 来给每个链接Link创建分割符，然后再在加上一条规则 解除最后一个link的border

.nav li {    
    border-right: 1px solid #666;  
}
.nav li:last-child {    
    border-right: none;  
}

这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

上面就是，除了最后一个li以外，所有的 .nav li 都加上了border样式，是不是很简单！

当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有语义化（semantic）和容易理解的。

5、body上加入line-height样式

导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。

行间距（line-height）可以作为给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观

body {
    line-height: 1.5;
}

请注意，这里的声明没有单位，我们只是告诉浏览器 让它渲染行高是 渲染字体大小的1.5倍

6、垂直居中任何元素 (vertical-center anything)

在没有准备使用CSSGrid 布局的时候，设置垂直居中布局的全局规则是一个很好的方式，可以为优雅（elegantly）的设置内容布局奠定一个基础

html, body {
    height: 100%;    
    margin: 0;  
}    
body {    
    -webkit-align-items: center;    
    -ms-flex-align: center;    
    align-items: center;    
    display: -webkit-flex;    
    display: flex;  
}

7、使用SVG icons

SVG使用于所有分辨类，并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG的图标字体。设置SVG的格式就跟其他图片类型一样：

.logo {    
    background: url("logo.svg");  
}

温馨提示：如果将SVG用在可交互的元素上比如说button，SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到（确保在HTML中已设置适当的aria属性）

.no-svg .icon-only:after {    
    content: attr(aria-label);  
}

8、使用 “OWL选择器”

使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则

* + * {    
    margin-top: 1.5rem;  
}

这是一个很棒的技巧，可以帮你创建更加均匀的类型跟间距。在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px

.intro > * {   
   margin-bottom: 1.25rem;  
}

box-sizing 선언 사용은 선택 사항이며 아래 상속된 상자 모델 형식을 사용하는 경우 건너뛸 수 있습니다.

2. 상자 모델 상속

🎜🎜상자 모델이 html:🎜

.p {
  display: inline-block;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

🎜🎜3에서 상속받도록 하세요. 여백 문제를 방지하려면 Flexbox 레이아웃을 사용하세요(여백 해킹 폭 Flexbox 제거)🎜🎜🎜 times 포트폴리오나 이미지 갤러리와 같은 그리드 레이아웃을 디자인할 때 플로트를 사용하는 경우 플로트를 지우고 여백을 재설정하여 필요한 행 수로 분할해야 합니다. n번째-, first-, last-child 문제를 방지하려면 flexbox의 space- between 속성 값. 🎜

.calendar {    
    table-layout: fixed;  
}

🎜🎜4 목록 테두리 문제를 해결하려면 not()을 사용하세요🎜🎜🎜웹 디자인에서는 일반적으로 last-child nth-child 선택기를 사용합니다. 원래 상위 선택자에 선언된 스타일을 재정의합니다. 예를 들어 탐색 메뉴의 경우 테두리를 사용하여 각 링크 링크에 대한 구분 기호를 만든 다음 마지막 링크의 테두리🎜<pre class="brush:css;toolbar:false">a[href^=&quot;http&quot;]:empty::before { content: attr(href); }</pre>🎜이는 브라우저가 한 방향으로 렌더링하도록 강제할 뿐만 아니라 특정 선택기를 통해 이를 실행 취소하는 매우 혼란스러운 방법입니다. 이와 같은 스타일을 재정의하는 것은 불가피합니다. 그러나 가장 중요한 것은 다음을 사용하여 선언하려는 요소에 하나의 스타일만 사용할 수 있다는 것입니다. <code>not 의사 클래스(pseudo-class): 🎜

a[href]:not([class]) {    
    color: #999;    
    text-decoration: none;  
    transition: all ease-in-out .3s;
}

🎜위 마지막 li를 제외하고 모든 .nav li가 border 스타일로 추가된다는 점입니다. 매우 간단하지 않나요? 🎜🎜물론 .nav li+li 또는 .nav li:first-child ~li 를 사용할 수도 있지만 : not은 더 효율적이고 의미론적으로 이해하기 쉽습니다. 🎜🎜🎜5. 본문에 줄 높이 스타일 추가 🎜🎜🎜스타일 시트를 비효율적으로 만드는 한 가지는 지속적으로 반복되는 선언입니다. CSS가 보다 원활하게 흐르도록 프로젝트 계획 및 조합 규칙을 만드는 것이 가장 좋습니다. 이를 달성하려면 캐스케이드를 이해하고 범용 선택기로 작성된 스타일이 다른 위치에서 상속될 수 있는 방법을 이해해야 합니다. 🎜🎜줄 간격(line-height)은 전체 프로젝트에 대한 속성 세트로 사용할 수 있습니다. 이는 코드 양을 줄일 뿐만 아니라 웹사이트에 표준적인 모양을 부여할 수도 있습니다.
🎜

.container {    
    height: 0;    
    padding-bottom: 20%;    
    position: relative;  
}    
.container div {    
    border: 2px dashed #ddd;    
    height: 100%;    
    left: 0;    
    position: absolute;    
    top: 0;    
    width: 100%;  
}

🎜여기 선언에는 단위가 없다는 점에 유의하세요. 렌더링 선 높이가 렌더링 글꼴 크기의 1.5배가 되도록 브라우저에 지시합니다🎜🎜🎜6. 수직 중심 무엇이든(수직 중심 무엇이든)🎜🎜 🎜 CSSGrid 레이아웃을 사용할 준비가 되지 않은 경우 수직 중심 레이아웃에 대한 전역 규칙을 설정하는 것은 콘텐츠 레이아웃을 우아하게 설정하기 위한 기초를 마련하는 좋은 방법입니다🎜

img {    
    display: block;    
    font-family: Helvetica, Arial, sans-serif;    
    font-weight: 300;    
    height: auto;    
    line-height: 2;    
    position: relative;    
    text-align: center;    
    width: 100%;  
}
img:before {    
    content: "We're sorry, the image below is missing :(";    
    display: block;    
    margin-bottom: 10px;  
}    
img:after {    
    content: "(url: " attr(src) ")";   
    display: block;    
    font-size: 12px;  
}

🎜🎜7 SVG 아이콘 사용🎜🎜🎜SVG는 모든 해상도에 사용됩니다. 클래스는 모든 브라우저에서 지원됩니다. 따라서 .png .jpg .gif 등의 파일은 폐기될 수 있습니다. FontAwsome5는 SVG 아이콘 글꼴도 제공합니다. SVG 형식 설정은 다른 이미지 유형과 동일합니다. 🎜

article {    
    font-size: 1.25rem;  
}    
aside {    
    font-size: .9rem;  
}

🎜주의 사항: SVG가 버튼과 같은 대화형 요소에 사용되는 경우 SVG로 인해 로딩 문제가 발생합니다. 다음 규칙을 사용하여 SVG에 액세스할 수 있는지 확인할 수 있습니다(HTML에 적절한 aria 속성이 설정되어 있는지 확인)🎜

h2 {    
    font-size: 2em;  
}    
p {    
    font-size: 1em;  
}

🎜🎜8 "OWL 선택기"를 사용하세요🎜🎜🎜범용 선택기(범용 선택기)를 사용하세요. code>* 및 인접 형제 선택기(인접 형제 선택기) +는 다른 요소 뒤에 오는 문서 흐름의 모든 요소에 대해 통합 규칙을 설정하는 강력한 CSS 기능을 제공할 수 있습니다. 보다 균일한 문자와 간격을 만드는 데 도움이 되는 훌륭한 트릭입니다. 위의 예에서 H3 뒤의 H4, 문단 뒤의 문단 등 다른 요소 뒤에 오는 요소는 최소 1.5rems(약 30px) 이상 분리되어야 합니다. 🎜🎜🎜9. 일관된 수직 리듬🎜🎜

一致的垂直节奏提供了一种视觉美学，使内容更具可读性。如果owl选择器过于通用，请在元素内使用通用选择器（*）为布局的特定部分创建一致的垂直节奏：

.intro > * {   
   margin-bottom: 1.25rem;  
}

10、对更漂亮的换行文本使用 box-decoration-break

假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。Box Decoration Break属性允许您仅对文本应用样式，同时保持填充和页边距的完整性。

如果要在悬停时应用突出显示，或在滑块中设置子文本样式以具有突出显示的外观，则此功能尤其有用：

.p {
  display: inline-block;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

内联块声明允许将颜色、背景、页边距和填充应用于每行文本，而不是整个元素，克隆声明确保将这些样式均匀地应用于每行。

11、等宽表格单元格

表格可能很难处理，所以尝试使用table-layout：fixed来保持单元格相等宽度：

.calendar {    
    table-layout: fixed;  
}

12、强制使用属性选择器显示空链接

这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。例如，<a></a>元素没有文本值，但href属性有一个链接：

a[href^="http"]:empty::before {    
    content: attr(href);  
}

13、样式“默认”链接

说到链接样式，您可以在几乎每个样式表中找到一个通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。

尝试这种较少干扰的方式为“默认”链接添加样式：

a[href]:not([class]) {    
    color: #999;    
    text-decoration: none;  
    transition: all ease-in-out .3s;
}

14、比率框

要创建具有固有比率的框，您需要做的就是将顶部或底部填充应用于div：

.container {    
    height: 0;    
    padding-bottom: 20%;    
    position: relative;  
}    
.container div {    
    border: 2px dashed #ddd;    
    height: 100%;    
    left: 0;    
    position: absolute;    
    top: 0;    
    width: 100%;  
}

使用20％进行填充使得框的高度等于其宽度的20％。无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。

15、风格破碎的图像

这个技巧不是关于代码缩减，而是关于细化设计细节的。破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。用这个小小的CSS创建更美观的效果：

img {    
    display: block;    
    font-family: Helvetica, Arial, sans-serif;    
    font-weight: 300;    
    height: auto;    
    line-height: 2;    
    position: relative;    
    text-align: center;    
    width: 100%;  
}
img:before {    
    content: "We're sorry, the image below is missing :(";    
    display: block;    
    margin-bottom: 10px;  
}    
img:after {    
    content: "(url: " attr(src) ")";   
    display: block;    
    font-size: 12px;  
}

16、使用rem进行全局大小调整；使用em进行局部大小调整

在设置根目录的基本字体大小后，例如html字体大小：15px；，可以将包含元素的字体大小设置为rem:

article {    
    font-size: 1.25rem;  
}    
aside {    
    font-size: .9rem;  
}

然后将文本元素的字体大小设置为em

h2 {    
    font-size: 2em;  
}    
p {    
    font-size: 1em;  
}

现在，每个包含的元素都变得分区化，更易于样式化、更易于维护和灵活。

17、隐藏未静音的自动播放视频

当您处理无法从源代码轻松控制的内容时,这对于自定义用户样式表来说是一个很好的技巧。这个技巧将帮助您避免在加载页面时自动播放视频中的声音干扰访问者，并再次提供了精彩的：not（）伪选择器：

video[autoplay]:not([muted]) {    
    display: none;  
}

18、灵活运用root类型

响应布局中的字体大小应该能够自动调整到视区，从而保存编写媒体查询的工作，以处理字体大小。可以使用:not和视区单位，根据视区高度和宽度计算字体大小：

:root {    
    font-size: calc(1vw + 1vh + .5vmin);  
}

现在，您可以使用根em单位，该单位基于:not：

body {    
    font: 1rem/1.6 sans-serif;  
}

结合上面的rem/em技巧以获得更好的控制。

19、在表单元素上设置字体大小，以获得更好的移动体验

为了避免移动浏览器（iOS Safari等）在点击<select></select>下拉列表时放大HTML表单元素，请在添加font-size样式：

input[type="text"],  
input[type="number"],  
select,  
textarea {    
    font-size: 16px;  
}

20、CSS变量

最后，最强大的CSS级别来自于CSS变量，它允许您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。你可能有一套颜色在整个项目中使用，以保持一致性。

在CSS中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。如果某个颜色在某个时刻需要改变，你就不得不去寻找和替换，这是不可靠或不快速的，当为最终用户构建产品时，变量使得定制变得容易得多。例如：

:root {
  --main-color: #06c;
  --accent-color: #999;
}

h1, h2, h3 {
  color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
 color: var(--accent-color);
}

更多编程相关知识，请访问：编程视频！！

위 내용은 CSS 기술을 향상시키는 20가지 CSS 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!