| | | | CSS魔法， 原名张鹏，国内知名CSS技术专家，百姓网前端架构师。拥有近十年的网站开发经验，在移动前端领域积累颇深，自称“披着工程师外衣的设计师”。他是CMUI、Action、GHX等开源项目的作者，曾为GitHub、Gulp、Stylus等网站和项目翻译过大量文档；其生动活泼、循序渐进的博客写作风格深受读者喜爱，在CSS Conf等技术会议上的演讲广受好评。 | CSS Magic (旧名 Zhang Peng) は、中国で有名な CSS 技術専門家であり、フロントエンド アーキテクトです。 Baixing.com の。彼は Web サイト開発に 10 年近くの経験があり、モバイル フロントエンド分野で豊富な経験を持っています。彼は自分自身を「エンジニアの装いをしたデザイナー」と呼んでいます。彼は CMUI、Action、GHX などのオープンソース プロジェクトの作成者であり、GitHub、Gulp、Stylus などの Web サイトやプロジェクトの多数のドキュメントを翻訳してきました。ブログの書き方は読者に深く愛されており、CSS Conf などの技術カンファレンスにも参加し、その講演は好評を博しました。 |
チューリングインタビューは、「マジックブラザー」を独占インタビューに招待することができてとても幸運です。あなたが中国で有名な CSS 専門家であることは誰もが知っています。別名として「CSS Magic」を使用する理由はどのような「CSS コンプレックス」ですか?
皆さん、こんにちは。チューリングからインタビューを受けることができて光栄です。私の名前は「CSS Magic」、親しい友人からは「Brother Magic」と呼ばれています。 この質問は良い質問で、すぐに 8 年前、つまりフロントエンドの知識を体系的に学び始めた頃のことを思い出します。フロントエンドの仕事を見つけるために、市販されている CSS の本を片っ端から買ってむさぼり読み、CSS の基礎知識を短期間で体系的に習得しました。
この本の山の中に、「Eric Meyer Talks CSS」という 2 巻セットのチュートリアルがあります (Turing によって紹介されました)。この本の中に次の一節があることをはっきりと覚えています。「意味構造を準備した後、それに少し CSS マジックを追加します...」 この文は CSS が私にもたらした経験とまさに一致していると感じました。
私は CSS テクノロジーがとても好きです。CSS テクノロジーはエレガントで魔法に満ちており、ほんの数行のコードでまったく新しい Web ページを作成できます。それでそれ以来、私はオンライン名「CSS Magic」を使い始めました。彼はこの名前で Weibo を登録し、その後、フロントエンド分野での学習経験を共有するために「CSS Magic」という WeChat 公開アカウントを作成しました。チューリングのために書籍「CSS Revealed」を翻訳したとき、彼は当然これをペンネームとして使用しました。 。
Eric Meyer といえば、「The Definitive Guide to CSS」の著者でもあり、私のアイドルでもあります。アイドルから名前を得るのは名誉なことですが、チューリングの貢献もその一部であり、これもまた運命です。 Baixin.comでの仕事内容を簡単に紹介してください！
私は現在、Baixin.com でモバイル Web サイトのフロントエンド アーキテクトとして働いています。恥ずかしいのは、「フロントエンド アーキテクト」という肩書きが「フロントエンドに本当にアーキテクチャが必要なのか？」という疑問を持たれることが多いため、この機会に私がフロントエンド アーキテクチャについてどのようなものだと理解しているのかについても説明します。
実際、フロントエンドであろうとバックエンドであろうと、本格的で長期にわたる大規模なプロジェクトには、誰かがアーキテクチャを設計する必要があります。
Baixing.com のフロントエンド アーキテクチャの目標は非常に明確です。ビジネス規模が拡大し、チームが成長するにつれて、Web サイト全体の複雑さも急速に増大します。ビジネス エンジニアが効率的かつ高品質になるようにする 開発タスクを完了することは、フロントエンド アーキテクトの責任であり、課題です。
簡単にまとめると、Baixing.com で私が行ったフロントエンド アーキテクチャの仕事には以下が含まれます:
- ツール ライブラリと UI フレームワークの作成、ビジネス開発効率を向上させるためのドキュメントの提供
- 開発プロセスを最適化し、ビジネスエンジニアの開発経験を向上させる
- さまざまな開発仕様を策定し、仕様を確実に実装するためのツールを使用する
- 新しいテクノロジーと新しいツールを研究する、タイムリーに申請および宣伝します
- 定期的な技術交流会と不定期の技術共有を開催します
- ...
「魔法の兄弟」だそうです。開発プロセスと計画フレームワークを完全に把握して仕様を作成する必要があります。まだコードを記述する必要がありますか?
実際、コードのリファクタリングは長年にわたって私の仕事の一部であり、時にはビジネス開発に専念する必要もあります。結局のところ、アーキテクチャ層はビジネス層をしっかりと支えているので、手を抜くことはできません。
習得するにはどのような CSS 知識が必要だと思いますか?
プロの CSS 開発者は、まず CSS2 の核となる知識を完全に習得する必要があります。 『The Definitive Guide to CSS』(第 3 版) を例に挙げると、「サウンド スタイル」を除いて、この本の内容はすべて完全に理解する必要があります。いくつかのあいまいなプロパティの名前と動作を思い出せない場合でも、それらをすぐに検索できる場所を知っておく必要があります。
次に、CSS3 に関して、多くの学生が私に次の質問をしました。「マジック兄弟、今ではすべてのブラウザが CSS3 をサポートしていますが、CSS2 をスキップして CSS3 を直接学習できますか?
この質問に答える前に、まず「CSS3」とは何かを理解する必要があります。 『CSS Revealed』という本を読んだことがある学生なら、「CSS3」が一般名であり、W3C の正式な用語ではないことを十分に理解しているはずです。基本的にはCSS2以降に更新・追加されたCSS仕様モジュールの総称です。
実際には、CSS3 は CSS2 に比べてソフトウェアのバージョン変更のようなアップグレードではありません。 CSS2 の正式名称は「CSS Level 2」です。その後の CSS 仕様は、完全に代替として登場するわけではありません。多くの場合、一部の Level3 CSS 仕様モジュール (または新しい仕様モジュール) は CSS2 に基づいて拡張されています。
したがって、CSS 学習者の場合、CSS3 の新しい内容についてのみ説明したチュートリアルや参考書を購入する場合は、CSS2 の本と併せて読む必要があります。実際、紙面の都合上、「CSS3」を売り物にしている市販の書籍の多くは、CSS2の内容を繰り返し説明していません。これを見ると、上記の疑問はすでに皆さんの心の中に答えられていると思います。
私自身の学習経路は次のとおりです。「CSS Definitive Guide」や「Mastering CSS」などの CSS2 時代の古典的なチュートリアルを通じて CSS2 のしっかりした基礎を築きます (CSS2 は完全に安定しているため)。 、私たちは通常、MDN などのオンライン リソースを利用します (リソースは非常に急速に変化するため)。新入生が複雑な CSS システムを使い始めることができないと感じている場合は、このパスを参照するとよいでしょう。
Turing コミュニティのネチズンは、次のように尋ねました。仕事でよく使用する実用的な CSS テクニックは何ですか?
まず第一に、迷わず CSS プリプロセッサを使用することをお勧めします。 CSSはプログラミング言語ではなく抽象化する機能がないため、Webサイトの規模がある程度大きくなると、ネイティブCSSでは抽象化や再利用の問題を解決することが困難になります。プリプロセッサは、この点における CSS の欠点を補うだけです。
プリプロセッサの独特な構文を学ぶつもりがない場合でも、あるいは少し抵抗がある場合でも、コードを分割して整理するためにプリプロセッサのモジュール メカニズムを使用してみるのもよいでしょう。ほとんどのプリプロセッサは CSS ネイティブ構文と互換性があるため、元のコーディング習慣を維持し、プリプロセッサのモジュール機能のみを使用できます。
複数の人が一緒に作業するチームの場合、コードをモジュールに分割することが特に重要です。プリプロセッサを導入するにはワークフローにビルド ステップを追加する必要がありますが、そのコストは十分に価値があると思います。
次に、私が皆さんと共有したい経験は、CSS コードをうまく「階層化」することです。私が設計する CSS アーキテクチャは通常、「正規化 + リセット → 共通の基本スタイル → UI コンポーネント → ページの共通レイアウト フレームワーク → 単一ページのレイアウトとスタイル」といういくつかのレベルで構成されています。左に行くほど、このアーキテクチャに近づきます。 、右に行くほどビジネスに近くなります。
レベルを定義し、正しいレベルでコードを記述することは、多くの利点をもたらします。チームの分業の観点から、異なるレベルのコードを開発と保守のために異なる人に引き渡すことができます。これは、次のことと同等です。フォーカス分離。アーキテクチャの観点から見ると、「複雑さを制御する」という重要な目的も達成できます。
もう一つは、ツールを上手に活用することです。たとえば、Lint プログラムはコード仕様の実行を保証するために使用され、ツールは反復的な作業を可能な限り自動化するために構築され、Autoprefixer のようなツールはコードの処理または生成に使用されます。ことわざにあるように、ナイフを研ぐことで木材を切る時間を無駄にすることはなくなり、もっと見て、もっと聞いて、もっと試して、広い心で新しい道具を理解して試してみると、多くの場合良い結果が得られます。
このネチズンが「実用的な CSS 機能とは何ですか」と尋ねたいのであれば、少なくとも Flexbox について言及する必要があると思います。これは CSS3 によって導入された、より強力で使いやすいレイアウト方法であり、Flexbox の基本機能をモバイル側で安全に使用できるようになりました。高度なセレクター、グラデーション、アニメーション、その他の高度な機能などの他の機能も非常に価値があり、UI フレームワークを作成するときに実用的です。
さらに、CSS を記述するときに習得する必要がある原則や考え方についても知りたいかもしれません。ここでは、書籍『CSS Revealed』の「CSS コーディング テクニック」セクションをお勧めします。私は長年にわたって蓄積してきた CSS の経験について記事を書きたいと常に思っていましたが、適切な入り口を見つけるのに苦労しており、何かが欠けているのではないかと常に恐れています。そして、このセクションを読んだとき、私はついに安心しました。誰かがすでにこれを私のためにやってくれていたことが分かりました。それから私はそれを自分で翻訳し、それによって私の頭の中の問題が解決されました。
フロントエンド分野のテクノロジーは、まだ十分に理解されていない一方で、別のテクノロジーが普及することがよくあります。どのように選択しますか?
確かに近年、フロントエンドの分野では新しい技術、新しいツール、新しい練習方法が登場しており、気をつけないと時代遅れに感じてしまいます。このような状況に直面すると、誰しもが持つエネルギーには限界があり、疲労感や圧迫感が生じるのは避けられません。
私自身の対処法は、核心をつかんで、習得が難しい技術的な方向、当分必要ではない方向、または自分がやりたいことにとってほとんど価値のない方向はあきらめることです。現時点で。たとえば、途中で、リッチ メディア用の Flash、グラフィックスとゲーム用の Canvas と WebGL、シングル ページ アプリケーション用の MV*、言語用の FP などをやめました。
もちろん、これらの「放棄」は戦略的なものであり、永続的なものではありません。結局のところ、エネルギーには限りがあり、すべてをカバーすることは不可能です。しかし、ある方向が攻略すべき要衝となると、私は迷わず新たな穴に飛び込むことになる。
技術分野での選択に加えて、私は「人」、つまりコードを書く人々のグループにもエネルギーの一部を集中させます。個人のヒーローの時代は永遠に終わりました。一人でどれだけ強力に戦っても、それだけでは十分ではありません。したがって、多くの場合、周囲のパートナーが急速に成長できるよう支援し、完全な階層と補完的なスキルを備えたフロントエンド開発チームを構築することがより現実的です。場合によっては、これが「ボトルネックを突破する」ための解決策になることもあります。チームの友人が新しいテクノロジーを克服するたびに、私は自分を慰めることができます。方法はわかりませんが、それは問題ではありません。できる友人がいるのです。私をサポートしてください！
Turing コミュニティのネチズンは、CSS とその小さな友人である JavaScript の間にはどのような関係があるのかと尋ねました。類似点と相違点は何ですか?
わあ、この質問は完全に面接の質問のようです。では、丁寧に答えて、インタビューを受けたときの気分を味わいましょう。
Web 標準の「分離」原則によれば、Web インターフェイスは構造層、プレゼンテーション層、動作層の 3 つの層で構成されます。これら 3 つは、それぞれ HTML、CSS、および JS によって技術的に実装されます。 「業界には専門分野がある」という言葉があることは誰もが知っていますが、Web にも同様のことが当てはまります。異なるレイヤーは異なるテクノロジーで実装される必要があります。
近年、:hover 疑似クラスの強化や、:checked や :target などの新しい疑似クラスの登場など、CSS の機能が大幅に向上し、 JS でのみ実装できます。これは CSS を使用して実現することもできます。これは、一部のシナリオでは 2 つの機能が重複することを意味します。
ただし、原則として、CSS はレンダリング ツリーを変更する機能のみを持ち、DOM 構造を変更することはできません (「レンダリング ツリー」とは、スタイルを適用した後に DOM ツリーによって生成され、レンダリングに使用されるデータ モデルを指します)ウェブインターフェース）。 CSS は、表示、可視性、不透明度などの属性を通じて要素の可視性を制御できますが、DOM ツリーから要素を削除または移動したり、新しい DOM 要素を作成したりすることはできません。これは CSS 機能の限界です。
この 2 つの機能には重複する部分もありますが、相互に排他的ではありません。 JS と CSS は連携できるので、このパートナーシップを活用してそれぞれの強みを活用する必要があります。たとえば、CSS は宣言的な性質を持っているため、スタイルの管理に関しては理解しやすく、記述と保守が容易です。したがって、特定の動的な効果を実現する場合、CSS のクラスの形式でさまざまな状態のスタイルを記述し、要素のクラスを切り替えることによってスタイルの変化を JS に認識させることができます。
Turing コミュニティのネチズンは次のように尋ねました: CSS は複雑なレイアウトや豪華な視覚効果の処理に優れていることを考えると、Web 開発者は JavaScript をスキップして「UI + バックエンド」ルートを取ることができますか?
簡単に言えば、不可能です。
まず、「UI」の概念について説明します。 UI は静的なレイアウトやスタイルではなく、デザイナーが送信する PSD 画像でもありません。 UI はユーザー インターフェイスであり、その核となるのはインタラクションであり、インタラクションは JS によって実装する必要があります。インタラクションと、インタラクションによって伝えられるユーザー エクスペリエンスが、現在のフロントエンドの中核となる価値観です。
次に、実際の開発シナリオに戻ってこの問題を見てみましょう。チーム戦であれば、もちろんチーム内の個人が集中して選択することができます。テクノロジースタック全体の中で、私が設定した特定のリンクにステップアップできる友人がいる限り、大きな問題はありません。しかし、フロントエンドもバックエンドもやるつもりでキャリアプランを立てるフルスタックエンジニアであれば、JSは避けては通れません。
実際、私はチューリングコミュニティで、質問をしたネチズンとすでにコミュニケーションをとりました。彼が JS を避ける主な理由は、JS を始めたときにインターネット上の質の悪いチュートリアルに惑わされ、JS に対して間違った第一印象を与え、その後抵抗を感じてしまったためです。
このネチズンの経験を聞いて、とても残念に思うと同時に、深くため息をつかずにはいられませんでした。テクノロジーを学ぶときは、標準化された体系的な学習アプローチを選択することが非常に重要です。そこで、マジックブラザーの信頼できる選択であるチューリングのプログラミング本シリーズをもう一度お勧めしたいと思います。
チューリング コミュニティのネチズンは次のように尋ねました: 先人が残したテクニックを自分のプロジェクトに直接適用することに同意しますか? 「何が起こっているのか、なぜそうなのかを知る」という研究精神が必要なのでしょうか？
それはあなたが自分自身をどのように位置づけるかによって異なります。技術職は大きく2つに分けられると思います。最初のタイプの人は、単純にテクノロジー自体に惹かれます。テクノロジー自体には魅力的な美しさがあると誰もが感じていると思います。 2 番目のタイプの人はテクノロジーを手段として使用し、テクノロジーを学ぶ最終的な目標はテクノロジーを通じて何かを促進することです。どちらのタイプの技術者にもそれぞれ合理的な出発点があり、どちらが正しいか間違っているかはありません。
つまり、あなたが最初のタイプの人であれば、あなたの計画とポジショニングは特定の分野の技術専門家でなければなりません。皆さんはすべての貴重なテクノロジーを徹底的に理解し、これらのテクノロジーを極限まで分解し、粉砕することに強く継続的な関心を持っていただけると信じています。
そして、あなたが 2 番目のタイプの人であれば、「理由を知る」必要はありません。特にチームでは、「理由を知る」というタスクを技術専門家に任せて、限られたエネルギーを自分にとってより適した場所に投資できます。
これまでの経験を振り返って、フロントエンド初心者に学習経験をいくつか共有していただけますか?
私は長年にわたり、初級および中級の開発者を主な読者としてブログを書いてきました。私が作成した「CSS Magic」WeChat 公開アカウントは、依然としてフロントエンドの初心者に焦点を当てています。したがって、議論できる経験はたくさんありますが、最も重要なことは「体系的に学び、しっかりとした基礎を築くこと」です。なぜなら、本当に基本的なことは決して古くならないからです。
私はまた、他の人の Web サイトのコードを真似したり、他の人がインターネット上に投稿したさまざまなテクニックを収集して、見つけたコード行をつなぎ合わせました。この方法は通常は機能しますが、その理由はわかりません。私にとってこれらのコードの断片は宇宙人の呪文のようなものです。指導してくれる人がいなかったため、体系的に知識を学ぶことができず、まさに暗い迷路の中を手探りしているような状況でした。
当時、書店に並んでいた関連書籍は、「今すぐ学んで応用しよう」といった中国人の「短期、早い」精神に応えるファストフード本に過ぎませんでした。 now」と「クイック コード チェック 300 例」を参照してください。私は物事の本質を理解するのが好きな人間です。これらの終わりのないいわゆるテクニックは明らかに私の好奇心を満足させることができず、失望して去ります。
数年後、チューリングに代表される技術書籍会社が海外の古典的なチュートリアルや参考書を紹介し始めました。これらの本「Mastering CSS」と「Advanced Programming with JavaScript」が私の手に届いたとき、私がどれほど有頂天になったか想像していただけると思います。
狂ったように知識を追求する過程で、私はここ数年オンラインで苦労して集めた珍しい黒魔術が、実際には本でより包括的かつ体系的に説明されていることに気づきました。 HTML、CSS、JSの基礎知識をしっかりと身につけた私は、まるで魔法のようで覚えられなかった異星人の呪文がすでに血中に組み込まれて本能化していることに気づき、驚きました。
今の子どもたちは、情報がスムーズで資源が豊富な時代に生きています。したがって、「偉大な神」に秘密を数言話すだけで助けを求める必要はありません。あと数ページ読めば、あなたも他の人の目には偉大な神になれるのです。
貴重なお時間を割いて、チューリングの独占インタビューに応じていただき、奥深い内容を平易な言葉で説明し、真相に迫ってくださったマジック・ブラザーさん、本当にありがとうございました！
今日は皆さんとたくさん話せてとても嬉しかったです。また次回お会いしましょう!
さらにエキサイティングなニュースについては、チューリング インタビュー WeChat に参加してください!
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
