CSS 작성을 위한 몇 가지 팁

Javascripty는 엔지니어링의 길을 떠났습니다. 다양한 mvm 및 mvvm 프레임워크가 어지러워졌습니다. 여기서는 js에 대해 논의하지 않겠습니다. 실제 작업에서 CSS를 작성했던 경험을 이야기해 보겠습니다. 물론 많은 사람들이 이 경험을 요약했습니다. 제가 말하는 내용은 확실히 전문가가 작성한 내용만큼 좋지 않습니다. 업무 경험을 모두와 공유하세요.

일을 잘하려면 먼저 도구를 갈고닦아야 한다

CSS를 작성할 때 적어도 하나의 개발 도구를 마스터해야 하고, SASS인지 여부는 여전히 LESS입니다. 본질적으로 동일하지만 구문이 약간 다릅니다. 아직도 CSS를 손으로 작성하고 계시다면, 가능한 빨리 CSS를 익히시고, 자신의 습관에 따라 하나를 선택하여 사용하시기 바랍니다. 개인적으로 나는 내 글쓰기 습관에 더 가까운 sass를 선호합니다. Less를 좋아하는 사람들도 많습니다. 그들은 구문이 적을수록 더 편리하다고 생각합니다.

SASS/LESS

SASS(LESS)는 CSS3의 확장으로 규칙 중첩, 변수, 믹스인, 선택기 상속 등이 추가되었습니다. 명령줄 도구나 웹 프레임워크 플러그인을 사용하여 표준의 올바른 형식의 CSS 코드로 변환하세요.

SASS/LESS가 필요한 이유

개발 도구로서 SASS/LESS는 다양한 편리한 작성 방법을 제공하여 디자이너의 시간을 크게 절약하고 CSS 개발을 더 쉽게 만듭니다. 유지 관리 가능.
또한 유지 관리가 가능한 모듈식 CSS 작성의 초석이기도 합니다.

사용 방법

SASS/LESS에 대한 튜토리얼은 인터넷에 많이 있으므로 여기서는 기본 구문에 대해 쓰느라 공간을 낭비하지 않겠습니다.
직접 온라인으로 검색해도 됩니다. 하나쯤 익히면 기본적으로 사용할 수 있습니다.

다음 내용은 SASS에만 국한되지 않습니다. , LESS도 적용 가능합니다!

명명 규칙이 필요한 이유는 무엇입니까?

많은 CSS를 작성했을 때 효과적인 명명 규칙이 없으면 비참하다는 것을 알게 될 것입니다. 이러한 느낌은 특히 조금 더 큰 프로젝트를 진행하거나 다른 사람들과 협력하여 개발하는 과정에서 더욱 두드러집니다. CSS에 이름을 지정하면 해당 이름이 다른 곳에서 사용되고 있거나 팀원이 이미 사용한 적이 있으므로 이름을 바꿔야 하기 때문입니다. 시간이 지날수록 CSS의 네이밍은 지저분해지고, 냄새가 나고, 길어질 것이며, 한 눈에 네이밍의 의미를 추측하는 것은 불가능합니다.

BEM 명명 표준

각종 명명 표준이 다르고, 현명한 사람마다 의견이 다릅니다. 여기서 소개하는 BEM 명명 표준은 적합하지 않을 수 있습니다. , 어떤 명명 규칙이 자신에게 적합한지 생각해야 합니다. .

BEM은 CSS/Sass 모듈을 더 잘 생성하는 것을 목표로 Yandex 팀이 제안한 CSS 클래스 명명 방법입니다.

BEM은 블록, 요소, 수정자를 의미합니다.

●block: 영역, 구성 요소 또는 블록 수준 요소로 이해될 수 있으며, 실제 상황을 기반으로 구체적인 구분을 분석해야 합니다. 위 블록의 요소. 예를 들어 탐색(nav: 블록)에 a 태그(a: 요소)가 있으면 요소입니다. ●block__element–modifier: 제가 이해한 것은 상태 또는 속성입니다. 예를 들어 요소의 a 태그에는 활성, 호버 및 정상의 세 가지 상태가 있습니다. midifier는 두 개의 "-" 대시로 연결됩니다.

위에서 언급한 예에서는 실제 코드를 사용하여 설명합니다.

<!-- HTML结构 --><nav class="nav">
  <a href="#" class="nav__item nav__item--active">当前页：active</a>
  <a href="#" class="nav__item nav__item--hover">假设鼠标在这里要加个hover的class</a>
  <a href="#" class="nav__item nav__item--normal">假设需要加个normar的状态</a></nav>

// SASS写法.nav{
  &__item{
    &--active{
      <!-- active样式 -->
    }
    &--hover{
      <!-- hover样式 -->
    }
    &--normal{
      <!-- normal样式 -->
    }
  }}

/* 编译后的css */
.nav{ }
.nav__item{ }
.nav__item--active{ }
.nav__item--hover{ }
.nav__item--normal{ }

위 예에서 CSS를 한 번에 볼 수 있습니다. 시선이란 의미이며, 컴파일된 CSS에는 중첩이 없지만 SASS의 구조는 매우 명확하여 한눈에 알 수 있습니다.

