CSS リセットについて (パート 4) CSS 基本ライブラリの構築_html/css_WEB-ITnose

まえがき

まず、これまでの章とこれまで述べてきたことを復習しましょう:

CSS リセットの歴史と Normalize.css の紹介

Normalize.css ソース コードの解釈

Normalize-zh.css のリリース

CSS についてリセットのトピックについては 3 章で説明しており、CSS リセットの役割、Normalize.css の利点、ブラウザ間の互換性の問題の解決にどのように役立つかについて学びました

この章の内容は弱められます。 CSS リセットのトピックを取り上げたのは、この章が CSS リセットと何の関係もないからではなく、実際の開発におけるより多くの問題を解決するために、それに基づいてさらに多くのコンテンツを拡張したいからです。

ここで、章のタイトルに戻り、いくつか追加します:

"CSS Reset について (4) パート CSS Reset に基づいた CSS Basic Library の構築"

CSS Basic Library の概念

なぜ基本的なライブラリを構築するのか

前の章の最後にいくつかの質問をしました:

1 ゲームの単一ページを作成したいとしますが、そのページにはフォーム コンテンツがありません。一部の冗長なコードを除き、ニーズに合わせて Normalize.css スタイルのカスタマイズを開始します。

2

。デフォルトのフォント設定とレイアウトが要件を満たしていない可能性があるため、Normalize.css が現時点では完全に適していない可能性があるコピーライティング プランニング Web ページを作成したいとします。 。 3

。ビジネス タイプの Web サイトを作成し、Web サイトにリッチ コンテンツ要素が含まれている場合、Normalize.css を使用してブラウザのスタイルを統一することを選択できますが、それだけでは十分ではありません。統一されたスタイルの問題を解決するために、Web サイトのレイアウトの問題を解決するためにレイアウト システムを設計する必要もありますか?

上記の質問からわかるように、大規模な Web サイトを構築する場合は、Normalize.css を基本スタイルとして使用し、さまざまなページ要件に応じてそれをカバーするスタイルを追加できます。

しかし、これは単なる最初のステップにすぎません。Web 開発には、フローティングやクリアなどの一般的な CSS 問題解決方法も使用することになるでしょう。 、など。

次のセクションでは、CSS 基本ライブラリに何が含まれているかを分析します。

基本ライブラリとは

基本スタイル ライブラリ

は、開発中に遭遇するいくつかの基本的な問題を解決するのに役立つと思います:

ブラウザのスタイルが統一されていない場合、スタイルをリセットする必要があります

などスタイルが醜すぎて操作が難しいため、スタイルを最適化する必要があります

• レイアウト スタイルを繰り返し記述する必要がある場合は、安定した再利用可能なソリューションが必要です
• たとえば、フローティングと一部のスタイルの位置合わせ操作は、複数の再利用のために統一して管理する必要があります ;
• たとえば、一般的な CSS アニメーション効果は、簡単に再利用できるように統合して管理する必要があります
• たとえば、一般的に使用される一部のアイコンには、再利用可能なフォント アイコンのセットが必要です。
• 印刷が必要な場合は、より合理的な印刷セットが提供されます スタイル
基本ライブラリの当初の意図と将来の方向性:

開発難易度を最小限に抑える

シンプルで効率的な開発エクスペリエンスを提供する

• モジュール化する傾向スタイル構築仕様
• 将来のUIコンポーネントライブラリの中核基盤として
• 常に巨人の肩の上に立つ
基本ライブラリの構造

• normal.css   [基于Normalize.css自定义模块，继承其优势，改善文字与部分细节]html5.css    [html5样式修复，默认会导入normal.css，可按需引用]form.css     [表单的一些基础样式，可按需引用]   grid.css     [响应式网格系统，优化命名与精简代码，可按需引用]   utils.css    [HTML中直接使用的工具类，可按需引用] iconfont.css [一套复用率极高的字体图标，可按需引用] animate.css  [常用的动画效果组合，可按需引用] print.css    [优化默认的打印样式，可按需使用]

最初はニーズに応じて基本スタイルライブラリの構造を分割しました当初、html5.css の内容は、normal.css に直接配置することも考えられていましたが、ページ上の一部のユーザーを考慮して、html5shiv などのソリューションは下位バージョンのブラウザーと互換性があるため、分割するのが便利です。 modules はここに反映されます。独立した CSS ファイルに分割されており、必要なときに使用できます。ただし、@import「html5 はここでデフォルトで使用されます。.css」は、プレビューとデバッグ用にのみインポートされます。実際に使用する場合はcssを使用するか、yuicompressorを使用して圧縮してマージして使用してください。

