轩枫阁

首页 / Web前端 / CSS / 轩枫阁V3主题开发-重构篇

轩枫阁V3主题开发-重构篇

前言

轩枫阁V3主题已上线,本文将介绍本站V3主题关于CSS重构的内容。兼容IE9+,主要看Chrome表现。

LESS

鉴于Less能满足本站主题开发的需求,就没有更换成Sass。Less介绍:http://www.lesscss.net/

mixins

基于 LessCSS代码片段复用和混入库,主要有圆角border-radius、渐变gradient、内阴影inner-shadow、阴影box-shadow、动画animation、transition、宽度计算calc-width、省略text-overflow等,代码见附录。

滚动条

网站针对滚动条的展现进行了优化,表现及代码如下:

v3-scrollbar

动画

为了更好的性能,本站将JS动画转为CSS3动画。一些动画效果摘自animate.css,使用到的效果如fadeInfadeInDownfadeInUpfadeOutzoomInzoomOutflipInY等 效果。

构建

开发部署使用的构建工作流是tmt-workflow,介绍文章:tmt-workflow前端工作流

雪碧图及2x图

使用雪碧图Sprite,将各图标合并成一张图。

开发过程中,使用单个图标,结合tmt-workflow,在发布时将图片合并。

若图片支持 @2x,可以命名为 icon-xx@2x.png 放入 slice目录,合并后会加入 media query

v3-slice

v3-sprite

图片压缩

图标、大图、配图、内容图在制作的过程中,可以在PS中,使用快捷键Ctrl+Shift+Alt+S,保存为Web可用格式。半透明图一般选择PNG24,其它图片(色彩丰富)一般保存为质量为高的JPG格式图。

除了文章图,其它图片可以通过tmt-workflow构建,将图片进行压缩。PNG图片的压缩率一般在40%,JPG的压缩率一般在20%。

静态HTML

WP主题开发时,一般是先开发调试好静态页面,再将HTML拆分成PHP文件。

模块化

引入模块:@import

CSS模块:将页面各部分木块拆分到CSS文件如 mod-header.lessmod-sidebar.lessmod-footer.less

生产环境文件:style-*.less 为样式的出口文件,程序只编译 style- 开头的 Less 文件,其余文件可认为是import 在出口文件里面的模块,如 mod-header 模块

BEM

简介

BEM:http://bem.info

BEM自称是前端开发方法论(Frontend Development Methodology),提供了包括命名规则、CSS/JS模块化原则在内的一套用于开发环节的方法。

优点

  • 团队协作中样式命名(比如class)冲突
  • 用长class名解决,不使用结构化选择器,类名自带层级关系
  • 实现代码自己会说话(self-documenting code)的目标
  • 语义化类名,提供更多的信息,例如元素名、功能、所属组件名等
  • 避免组件之间相互影响
  • 不依赖结构化选择器,全靠类名

定义

Block + Element + Modifier

  • Block:逻辑和页面功能都独立的页面组件,是一个可复用单元
  • Element:Block的组成部分,依赖Block存在
  • Modifier:定义Block和Element的外观及行为

对比

BEM before

BEM after

BEM 修饰符

命名规则:block-name__element-name_mod-name

BEM 的各种横线

  • - 中划线 :仅作为连字符使用
  • __ 双下划线:双下划线用来连接块与⼦元素
  • _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态

附录

lib-mixins.less

 

24/432
26/432

相关文章

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]