月曜日の午後に研究室で最初のブログ投稿を書きましたが、何人かの人がそれをサポートしてくれたので、続けなければなりません。そして、私が今書いている内容は、フロントエンド CSS アーキテクチャについての私の理解と、フロントエンドのエクスペリエンスの簡単な概要について話すことの方が多いと感じたので、タイトルにある元の [プロジェクトの概要] を削除しました。しかし、これは、今後の記事でこの半ば死んだ電子商取引ウェブサイトについて言及しないという意味ではなく、私はそれについて言及し続けなければなりません、そうでなければ、なぜ私が自分自身を恥じるためにそれを使用する必要があります~~
なぜフロントエンド CSS にも構造があるのか、なぜ CSS の構造を考慮する必要があるのか、CSS の単純な構造を実装する方法については、すべて最初の記事で説明されています。詳しく知りたい場合は、お読みください。前回の記事は自分で。
前回、プロジェクト全体が完了しようとしていたときに、フロントエンドの CSS コードには再利用性の低さや不規則な名前付けなどの問題があると感じました。その後、4 月末に本を読んで啓発され、発見しました。私が採用していたアーキテクチャは良い意味ではありませんでした。この電子商取引 Web サイトのフロントエンドを含め、私のこれまでのプロジェクトはほとんど私が完成させたもので、バックエンドも自分たちでやってくれました。私はフロントエンドを大事にしてページを譲るだけで済みました。時間をかけて、データをバインドすれば問題ない場合もありますが、せいぜい分散ビューの作成やインターフェイスでの強い型付けを手伝うことができます。コードのほとんどすべてが自分で手書きなので、フロントエンドではよりカジュアルに、より慣れた方法で書いています。 CSS レイアウトに関しては、機能分割方法と領域分割方法を混在させる傾向があります。簡単に言うと、CSS コードにはヘッダーとフッターの抽象クラスと、ボタンとフォントの抽象クラスが含まれています。各インターフェイスに固有のカスタマイズされた CSS ファイルが待機しています。
この方法の利点は、開発が早く、あまり考える必要がないことです。インターフェイスを直接解析して、繰り返し発生するモジュールを抽出して、記述方法を指定するだけです。ただし、この方法はページと CSS ファイルが比較的少ない小規模な Web サイトにのみ適しています。ショッピング Web サイトやフォーラムなどの大規模な Web サイトでは、この方法の欠点が明らかになります。 CSS ファイルが多すぎます。競合しやすい、モジュールの再利用性が高くない、など。
先ほど、フロントエンド CSS アーキテクチャのもう 1 つの手法である、機能に応じた分割についてお話しました。つまり、すべての CSS ファイルは、プロジェクトのフロントエンド レイアウトにおける役割に従って分類され、次のように分類できます:
CSS フロントエンド構造 ---- 機能ごとに分割 | クラス名 | フロントエンドレイアウトにおける主な役割 | その他の命令 |
| base (基本クラス) | 主にブラウザのデフォルトスタイルをリセットし、主にフォント、マージン、高さ、幅などのアトミックレベルのスタイルサービスを提供する役割を果たします。 , など; 範囲はこの Web サイト内です | base.css ファイルは通常メンテナンスを必要としません しかし、その信頼性は保証されなければなりません |
common (共通クラス) | | 基本クラスに基づいて、Web サイト全体 高度なコード再利用を実現するためにモジュールを抽象化します。これらは Web サイトに頻繁に表示されます | 共通のモジュールは実際の用途に応じて異なる場合があります アトミック クラスを使用する |
page (ページ クラス) | | Base でアトミック クラス サービスを使用して、特定のインターフェイスに CSS UI を提供し、最小のスコープでページレベルのサービスを提供します | 競合の問題を回避するようにしてくださいpage.css を開発しているチームのスタイル |
各層の機能範囲は次のように理解できます: ピラミッド。
それで、上の表で述べたように、そして前のブログでも触れました:
チームや開発者にとって、それは独自の固定された一般的に使用されるbase.cssです。なぜなら、base レイヤーの明白な特徴は高度な再利用であるためです。これは、フロントエンド レイアウトにおける base の役割からもわかります。次に、base の 2 つの機能を詳しく見てみましょう。
---------------------------------私は境界線です---------- -----------------------なぜこんなに長いのか---------- ------------- -------
[1.ブラウザのデフォルトスタイルをリセット]
なぜリセットする必要があるのですか？回答: デフォルトは醜いからです。
多くの同志がブラウザのデフォルト スタイルをリセットする最も簡単な方法を使用したと思います:
スペースとパディングの値、なぜなら誰もが自分のページがブラウザに埋め込まれたくないからです、そしてその後、白い境界線が表示されます。 .
これは最も単純なブラウザのデフォルトスタイルのリセットコードです、大きな 実際に使っている人もいます。しかし最近、* セレクターについて言及しているブログを目にしました。多くの f2e は、* セレクターはデフォルトですべてのタグを選択するため、< ;dir> などの古いタグと互換性があると考えています。 などなので、ブラウザの DOM ツリー生成プロセスの効率に影響する可能性があります-----まあ、私個人の意見では、それは問題ではありません。* There を使用するのが好きです。私自身のリセット クラスも含めて、{} が多すぎます。そのブログで言及されている * 文字によって引き起こされるブラウザの効率の遅れは、ほとんど無視できると思います。ネギが入っているので、食べません。内部の状態は良くありません (咳咳咳、濡れの比喩として私を腐ったと呼んでください)
ブラウザをリセットする最も簡単なコードについて話した後、多くの人はこう言うかもしれません: *{margin:0px; これで十分です。 Padding:0px} は私の一番嫌いなブラウザスタイルをキャンセルしたので、他に何も書く必要はありませんが、実際には、ブラウザのデフォルトスタイルに起因するレイアウトのバグやレイアウトの醜さがまだたくさんあります。 、liタグのデフォルトのリストスタイル、表のデフォルトの上下マージン、そして列間の痛ましい2pxの隙間...
hタグのデフォルトの太字もあります、私の記憶が正しければ、似たようなものですしたがって、 font-weight: 600: 平坦でページ全体に大きな画像が飛び交うこの時代では、太字の h タグは実際にほとんど使用されません
将来これらのタグをより適切に変換するために、このように何度も使用されています。後でコードの量を節約するために、通常はすべてのブラウザーのリセットのデフォルトを Base.css クラスに記述します。以前の記事でも触れたように思いますが、個人的には yui の reset.css を使用することをお勧めします。このリセット ファイルには、良いか悪いかはありません。独自の開発であり、作業負荷を軽減するのに役立つのは、使いやすいreset.cssです。読者の皆様、自分のニーズに合わせて完全にカスタマイズできます。盲目的に使用しないでください。 (追記:そのページを余裕をもっていいねする当事者Aに出会ったらどうしよう、ははは…_(:з ∠)_)
Webサイトを勧めるhttp://www.cssreset.com/ は、一般的に使用される多くのリセット ファイルを提供し、ctrl+c および ctrl+v サービスを提供し、開発ツールでもあります~~ Web サイトのスクリーンショット: ↓↓
よく使われるYuiのreset.cssコードを添付します。その中のhタグのリセットは本当に満足です〜(???)/〜保管してください
1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} 2 table{border-collapse:collapse;border-spacing:0;} 3 fieldset,img{border:0;} 4 address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 5 li{list-style:none;}caption,th{text-align:left;} 6 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 7 q:before,q:after{content:'';} 8 abbr,acronym {border:0;font-variant:normal;} 9 sup {vertical-align:text-top;}10 sub {vertical-align:text-bottom;}11 input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}12 legend{color:#000;}ログイン後にコピー
--------------私も分かれ目です---------------------------- ------------------------長いです--------------- ------ --
[2. アトミッククラス関数の設計と実装] ブラウザのデフォルトスタイルのリセットについて話した後、ベースレイヤーCSSコードの別の機能について話しましょう：アトミックレベルのスタイルサービスを提供します。 そう言えば、前回の記事を読んだ人は意味が分かるかも知れませんが、読んでいない人は読んで分かると思います= , =
まあ、今議論しているのは CSS アーキテクチャの分割ですので。最も基本的な CSS アーキテクチャ層として、ブラウザのデフォルトをサイレントにリセットすることに加えて、レイアウト中に可能な限り便利なクラスを上位 2 層に提供する必要があります。 、高さクラスなどの幅クラスは、これらのアトミック クラスを組み合わせることで、共通クラスやページ クラスに依存せずにページの最も単純な「構成要素」を実現できます。基本レイヤー ファイルにはブラウザーは関係しません。UI スタイルはあらゆる Web サイトのデザインに適用できます。では、ブラウザーのアトミック クラスは何ですか?
何があるの？これは実際の Web サイトの使用状況によって異なります。これは、私が作成した e-commerce Web サイトの CSS ファイル内の小さな栗です。
（请自动忽视上面w960里面写的width:1024px= 。 =，以及每个.w类里面的height:inherit）
一开始没觉得，后来开始写的时候，我真是越发的为自己点赞，就说.w960和.clear30，这两个类在我所有界面里面出现了100+次，要是我当时没有这么写而是给每一个div都需要定个类名，再给它写在page.css里，相信css代码量最少多写200行...而且万一，万一碰到甲方说“你们这个界面切糕区太窄了，再大点儿，我们就喜欢大的！”...然后你没用原子类，然后就熬夜挨个文件改吧....
所以从我上面晒出来的代码里，应该最起码能总结出来：高度和宽度可以抽象出原子类，在实际使用时候：↓（举段例子）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 /*宽度 原子类*/ 7 .w100{width:100px;} 8 .w200{width:200px;} 9 .w300{width:300px;}10 .w{width:100%;}11 .win{width:inherit;}12 /*高度 原子类*/13 .h50{height:50px;}14 .h100{height:100px;}15 .h200{height:200px;}16 .h300{height:200px;}17 .h{height:100%;}18 .hin{height:inherit;}19 /*定位 原子类*/20 .bc{margin-left:auto;margin-right:auto;}/*就是块状元素居中*/21 </style>22 </head>23 24 <body>25 <!--使用距离-->26 <div class="w h300 bc">27 <div class="w300 h100 bc">28 </div>29 </div>30 31 </body>32 </html>ログイン後にコピー
从上面这个我随便写了一个类的代码，相信同志们应该彻底明白原子类都是什么，原子类的应该怎么用了。
就是通过简单的原子类的组合就可以直接实现界面初步布局，并且宽度啊、高度这些原子类的数值根据自己使用来定，一般常用的也就是100,200,300~1200左右，有的用不上的就不用加在里面了，千万别.w1,.w2,.w3.....w999,w1000,.w1001,当你想这么干的时候，喝口水冷静一下。
很多人都说你这个原子类可真简单啊，一个样式里面就一条，你上面.w930{width:930px;height:inherit;}，你这时候怎么不写height默认继承父元素了呢？
解释一下哈，我上面那么写的原因：1.因为当时脑袋抽了2.后来发现还是有一定道理的，因为我们那个电商网站是个伪全屏，就是上面的导航栏、背景是默认全屏的，但是中间的Mainpart部分其实是有最大宽度限制的，而我的.w930这些宽度原子类，一般是用在mainpart里的，一般一个界面模块就用一个.w960限制一下，直接搞定，而且高度默认继承这个模块的高度~~而且，如果想要覆盖的话，只在标签的class中这么写就可以了：class="w960 h500"，就很容易的被覆盖掉了，不影响页面布局的说。
为什么这时候举例子时我每个原子类只写一条呢？因为原子类，原子类啊，提供的就是最小级别的布局服务，你提供那么多，还能叫原子类了么，有违我们的设计初衷啊。要是原子类很赘余冗长的话，那还能叫原子类了么，又变成我们自己定义的一个乱七八糟的类了，而且赘余冗长的话对base.css的通用性来讲，就是啪啪啪打脸啊
咳咳，看完我写的几个原子类后，想必大家可能有一下的想法：
1.你写的就是这么几个类啊，这个我在我的代码里也写呢
答：写出来不等于能用出来呦，只有将原子类的功能集中在base.css里才能发挥其最大作用。我们的目标是：不写一行多余代码！
2.少年啊，你这种原子类的做法，会让一个标签的类名很长啊
答：长就长呗，看不惯你来咬我啊。咳咳，说笑，对于这种类名组合导致类名过长的问题，我想好好解释一下。
下面有这样一个样式，大家来一起实现一下：
最简单的代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 </head> 6 <body> 7 <p style="font-size:20px;color:red;margin-top:10px">我喜欢吃卤肉饭</p> 8 <p style="font-size:20px;color:blue;margin-top:20px;margin-left:10px;">天要下雨</p> 9 <p style="font-size:14px;color:red;margin-top:10px;margin-left:10px;">明天不放假</p>10 </body>11 </html>
ログイン後にコピー
嗯，看上去已经实现功能了，但是作为一个有理想有抱负的前端，怎么能容许css代码与html代码搅在一起呢，必须分开啊！
好吧，看来我们只能这么干了，即把样式抽离成三个类，然后给p赋类吧：↓
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <!--这里为了更方便的展示，就不抽离成css文件了--> 6 <style stype="text/css"> 7 .p1{font-size:20px;color:red;margin-top:10px;} 8 .p2{font-size:20px;color:blue;margin-top:20px;margin-left:10px;} 9 .p3{font-size:14px;color:red;margin-top:10px;margin-left:10px;}10 </style>11 </head>12 <body>13 <p class="p1">我喜欢吃卤肉饭</p>14 <p class="p2">天要下雨</p>15 <p class="p3">明天不放假</p>16 </body>17 </html>ログイン後にコピー
但是感觉好长啊，.p1,.p2,.p3的css中确实有很多相同的，而且这里面还没有设置color、border、padding等其他属性，相信设置之后重复部分会更多，所以我们试着简化一下= = 但是好像发现没办法简化，因为任意两个类里面都没有两个一模一样的属性，所以再抽离出一个新类都不太可能了，就算抽离出来，那怎么理解这些类的语意呢？
所以，那怎么破呢？
用原子类啊！看我的↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--这里为了更方便的展示，就不抽离成css文件了--><style stype="text/css"> .f14{font-size:14px;} .f20{font-size:20px;} .cred{color:red;} .cblu{color:blue;} .mt10{margin-top:10px;} .mt20{margin-top:20px;} .ml10{margin-left:10px;}</style></head><body> <p class="f20 cred mt10">我喜欢吃卤肉饭</p> <p class="f20 cblu mt20 ml10">天要下雨</p> <p class="f20 cred mt10 ml10">明天不放假</p></body></html>ログイン後にコピー
当然这里举的例子比较极端，因为确实每两个标签都没有重复的样式，所以因此导致原子类使用过多。（不要因为这个开始吐槽，下面有解释）
在一个成型网站里，p、h等标签都会有大致统一的样式，比如都不加粗、颜色都是#000,上下边距都是多少，这时候将他们抽离成一个常用组件置于common类里，再配合上原子类，1.类名使用肯定会减少，但是绝对比一个要多2.根据组件进行订制，不影响各界面布局3.快速开发，当编辑器带提示功能的时候简直神速了
前两种方式大家可以看出来，类名很简洁，但是代码比较冗长；最后一种方法（请自动无视我设置的蛋疼样例），类名组合比较长，但是css代码非常简单。
很多图省事的同学可能觉得第一种或者第二种比较好，但是我们要考虑的是，当页面非常多的时候，你不可能为每一次出现的这种样式的标签加一个类，再者现在让你吧一个h3标签也变成这个样式，然后你的类名怎么加，在
里加上？不觉的而很怪吗= =
而类名比较长的时候，但是我开发快啊！哪怕因为类名比较长导致html代码看起来不太轻盈，但是因为使用这种方式给维护、重构带来了切实的方便。而且这种利用原子类进行布局更适合于团队开发，再强调一下啊，我们是靠谱前端，我们不能拿一个单页面网页和一个人的前端团队来说事儿啊。不用原子类，一个P标签的样式可能小A程序员已经写过很多次了，同时跟他一起开发的小B同学不知道啊，他在他的代码里也得自己写好多遍，连个复制粘贴的机会都不给。而利用原子类进行布局的话，每个人只需要提前了解好自己团队本次项目的base和common说明文档，按照规则独立开发，而且进行页面合并时不用担心冲突，毕竟本是同根生嘛。
关于类名使用的问题，以后会开文章接着说，忘了的话记得提醒我，大家一起交流一下开发经验吧。
最后up一下推荐的原子类模式，就简写了，大家用心领会...= =
1 /* 2 下面是我设计的几个简要的原子类，因为篇幅原因就不写全了，大家根据需要自行补上就可以了 3 下面的代码主要是简介一下原子类都可以有哪些 4 */ 5 /*文字*/ 6 .f12{font-size:12px;} 7 .f14{font-size:14px;} 8 .t2{text-indent:2em;} 9 .t4{text-indent:4em;}10 /*宽度类*/11 .w{width:100%;}12 .win{width:inherit;}13 .w10{width:10px;}14 /*高度类,与宽度相似*/15 .h10{height:10px;}16 /*定位类*/17 .bc{margin:0px;margin:0px;}18 .fl{float:left;}19 .vm{vertical-align:central;}20 .block{display:block;}21 .none{display:none;}22 .clear{clear:both;}23 /*边距类*/24 .m10{margin:10px;}25 .mt10{margin-top:10px;}26 .ml10{margin-left:10px;}27 /*填充类,与边距相似*/28 .p10{padding:10px;}29 /*当然，当你一个网站设计图确定之后，你可添加一些颜色基础类，但是这个可就不适用所有网站了*/30 .cred{color:#F00;}31 /*其他常见的还有border边框类、boxshadow类、lineheight行高类....*/ログイン後にコピー
当然，大家看完blog之后可能觉得这种架构方式很简单，但是要真正使用起来应该是另一种感受了，所以我推荐看完的或者说有感受的可以在下一个自己手头的网站里尝试一下子，反正又不会怀孕~~同样，那些觉得我说的狗屁不是的同志们，也可以考虑尝试一下，然后我们边用边改进。我也只是个学生，还在学习中，大家互相进步吧。
最后说一下，前几天有人看完Blog之后跟我说，写个css你还考虑这么多，累不累啊，直接写不就完了?
我想说的是，请叫我靠谱前端。
就说这么多吧，下一篇我们common层见，预计几天后发，最近有点写累了，学校事情也好多。
么么哒，各位安！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