SASS와 BEM을 사용하면 읽기 쉽고 유지 관리가 가능한 모듈식 코드를 작성할 수 있음을 알 수 있습니다.

하나님이 말씀하셨습니다. 나는 당신을 모른다

읽을 수 있는 SASS에는 설명이 있어야 합니다.

SASS 파일의 경우 이 SASS가 공개인지 비공개인지, 어느 페이지와 어느 부분인지 최소한 두 가지 사항을 설명해야 합니다.

@charset "utf-8"/** 预定义函数* author：xxx* time:xxxx-xx-xx*//** 清除浮动* use: @include clearfix();* author: xxx* time: xxxx-xx-xx*/@mixin clearfix(){
  *zoom: 1;
  &:before,
  &:after {
      content: "";
      display: table;
  }
  &:after {
      clear: both;
      overflow: hidden;
  }}

하나님께서 세상은 통합

●reset

인터넷에 CSS 재설정 코드가 많이 있습니다. Compass에도 재설정 모듈이 있습니다. /다시 놓기". 이러한 코드가 너무 중복된다고 생각되면 적어도 CSS에 여백 및 패딩 재설정이 있는지 확인하여 CSS가 각 브라우저에서 동일한 스타일을 갖도록 해야 합니다.

세어

●간격/행간/여백●글꼴 크기

●색상

●수준

●높이

...

변수가 필요한 이유

별도의 변수를 사용하면 많은 이점이 있지만 가장 큰 것은 유지 관리 용이성입니다. , 누가 그것을 사용하는지 누가 알겠습니까!

유지관리성

●개발이 끝나면 디자이너에게 가져가서 승인을 받으세요. 디자이너가 이게 좋지 않다고 하니 색상을 바꿔보세요! ——괜찮습니다. 변수를 바꾸겠습니다!

●产品说，这里不好，列表间距太大了，小屏幕只显示那么一点点！—— 没事，我改个变量！

●来来来，产品说我们换一套皮肤！ —— 没事，我重新定义一份变量！

……

这些例子可以让你明白有一份variables是多么重要了吧。其实这些只是在可维护方面的好处。作为一名前端，我们是最接近用户的工程师，我们不能仅仅停留在代码层面，更需要的是站在用户体验的角度思考问题，而variables可以让我们有一套规范，确保页面一致性

一致性

FE是面向用户的，我们需要对用户负责。设计师在设计页面的时候，不能所有的像素的都很精确，不可能每次的颜色都是毫无差错的。所以在这时候，就需要规范了，如果设计师没有规范，那我们自己制定一套规范。例如：

●同一个项目，一个页面的列表高度是20px,另一个页面的列表是21px，这时我们无需理会，直接使用我们之前定义的列表高度进行开发。

●同一个页面，有两个error的颜色#dc4c4c和#d84a4a，我们也无需理会，使用统一的error颜色变量；

这些是用户体验的细节，通过一份variables可以让我们保持页面的一致性。
这里只是略微提下用户体验，之后我再写一篇《前端工程师必须重视的用户体验》来详细讲解下用户体验。

module（模块化，基于SASS/LESS）

模块化在js中经常听到，对于css来说，模块化对于易读性和可维护性同样重要。那么如何来做模块化呢？

多文件夹

建立多个文件夹，分类存放sass文件。例如：将variables、mixin、公共样式、私有样式分成多个文件夹存放；

多文件

同一个文件夹的sass可以按模块、功能等等分成多个文件，最终用@import 导入

这样说的有点粗糙，我举个例子吧(下划线开头的sass文件不会编译单独css文件)

——sass
  ——config                //基本变量
  ——mixin                 //函数
  ——common                //公用
    ——header
    ——aside
      ——_list.scss
      ——_nav.scss
      ——_base.scss
  ——compoment             //组件样式
    ——dropdown
    ——lightbox
  ——page
    ——index               //首页
      ——_ad.scss           //广告样式
      ——_content.scss      //内容信息
      ——_info.scss         //个人信息样式
      ——_base.scss         //index样式，@import 'ad';@import 'content';@import 'info';
    ——write               
    ——preview        
      ——_aside.scss       //preview页面独有侧边栏
    ——about
  ——main.scss             //导入所需要的样式，最终生成一个main.css

如上面所示的目录结构，能让人一目了然sass的目录的结构，维护的时候可以快速准确的找到文件。
如果是多页面的项目，也可以最大限度复用代码，而且可以导出公用样式，利用缓存提高加载速度，不用每个页面都重复写一样的代码。

注意：common文件夹的公共样式必须是其他页面所共有的样式，如果有些页面有特殊的样式，应该将会覆盖的css抽取出来，在页面中分别导入不同的私有样式。

根据命名规则限定使用样式

比如说preview页面有一个私有aside样式，可以在这样写preview里面的_aside.scss：

@charset "utf-8"/** 预览页面侧边栏* author：xxx* time:xxxx-xx-xx*/@import '../../common/aside/base'.preview{
  .aside{
    /* css */
    &__item{
      /* css */
    }
  }}

这里需要注意的是，css覆盖会导致重新渲染，影响性能。