프론트엔드 실무 프로젝트에서 CSS 코드를 사용할 때 주의할 점 20가지-CSS 튜토리얼-php.cn

이번에는 프론트엔드 실무 프로젝트에서 CSS 코드 사용 시 주의사항 20가지를 가져왔습니다. 다음은 실제 사례입니다.

01 여백 속성은 주의해서 사용하세요

다른 속성과 달리 세로 방향의 여백이 만나면 무너집니다. 즉, 한 요소의 아래쪽 여백이 다른 요소의 위쪽 여백과 만나면 둘 중 더 큰 쪽이 그대로 남게 됩니다. 아래는 간단한 예입니다.

 <p class="square red"></p>
    <p class="square blue"></p>
    .square {
        width: 80px;
        height: 80px;
    }
    .red {
        background-color: #F44336;
        margin-bottom: 40px;
    }
    .blue {
        background-color: #2196F3;
        margin-top: 30px;
    }

로그인 후 복사

실제로 위의 두 요소 사이의 세로 방향 거리는 70px가 아닌 40px이며 파란색 사각형의 여백은 계산되지 않습니다. 이 기본 동작을 제거하는 방법은 여러 가지가 있지만 가장 좋은 방법은 margin-bottom과 같이 한 방향으로만 여백 속성을 사용하는 것입니다.

02. 박스 모델 레이아웃 사용

박스 모델에는 당연히 존재 이유가 있습니다. float 및 inline-block은 확실히 작동하지만 전체 웹사이트가 아닌 문서 스타일을 지정하기 위한 기본 도구입니다. 어떤 의미에서 Flexbox는 우리가 원하는 레이아웃을 더 쉽고 정확하게 만들 수 있도록 설계되었습니다.

Flexbox 모델에서 제공하는 일련의 속성은 개발자에게 더 큰 유연성을 제공하며 일단 익숙해지면 반응형 레이아웃을 만드는 것이 매우 쉽습니다. Flexbox에 대한 브라우저 지원도 완벽에 가깝기 때문에 Flexbox 사용을 막을 이유가 없습니다.

.container {
        display: flex;
        /* Don't forget to add prefixes for Safari */
        display: -webkit-flex;
    }

로그인 후 복사

03. CSS 재설정 수행

수년에 걸쳐 상황이 개선되었지만 다양한 브라우저의 기본 동작에는 여전히 많은 차이가 있습니다. 이 문제를 해결하는 가장 좋은 방법은 CSS 재설정 파일을 사용하여 모든 요소의 기본 스타일을 재설정하는 것입니다. 이를 통해 순수한 스타일 환경에서 작업하고 모든 브라우저에서 동일한 결과를 생성할 수 있습니다.

normalize.css, minireset, ress 등 이 작업을 매우 잘 수행하여 브라우저 간의 불일치를 수정하는 라이브러리가 많이 있습니다. 라이브러리를 사용하고 싶지 않다면 아래와 같이 간단한 CSS 재설정을 직접 수행할 수도 있습니다.

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

로그인 후 복사

가혹해 보일 수 있지만 기본 여백과 패딩을 제거하면 추가 공간을 차지할 걱정 없이 요소를 배치하기가 더 쉬워집니다. box-sizing: border-box는 아래에서 소개할 매우 유용한 속성입니다.

04. 모든 요소에 테두리 상자를 사용하세요.

많은 초보자들이 상자 크기 속성을 모르지만 정말 중요합니다. 이를 이해하는 가장 좋은 방법은 두 가지 선택적 값을 살펴보는 것입니다.

content-box(기본값) - 요소의 너비와 높이를 설정했지만 이는 콘텐츠의 크기일 뿐입니다. 모든 패딩과 테두리는 콘텐츠 내부, 즉 콘텐츠 외부에 포함되지 않습니다.

예를 들어 너비가 100px이고 패딩이 10px인 p가 있는 경우 실제 너비는 120px입니다.

border-box - 패딩과 테두리가 너비와 높이에 포함됩니다. p의 너비가 100px이고 box-sizing: border-box가 설정된 경우 추가한 패딩과 테두리의 양에 관계없이 너비는 항상 100px입니다.

모든 요소에 테두리 상자를 설정하면 스타일링에 도움이 되며 지루한 계산을 할 필요가 없습니다.

05. 이미지를 배경으로 사이트에 이미지를 추가할 때, 특히 반응형 디자인을 원할 경우 요소를 사용하는 대신 p 태그를 사용하고 배경 속성을 설정하세요.

추가 작업이 별 차이가 없는 것처럼 보일 수도 있지만 실제로는 이미지의 스타일을 원본 크기를 유지하거나 비율에 따라 변경하는 것이 더 쉽습니다. 이를 위해서는 배경 크기, 배경의 도움이 필요합니다. 크기 및 기타 몇 가지 속성.

 <section>
        <p>Img element</p>
        <img src="" alt="bicycle">
    </section>
    <section>
        <p>p with background image</p>
        <p></p>
    </section>
    img {
        width: 300px;
        height: 200px;
    }
    p {
        width: 300px;
        height: 200px;
        background: url('');
        background-position: center center;
        background-size: cover;
    }
    section{
        float: left;
        margin: 15px;
    }

