집 > 기사 > 웹 프론트엔드 > CSS 및 Sass(SCSS) 개발 지침

CSS 및 Sass(SCSS) 개발 지침

高洛峰원래의: 2017-02-28 13:46:021910검색

이 글에서는 주로 프론트엔드 코딩 사양(4) - CSS와 Sass(SCSS) 개발 사양을 소개합니다. 필요한 친구들은 참고하시면 됩니다.

ID 및 클래스 네이밍

항상 요소의 목적과 용도를 반영하는 ID 및 클래스 이름이나 기타 일반적인 이름을 사용하세요. 외모와 모호한 이름 대신.

가장 이해하기 쉽고 변경될 가능성이 가장 적기 때문에 구체적이고 요소의 목적을 반영하는 이름을 선호해야 합니다.

일반 이름은 여러 요소의 대체 이름일 뿐이며 형제 요소와 동일하며 특별한 의미가 없습니다.
특별한 의미를 가지며 일반적으로 "도우미"로 필요하도록 구별하세요.

클래스 이름과 ID의 의미 체계는 컴퓨터 구문 분석에 실질적인 의미가 없지만
의미 체계 이름이 나타내는 정보에는 성능 제한이 없으므로 일반적으로 올바른 선택입니다.

추천하지 않음

으르렁

추천함

으르르

합리적인 ID 회피

일반적으로 ID는 스타일에 적용하면 안 됩니다.
ID 스타일은 재사용할 수 없으며 ID는 페이지당 한 번만 사용할 수 있습니다.
ID의 유일한 효과적인 사용은 웹페이지 또는 전체 사이트 내에서 위치를 결정하는 것입니다.
그럼에도 불구하고, 한 번만 사용하지 않는 한 항상 id 대신 클래스 사용을 고려해야 합니다.

권장하지 않음

.fw-800 {
  font-weight: 800;
}
 
.red {
  color: red;
}

권장

.heavy {
  font-weight: 800;
}
 
.important {
  color: red;
}

또 다른 이의 ID를 사용하는 이유는 해당 ID가 포함된 선택자의 가중치가 높다는 것입니다.
단 하나의 ID만 포함하는 선택자는 1000개의 클래스 이름을 포함하는 선택자보다 가중치가 더 높기 때문에 이상합니다.

#content .title {
  font-size: 2em;
}

CSS 선택기에서 태그 이름을 피하세요

선택기 구성 시 명확하고 정확하며 유익한 정보를 사용해야 합니다. 의미 클래스 이름. 태그 선택기를 사용하지 마세요. 코드 요소가 아닌 클래스 이름
에만 관심이 있다면 유지 관리가 더 쉽습니다.

분리 관점에서 볼 때 html 태그/의미는 프리젠테이션 레이어에 할당되어서는 안 됩니다.
순서가 없는 목록으로 변경해야 하는 순서가 있는 목록일 수도 있고, 기사로 변환될 p일 수도 있습니다.
의미 있는 클래스 이름만 사용하고
요소 선택기를 사용하지 않는 경우에는 CSS가 아닌 html 마크업만 변경하면 됩니다.

추천하지 않음

으르렁

추천함

으르르

최대한 정확하게 작성하세요

많은 프런트 엔드 개발자는 선택기 체인을 작성할 때 직접 하위 선택기를 사용하지 않습니다(참고: 직접 하위 선택기와 하위 선택기의 차이점).
때로는 이로 인해 고통스러운 디자인 문제가 발생할 수 있으며 때로는 성능이 소모될 수도 있습니다.
그러나 이는 어떤 경우에도 매우 나쁜 습관입니다.
DOM의 끝과 일치해야 하는 매우 일반적인 선택기를 작성하지 않는 경우 항상 직접 하위 선택기를 고려해야 합니다.

다음 DOM을 고려하세요.

.content .title {
  font-size: 2em;
}

다음 CSS는 제목 클래스가 있는 세 요소 모두에 적용됩니다.
그런 다음 콘텐츠 클래스의 제목 클래스와 티저 클래스의 제목 클래스에서 다양한 스타일을 해결하려면 더 정확한 선택자가 스타일을 다시 작성해야 합니다.

추천하지 않음

으르렁

추천함

으르르

약어 속성