次のセクションでは、基本スタイル ライブラリの内容を調整し、それが何をする必要があるかを見ていきます。

CSS基本ライブラリの内容

スタイルリセットソリューションnormal.css

Normalize.cssはスタイルを統一するだけでなく、要素の読みやすさも保持するので、normal.cssも継承して継承すべき利点です。 Normalize.css にはすべての利点がありますが、開発者にとってより簡潔で使いやすいものにするために、使用されないいくつかの要素タグ hgroup を削除し、一部の要素タグを管理するなど、スリム化することにしました。要素を html5 .css、form.css などのモジュールに分割し、必要に応じて柔軟に参照できるようにするのに便利です。

normal.cssにはコンテンツと調整部分が含まれています

• 字体约定62.5%，方便单位转换
• 统一元素的内外边距
• 设置全局字体，修复表单元素不继承父级font的问题
• 添加链接基本样式
• 移除列表元素的默认标识
• 移除元素默认边框
• 移除链接默认的下划线
• 移除单元格间距让其边重合
• 修复th不继承text-align，默认左对齐
• 重置标题，采用自定义
• 把所有斜体标签默认扶正
• 统一引用标记
• 统一上标和下标

HTML5元素 html5.css

html5.css主要是用于解决html5新元素在旧浏览器中的不识别，并且修复一些元素存在的隐性问题。

但是为什么不把html5.css这部分内容直接放入normal.css，而是考虑将其进行分模块管理呢？ 是为了考虑一部分人在页面中已经使用了像html5shiv的解决方案来兼容低版本浏览器，所以这里就体现出了分模块的灵活性，拆分为一个独立的css文件，需要时再进行使用。

不过这里默认使用@import "html5.css"进行导入只是为了预览调试，请在实际使用中将代码拷贝合并至normal.css，或者使用yuicompressor，Grunt进行压缩合并后再使用。

html5.css 包含内容以及调整部分

• 修复HTML5新元素不能正确显示的问题
• 修复progress元素的对其问题
• 修复没有controls属性的audio显示出来
• 修复hidden属性不起作用的问题
• 修复svg元素overflow不正常的问题
• 统一mark标签的样式
• 修复拖动元素添加拖动的光标

表单元素 form.css

form.css修复表单元素在不同浏览器下的默认样式，尤其是IE低浏览器版本下的一些怪异问题；并且还修复了一些表单显示状态，致力于提升用户体验；

button按钮在网页中是最常用的基础元件，但是不同浏览器下按钮的默认样式千奇百怪，而且表现形式过于单一，所以考虑在form.css里内置了一套按钮组件，提供几种表现场景，并且可以和下面要介绍的iconfont.css搭配使用。

form.css 包含内容以及调整部分

• 统一fieldset元素的显示样式
• 修复'legend'元素的若干问题
• 修复表单元素字体与字号不继承的问题
• 统一表单元素的垂直对其方式
• 统一表单元素的overflow属性为visible
• 重置按钮禁用时光标样式
• 修复checkbox,radio的属性box-sizing: border-box;
• 统一button,input内边距和内边框
• 统一select的样式
• 修复textarea只能为纵向拉伸

ui-btn 按钮组件包含的内容

• 初始化默认按钮样式，增加不同状态下的效果
• 提供多种场景按钮，如主要，警告与错误
• 提供可定制的大小按钮，如较小，更小，一般，较大，更大
• 提供组合式按钮
• 支持iconfont.css，搭配图标按钮使用

使用示例

<button type="button" class="ui-btn">默认</button>

栅格系统 grid.css

借鉴了Bootstrap的一套响应式流式栅格布局系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

对栅格系统的样式命名进行重新组织，简化和移除工具代码，只保留核心布局样式。
简洁即是高效率。

grid.css 包含内容以