로그인 후 복사

이 기술의 한 가지 단점은 스크린 리더와 엔진에서 이미지가 제대로 크롤링되지 않기 때문에 페이지 접근성이 약간 저하될 수 있다는 것입니다. 이 문제는 object-fit으로 해결할 수 있지만 모든 브라우저에서 지원되는 것은 아닙니다.

06. 더 나은 테이블 테두리

HTML의 테이블은 흥미롭지 않습니다. 매우 기발하고 반응성이 뛰어나도록 디자인하기가 어렵고 전체적인 스타일에 맞추기도 어렵습니다. 예를 들어, 테이블과 그 안의 요소에 위쪽 테두리를 추가하려는 경우 다음과 같은 결과를 얻을 수 있습니다.

正如你所见到的，它有很多重复的边框而且看起来不是很好，有一个非常快速且简单的去除双边框的方法，就是将 border-collapse: collapse 添加到 table.

这样看起来就好多了。

07、更好的注释方式

CSS 可能不是一门编程语言但它的代码仍然需要被记录，所以一些简单的注释将会对你的同事或者未来的自己很有帮助！

对于 CSS 中的一些比较大的模块，比如主要模块或者媒体查询，使用风格化的注释并且在其后留下一些空行。

    /*---------------
        #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;  
    }

로그인 후 복사

08、命名连接

当 class 或者 id 不止一个单词的时候，需要使用 - 符号连接， CSS 对大小写不敏感，所以骆驼命名法不是一个好的选择。很久以前，下划线不被支持所以破折号成为了默认约定。

 /*  Do     */
    .footer-column-left { }
    /*  Don't  */
    .footerColumnLeft { }
    .footer_column_left { }

로그인 후 복사

09、不要重复设置

CSS 的许多属性值都是从 DOM 树中的上一级继承下来的，因此命名为层叠样式表。让我们以 font 为例 - 它几乎总是继承自父节点，你不需要为页面中的每一个元素设置该属性。

你只需要为或者设置 font 样式，然后让它一级一级流传下去就可以了。下面是一个很好的例子。

html {
        font: normal 16px/1.4 sans-serif;
    }

로그인 후 복사

当然，在任何一个子元素中你都可以按照自己的需求改变这一样式。我要说的就是能使用继承获得的属性就不要再去一一指定了。

10、CSS 动画与变换

不要通过直接更改元素的宽度和高度去动画元素，或者是更改 left/right/top/bottom。最好的办法是使用 transform() 属性因为它提供了更加圆滑的过渡效果而且可以让你的意图在阅读代码时更加易于理解。

下面是一个例子，我们想动画一个 ball，让它往右滑动。不要去改变 left 的值，最好是使用 translateX() 。

 .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 等）拥有几乎一致的浏览器兼容性，你可以自由使用它们。

11、不要 DIY, 使用库

CSS 社区非常的庞大而且不断出现新的库。库被提供于各种用途，从小片段到完善的框架，用于构建响应式程序，而且它们当中大部分都是开源的。

所以下次当你碰到 CSS 问题的时候，在你想自己动手去解决问题的时候，最好先去 Github 或者 CodePen 找找是否已经存在可用的解决方案。

12、保持选择器的特指度低

不是所有 CSS 选择器都是生而相等的，当新手开发者书写 CSS 代码的时候通常期望它们写的选择器能够覆盖之前所有已存在的样式。但是事情并不总像我们想的那样，就像下面这个例子：

a{
        color: #fff;
        padding: 15px;
    }
    a#blue-btn {
        background-color: blue;
    }
    a.active {
        background-color: red;
    }

로그인 후 복사

我们想为所有按钮添加 .active 类使其变为红色，但这是不起作用的，因为按钮已经被一个 id 选择器设置了 background-color，而 id 选择器具有更高的特指度。它们之间的规则就像下面这样：