CSS는 하나의 값만 설정된 경우에도 가능할 때마다 사용해야 하는 다양한 약어 속성(예: 글꼴)을 제공합니다.

축약된 속성을 사용하는 것은 코드 효율성과 가독성에 매우 유용합니다.

권장하지 않음

css 코드:

// 这个选择器权重高于下面的选择器
#content .title {
  color: red;
}
 
// than this selector!
html body p.content.news-content .title.content-title.important {
  color: blue;
}

권장

css 코드:

p.content > header.content-header > h2.title {
  font-size: 2em;
}

0 및 단위

'0' 값 뒤의 단위는 생략합니다. 값이 없는 한 0 값 이후에는 단위를 사용하지 마십시오.
권장하지 않음

css 코드:

.content > .content-header > .title {
  font-size: 2em;
}

권장

css 코드:

<article class="content news-content">
  <span class="title">News event</span>
  <p class="content-body">
    <p class="title content-title">
      Check this out
    </p>
 
    <p>This is a news article content</p>
 
    <p class="teaser">
      <p class="title">Buy this</p>
      <p class="teaser-content">Yey!</p>
    </p>
  </p>
</article>

16진수 표기

가능하면 3자리 16진수 표기를 사용하세요.
색상 값은 이 표현을 허용합니다.
더 짧은 3자리 16진수 표현입니다.

항상 소문자 16진수를 사용하세요.

추천하지 않음

으르렁

추천함

으르르

ID 및 클래스 이름 구분 기호

는 하이픈(점선)을 사용하여 ID 및 클래스 이름의 단어를 구분합니다. 강의 이해도를 높이기 위해 선택기에서 단어와 약어를 연결하는 데 하이픈(대시) 이외의 문자(없음 포함)를 사용하지 마십시오.

또한 표준에 따라 기본 속성 선택기는 하이픈(대시)을 단어 [속성|=값]의 구분 기호로 인식하므로
하이픈을 구분 기호로 사용하는 것이 가장 좋습니다.

권장하지 않음

.content .title {
  font-size: 2rem;
}

권장

.content > .title {
  font-size: 2rem;
}
 
.content > .content-body > .title {
  font-size: 1.5rem;
}
 
.content > .content-body > .teaser > .title {
  font-size: 1.2rem;
}

해킹

避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜，变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库，这两种方法都应该被认为是最后的手段。换句话说，从长远来看，用户代理检测和hacks
会伤害项目，作为项目往往应该采取阻力最小的途径。也就是说，轻易允许使用用户代理检测和hacks 以后将过于频繁。

声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表现性属性：
background, border etc.
font, text
不推荐

