随笔分类 - HTML+/CSS+
摘要：每篇写完，删了又删，只想再简单点、再少点，希望能快速看完，并能产生共鸣。 Web重构，选择好基础的框架/库、模块组件，合理分布静态资源，处理好标签和属性语义，基于OOP分离分割各代码，注意样式声明方式，页面结构必能合理，性能必能得到提升，可复用性、可伸缩性、可维护性显然得到实现，各种优点和好处，都是
阅读全文
摘要：样式预处理 样式最基本的语法(Syntax)是 Selectors { Properties:Values }，就是一个声明(Declaration)，告诉排版引擎：将我声明的选择器(Selectors)，按我的呈现规则(Rules)来渲染。 面向设计稿书写完样式，日常最基本需求：如颜色或内外间距要
阅读全文
摘要：主干和栅格是文档的骨骼，内容依赖组件进行呈现。 组件，主要是围绕交互体验对文字、图片、视频、表单等数据信息进行排版设计，以提供可复用、好维护、识别度统一规范的视觉呈现。 框架中会提供丰富的组件，便于快捷开发功能型网页应用；展示型网页建议开发者平时多积累一些常用图文视频组件。 通过module包裹组件
阅读全文
摘要："Web重构笔记(1): 为什么要写这个系列" "Web重构笔记(2): 来套Web重构装备" "Web重构笔记(3): Web重构前的分析" "Web重构笔记(4): 切图与标注" "Web重构笔记(5): 搭建工程目录" "Web重构笔记(6): 语义化" "Web重构笔记(7): 样式、结构、
阅读全文
摘要：页面由几个主干结构支撑和区分，主干结构(Site/Page)内部由多个区块(Section)组成的布局，区块作为弹性布局或定宽布局的钩子，可以实现通栏背景。区块内部则是栅格列(Grid)，格子列里是各模块(Module)和组件(Component)，各模块和组件可有边框、内外边距。 栅格的实现：将区
阅读全文
摘要：前面章节方法论，从本章节开始实践。 布局中的层级关系，主要体现在主干结构、栅格结构、组件模块结构三部分，本篇讲主干结构。 主干结构按级别分成“站点”和“页面”，即site和page。如电商或门户站点，站点有统一的头尾、悬浮挂件，站点有很多不一样的子站和栏目。 站点主干结构 1234567891011
阅读全文
摘要：Web重构工作主要是语义化排版文档信息，排版文档信息的最佳实现就是基于OOP分离分割结构、样式、行为。 分离分割皆为解耦。 分离，使HTML、CSS、JavaScript三基石职责清晰，HTML逻辑化内容，CSS视觉呈现，JavaScript承载控制、驱动、交互； 分割就是模块化、组件化，对系统各业
阅读全文
摘要：语义化概念：通过丰富的语义关系对数据进行逻辑化描述，便于数据人机可读、检索挖掘和共享交换，实现信息处理的自动化和智能化；即人类提供良好结构的、作为人能识别的数据给机器，让不同机器能准确高效的意会和处理数据反馈给人类。 语义化实现方案有多种，如RDF、RDFa、Microformats、Microda
阅读全文
摘要：Web重构搭建工程目录，即是合理分布项目静态资源。 目录和文件名，只能是英文、数字和-字符组成，名称不宜过长和生涩，不加排序前缀，干扰阅读和查找文件名，层级不宜过深，这样便于后期维护调整，交付后端程序清晰明了。 项目目录规划 移动Web端 → Project-H5 微信端 → Project-Wei
阅读全文
摘要：本篇讲从设计稿中提取基础资源和信息：切图与标注。 合格的设计师，会使每个元素组基于矩形层，形成一个个单元，并做好图层分类及命名，不在‘组’上使用蒙版，按照栅格化模块化设计，考虑各组件的复用性、扩展性和兼容性。 遇到不合格的设计师，那就把设计稿退回去，深入交流沟通。 不建议设计师切图，因为要考虑到图形
阅读全文
摘要：本篇讲重构前的分析。从“工作状态、工作环境和工作角色”和具体重构工作两方面分析。 凡是经过考验的朋友，就应该把他们紧紧地团结在你的周围 比较理想的工作状态：制定了各种设计和开发规范，各团队之间邮件、团队内部即时通讯工具或声波传输沟通，对已有的或将要孵化的项目和产品，或多或少会有参与和认识，较早的进入
阅读全文
摘要：本篇主要从语言入门、规范、工具、构建、库、框架、版本控制等各方面展开，篇幅会有点长，涉及到的工具类，会另开博文详细介绍。 另外说明Web重构是Web前端的开始，主要侧重Web页面，如实现布局与兼容，符合W3C标准规范，组件化框架化，实现页面视觉效果，提升代码的可维护性、可读性和性能优化。 三生万物
阅读全文
摘要：出于兴趣，选择从事Web重构工作，也非常幸运，能够将兴趣与工作结合在一起，既保证了公司和个人的收入，又能倒腾爱好。 到目前为止，一直就职于中小型互联网公司从事Web重构开发，在项目与技术结合方面，比较幸运的是项目有“旧衣翻新”，也有“无中生有”，技术点是“无所不用其极”；当然，在小团队中会有较多局限
阅读全文
摘要：按需调整断点一、谷歌后摘抄的一部分媒体查询/*#region SmartPhones *//* SmartPhones */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}/* La...
阅读全文