ID (#id) > Class (.class) > Type (比如 header)。

特指度是可以堆叠的，所以 a#button.active 的特指度是高于 a#button 的。使用特指度高的选择器将使你不断的使用更高的去覆盖那些原本存在的选择器，这将最终导致 !important 效果。

13、不要使用 !important

很认真的告诉你，不要使用 !important。即时的一个快速修复在将来可能导致大量的重写。相反，找出你 CSS 选择器不工作的原因，并且尝试去修复它。

只有在一种情景中使用 !important 是可以接受的，那就是你想覆盖那些在 HTML 中定义的行内样式。而且书写行内样式也是一种非常糟糕的方式，建议停止使用。

14、使用 text-transform

在 HTML 中，当你使用大写字母的时候可能是出于某种语义目的，比如说你想强调一个单词的重要性。

 <h3>Employees MUST wear a helmet!</h3>

로그인 후 복사

如果出于某种目的你将一组文本都设置成大写，可以在 HTML 中正常书写文本，然后利用 CSS 转换其大小写。它们看起来都是一样的，但是如果不在上下文中，你的内容将更有意义。

<p class="movie-poster">Star Wars: The Force Awakens</p>
    .movie-poster { text-transform: uppercase;}

로그인 후 복사

这同样适用于大写或者小写的字符串 - text-transform 属性可以将它们处理的很好。

15、Em， Rem 和 Pixel

人们在对元素和文本设置尺寸应该用 em，rem 还是 px 有很多的争论。事实是，这三者都是可行的，有自己的优点和缺点。

所有的开发者和项目都是不同的，所以不应该有什么严格的规则说明什么时候该用哪一种。下面是一些提示和良好的做法：

em - 1 em 的大小与直接父元素的字体大小有关。通常用于媒体查询，em 对响应式设计而言是非常棒的，但是将每个元素的 em 值转换为 px 的比例是非常难以计算的，因为你可能要在 DOM 树上逐级跟踪元素。

rem - 以元素中的 font-size 为基准， rem 将比例化页面中的标题和段落变得很容易。保持中默认的 font-size 并且为其它的元素设置 rem 是一种非常棒的方法。

px - 像素是最精确的控制方式，但是在响应式设计中它并不友好，因为它不会随屏幕大小变化而自动缩放。它们是可靠的，易于理解的，并且在值和实际结果之间呈现出良好的视觉联系。

下面我要说的是，不要害怕尝试。去使用它们并且找出哪一种是你最喜欢的。有时候 em 和 rem 很省事，尤其对于响应式界面。

16、在大项目中使用预处理器

你可能已经听说过它们了 - Sass, Less, PostCSS, Stylus 。预处理器是 CSS 发展的下一阶段。它们提供的功能诸如变量， CSS 函数，选择器嵌套以及其它一些非常酷的东西。这使得 CSS 代码非常易于管理，尤其在大项目中。

举个简单的例子，下面是使用了 CSS 变量和函数的 Sass 代码片段。

$accent-color: #2196F3;
    a {
        padding: 10px 15px;
        background-color: $accent-color;
    }
    a:hover {
        background-color: darken($accent-color,10%);
    }

로그인 후 복사

使用 CSS 预处理器的唯一缺点是，它们需要编译成真正的 CSS 代码，但是如果你已经决定在你的项目中使用一个构建脚本，那么这就不再是你应该烦恼的问题了。

17、Autoprefixers

为各个浏览器添加前缀算得上是书写 CSS 代码最恼人的问题了。它们不一致，你永远无法精确的你需要哪一个，而且如果你真的去一个个适配并将它们都放到样式表中，你会发现这是一场噩梦。

感谢上天，有很多工具可以自动的帮你实现这一过程，甚至可以让你指定你需要支持的浏览器：

在线工具： Autoprefixer 文本编辑器插件 - Sublime Text, Atom 库 - Autoprefixer

18、在项目中使用精简代码

为了提高网站或app的页面加载速度我们需要总是使用精简代码 . 代码的精简版本会移除掉空白和重复的部分,这样会削减文件的大小. 当然,这样的话你的 CSS 代码将会变得非常难以阅读,所以最好总是提供一个 .min 的精简版本和一个常规的发展版本.

有很多不同的方法去精简 CSS 代码 :

在线工具 - CSS Minifier, CSS Compressor 文本编辑插件 - Sublime Text, Atom 库 - Minfiy , CSSO 和 CSSNano

작업 흐름에 따라 위 옵션 중 하나를 선택할 수 있지만 항상 어떤 방식으로든 이 프로세스를 자동화하는 것이 좋습니다.

19. 사용할 수 있나요?

다른 브라우저에는 여전히 일관성 없는 호환성 문제가 많이 있습니다. caniuse 또는 기타 유사한 서비스를 사용하여 사용 중인 속성이 널리 지원되는지 여부 또는 접두사를 추가해야 하는지 여부를 확인하세요. 특정 플랫폼에서는 버그가 나타납니다.

아직 부족한지 감지하는 것만으로도 사용자가 자주 사용하는 브라우저를 완전히 이해하는 것도 큰 도움이 됩니다.

20. 유효성 검사

CSS 코드 유효성 검사는 HTML 또는 JavaScript 코드 유효성 검사만큼 중요하지 않을 수 있지만 CSS 유효성 검사기에서 코드를 실행하는 것은 여전히 도움이 될 수 있습니다. 작성된 오류나 잘못된 코드가 있는지 여부를 묻는 메시지를 표시하고 코드 개선에 도움이 되는 몇 가지 적절한 제안도 제공합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!