CSSを書くためのヒント

JavaScript はエンジニアリングの道を歩み始めました。さまざまな mvm および mvvm フレームワークが目まぐるしくなりました。ここでは js については説明しません。実際の仕事で CSS を書いた私の経験をいくつか話しましょう。もちろん、私が話していることは、単に私の作品を紹介しているだけのものよりも優れているわけではありません。体験して比較して、みんなで共有しましょう。

仕事をうまくやり遂げたいなら、まずツールを磨く必要があります

CSSを書くときは、SASSであろうとLESSであろうと、本質的には同じですが、少なくとも1つの開発ツールをマスターする必要があります。構文は少し異なりますが同じです。まだ CSS を手書きで書いている方は、できるだけ早く CSS について学び、自分の習慣に合わせて CSS を選択して使用してください。個人的には、sass の方が私の執筆習慣により合っています。 Less を好む人も多く、less 構文の方が便利だと考えています。

SASS/LESSとは

SASS (LESS) はCSS3の拡張機能であり、ルールのネスト、変数、ミックスイン、セレクターの継承などが追加されています。コマンド ライン ツールまたは WEB フレームワーク プラグインを使用して、標準の整形式の CSS コードに変換します。

SASS/LESS が必要な理由

開発ツールとして、SASS/LESS は多くの便利な記述方法を提供するため、デザイナーの時間を大幅に節約し、CSS 開発をシンプルで保守しやすくします。
これらは、モジュール式で保守可能な CSS を作成するための基礎でもあります。

使い方

SASS/LESS に関するチュートリアルはインターネット上にたくさんありますので、ここでは基本的な構文について書くことにスペースを無駄にはしません。
オンラインで自分で検索することもできます。一度学習すれば、基本的には使用できます。

以下の内容は SASS に限定されず、LESS も適用できます。

神は言った、ルールのないルールはない

はい、ルールのないルールはありません。CSS の命名基準を理解するか、独自の基準を作成する必要があります (カスタマイズはお勧めできません。チームワークに役立ちません)。 ;

命名規則が必要なのはなぜですか?

大量の CSS を作成すると、効果的な命名規則がないと悲惨な結果になることに気づくでしょう。この感覚は、少し大規模なプロジェクトに取り組んでいる場合や、他のユーザーと共同で開発を進めている場合に特に顕著です。 CSS に名前を付けると、その名前が他の場所で使用されているか、チームメイトがすでに使用していることがわかり、名前を変更する必要があるからです。時間が経つと、CSS の名前付けは乱雑で臭くて長くなり、一目見ただけでは名前の意味を推測できなくなります。

BEM 命名基準

さまざまな命名基準があり、賢明な人によってさまざまな意見があります。ここで紹介する BEM 命名基準は、どの命名基準が適切であるかについて考える必要があります。あなたに適した。 。

BEM は、CSS/Sass モジュールをより適切に作成することを目的として、Yandex チームによって提案された CSS クラスの命名方法です。

BEMとは、ブロック、要素、修飾子を意味します。

●block: 領域、コンポーネント、またはブロックレベルの要素として理解できます。実際の状況に基づいて区別する必要があります。

●block__element: 上記のブロック内の要素です。ナビゲーション (nav: block ) には、要素である a タグ (a: 要素) が含まれています。

●block__element–modifier: 私の理解では、ステータスまたは属性です。たとえば、要素内の a タグには、アクティブ、ホバー、通常の 3 つの状態があります。これらの 3 つの状態は修飾子です。 Midifier は 2 つの「-」ダッシュで接続されています

上記の例では、実際のコードを使用して説明します。

<!-- 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が公開か非公開か、どのページのどの部分かを少なくとも2点説明する必要があります

@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;
  }}

世界は統一しなければならないと神は言った

●リセット

cssリセットは必須です。インターネット上には CSS リセット コードがたくさんあります。compass にもリセット モジュールがあります。「compass/reset」を @import するだけです。これらのコードが冗長すぎると思われる場合は、CSS が各ブラウザーで同じスタイルになるように、少なくとも CSS にマージンとパディングがリセットされていることを確認する必要があります。

*{
  margin: 0;
  padding: 0;}

●間隔/行間/余白

●フォントサイズ

●色

●高さ

…

別の変数を使用するメリットがありますたくさんありますが、最大の特徴は、それを使用する人なら誰でもわかるでしょう。

●開発が終わったら、デザイナーに持って行って承認してもらいます。デザイナーはこれではダメだから色を変えてください！ ——大丈夫、変数を変えます！

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

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

……

这些例子可以让你明白有一份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覆盖会导致重新渲染，影响性能。