• .ui-grid-container(固定宽度)和.ui-grid-fluid(100%宽度)用于包裹.ui-row
• .ui-grid-container(固定宽度)通过媒体查询来实现响应式宽度
• .ui-row用于包裹一组.ui-col-1-.ui-col-12列
• xs,sm,lg通过媒体查询来实现响应式
• .ui-col-xs-* 超小屏幕 手机 (<768px)
• .ui-col-sm-* 小屏幕 平板 (≥768px)
• .ui-col-* (默认)中等屏幕 桌面显示器 (≥992px)
• .ui-col-lg-* 大屏幕 大桌面显示器 (≥1200px)
• 支持列嵌套，必须包裹在.ui-row行中
• 简化代码，不支持列偏移，列排序

使用示例

<div class="ui-grid-fluid"><div class="ui-row">      <div class="ui-col-8">.ui-col-8</div>      <div class="ui-col-4">.ui-col-8</div>  </div></div>

辅助工具 utils.css

提供最常用的功能类class，命名使用fn-前缀来进行区别表示，如果在项目中能够灵活复用这些类，那将大大提升开发效率。

utils.css 包含内容以及调整部分

• 浮动元素与清楚浮动元素
• 垂直与水平滚动
• 元素显示类型
• 元素与文本隐藏
• 文本不换行
• 文本强制换行
• 文本溢出显示省略号
• 文本左右对齐
• 文本垂直对齐
• 常用符号(关闭，箭头，下三角等)
• 自适应两端对齐
• 未知高度垂直居中
• 列表平铺

使用示例

<!-- 文字溢出显示省略号 --><div class="fn-text-ellipsis">文字那是相当的长</div>

字体图标 iconfont.css

iconfont都已经很熟悉了，是一种把图标放入自定义字体中，然后使用字体图标来替代普通图标的技术，使用起来方便灵活。

iconfont.css 包含内容以及调整部分

• 提供网页中66个最常用的字体图标
• 可搭配form.css按钮组件使用

使用示例

<button class="ui-btn"><b class="iconfont">&#126;</b>提交</button>

动画库 animate.css

CSS3的动画让网页变的更加有活力，所以这里引入一套CSS3动画库，可以通过简单的引用类名的方式在你的项目中实现最常见的动画效果。

animate.css 包含内容以及调整部分

• 弹跳
• 闪烁
• 摇动
• 淡入 (up,down,left,righ)
• 淡出
• 滑入 (up,down,left,righ)
• 滑出

使用示例

<div class="animated fadeIn">    淡入效果</div>

打印 print.css

可以优化打印出的网页更适合浏览，并且加快打印速度，节省打印机耗材。

print.css 包含内容以及调整部分

• 修复打印时的背景和文字颜色
• 删除所有的阴影效果
• 标注超链接，并显示URL链接

CSS 基础库的产出

项目地址

通过对以往开发中遇到问题的总结，以及对CSS基础库的需求进一步细化，当我们明确的知道需要什么了以后，从参考业内最优秀的CSS框架，到提取出能够解决我们实际问题的代码；从以往的开发经验中整理出最高效复用的方案，再到一次次的“取之精华去之糟粕”； 最终这篇文章有了产出：

项目名称：Koala - 更简洁高效的基础样式库
项目版本：alpha（内部测试与学习参考使用）
项目地址：https://github.com/Alsiso/Koala
项目交流：New issue

欢迎大家Fork代码，提出问题与意见，一起进行学习交流 ~

最后再说明一点：当前版本并不是正式生产版，所以还不能完全应用到项目中，目前仅供学习参考使用，部分的细节完善和优化还在进行中，如果你有意见和问题，欢迎随时联系：chyi722到163.com

后续的扩展

CSS基础样式库只是前端解决方案中最小的一个分支，其实我们还可以完善更多的内容来帮助解决前端开发中所有的问题，就犹如下面这个表格。

分层	结构层+表示层	行为层
	html+css	js
基础库	normal/grid/utils/scss扩展/	jquery/base/seajs/
组件	元件/静态组件	ui组件/业务组件
模块	html/css/js(基础库+组件)

后续会持续跟进完善内容，致力于让前端开发变得更简单，高效，稳定，也让我们的工作生活变的像Koala一样，每天拥有18个小时的睡眠时间~

至此《关于CSS Reset 那些事》的系列文章已经完结了，感谢大家关注Alsiso，后续也会以这种方式来分享学习成果与方法。

• 关于CSS Reset 那些事（一）之 历史演变与Normalize.css
• 关于CSS Reset 那些事（二）之 Normalize.css 源码解读
• 关于CSS Reset 那些事（三）之 Normalize-zh.css 出炉