.box {
  font-family: &#39;Arial&#39;, sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

推荐

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: &#39;Arial&#39;, sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

声明结束

为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。

不推荐

css 代码:
.test {
  display: block; height: 100px
}

推荐

css 代码:

.test {
  display: block;
  height: 100px;
}

属性名结束

属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。

不推荐

css 代码:

h3 {
  font-weight:bold;
}

推荐

css 代码:
h3 {
  font-weight: bold;
}

选择器和声明分离

每个选择器和属性声明总是使用新的一行。

不推荐

css 代码:

a:focus, a:active {
  position: relative; top: 1px;
}

推荐

css 代码:

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

规则分隔

规则之间始终有一个空行（双换行符）分隔。

推荐

css 代码:

html {
  background: #fff;
}
 
body {
  margin: auto;
  width: 50%;
}

CSS引号

属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。

不推荐

css 代码:

@import url(&#39;//cdn.com/foundation.css&#39;);
 
html {
  font-family: &#39;open sans&#39;, arial, sans-serif;
}
 
body:after {
  content: &#39;pause&#39;;
}

推荐

css 代码:

@import url(//cdn.com/foundation.css);
 
html {
  font-family: "open sans", arial, sans-serif;
}
 
body:after {
  content: "pause";
}

选择器嵌套 (SCSS)

在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，
可以使用常规的CSS选择器链。
这将防止您的脚本看起来过于复杂。

不推荐

css 代码:

// Not a good example by not making use of nesting at all
.content {
  display: block;
}
 
.content > .news-article > .title {
  font-size: 1.2em;
}

不推荐

css 代码:

// Using nesting is better but not in all cases
// Avoid nesting when there is no attributes and use selector chains instead
.content {
  display: block;
 
  > .news-article {
    > .title {
      font-size: 1.2em;
    }
  }
}

推荐

css 代码:

// This example takes the best approach while nesting but use selector chains where possible
.content {
  display: block;
 
  > .news-article > .title {
    font-size: 1.2em;
  }
}

嵌套中引入空行 (SCSS)

嵌套选择器和CSS属性之间空一行。

不推荐

css 代码:

.content {
  display: block;
  > .news-article {
    background-color: #eee;
    > .title {
      font-size: 1.2em;
    }
    > .article-footnote {
      font-size: 0.8em;
    }
  }
}

推荐

css 代码:

.content {
  display: block;
 
  > .news-article {
    background-color: #eee;
 
    > .title {
      font-size: 1.2em;
    }
 
    > .article-footnote {
      font-size: 0.8em;
    }
  }
}

上下文媒体查询(SCSS)

在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中，你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换，这样的媒体查询将包裹选择器的形式呈现。

这技术非常方便，
有助于保持媒体查询属于的上下文。

第一种方法这可以让你先写你的手机样式，然后在任何你需要的地方
用上下文媒体查询以提供桌面样式。

不推荐

css 代码:

// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
// on the bottom in a media query. This is error prone and makes maintenance harder as it&#39;s not so easy to relate
// the content in the media query to the content in the upper part (mobile style)
 
.content-page {
  font-size: 1.2rem;
 
  > .main {
    background-color: whitesmoke;
 
    > .latest-news {
      padding: 1rem;
 
      > .news-article {
        padding: 1rem;
 
        > .title {
          font-size: 2rem;
        }
      }
    }
 
    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }
 
  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;
  }
}
 
@media screen and (min-width: 641px) {
  .content-page {
    font-size: 1rem;
 
    > .main > .latest-news > .news-article > .title {
      font-size: 3rem;
    }
 
    > .page-footer {
      font-size: 0.8rem;
    }
  }
}

推荐

css 代码:

// This is the same example as above but here we use contextual media queries in order to put the different styles
// for different media into the right context.
 
.content-page {
  font-size: 1.2rem;
 
  @media screen and (min-width: 641px) {
    font-size: 1rem;
  }
 
  > .main {
    background-color: whitesmoke;
 
    > .latest-news {
      padding: 1rem;
 
      > .news-article {
        padding: 1rem;
 
        > .title {
          font-size: 2rem;
 
          @media screen and (min-width: 641px) {
            font-size: 3rem;
          }
        }
      }
    }
 
    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }
 
  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;
 
    @media screen and (min-width: 641px) {
      font-size: 0.8rem;
    }
  }
}

嵌套顺序和父级选择器(SCSS)

当使用Sass的嵌套功能的时候，
重要的是有一个明确的嵌套顺序，
以下内容是一个SCSS块应具有的顺序。

当前选择器的样式属性
父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒体查询
子选择器作为最后的部分
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

css 代码:

.product-teaser {
  // 1. Style attributes
  display: inline-block;
  padding: 1rem;
  background-color: whitesmoke;
  color: grey;
 
  // 2. Pseudo selectors with parent selector
  &:hover {
    color: black;
  }
 
  // 3. Pseudo elements with parent selector
  &:before {
    content: "";
    display: block;
    border-top: 1px solid grey;
  }
 
  &:after {
    content: "";
    display: block;
    border-top: 1px solid grey;
  }
 
  // 4. State classes with parent selector
  &.active {
    background-color: pink;
    color: red;
 
    // 4.2. Pseuso selector in state class selector
    &:hover {
      color: darkred;
    }
  }
 
  // 5. Contextual media queries
  @media screen and (max-width: 640px) {
    display: block;
    font-size: 2em;
  }
 
  // 6. Sub selectors
  > .content > .title {
    font-size: 1.2em;
 
    // 6.5. Contextual media queries in sub selector
    @media screen and (max-width: 640px) {
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
  }
}

更多CSS 和 Sass (SCSS) 开发规范相关文章请关注PHP中文网！

성명：

이전 기사：CSS를 사용하여 화살표가 있는 프로세스 진행 표시줄 구현다음 기사：CSS를 사용하여 화살표가 있는 프로세스 진행 표시줄 구현

CSS 및 Sass(SCSS) 개발 지침

관련 기사