PostCSS深远学习,样式书写规范

CSS 和 JavaScript 历史

层叠样式表(CSS)是为描述标志语言文书档案的表现样式而产出的。JavaScript 是为着整合图片、插件等零零器件而创造的意气风发种“胶水语言”。随着发展,JavaScript 扩充、转换,有了新的行使场景。

Ajax 的产出(二〇〇五)是贰个关键的里程碑。此时 Prototype、jQuery、MooTools 等库已经抓住了大批量的拥护者,合作解决后台跨浏览器数据拿到难题。那又掀起了新的难点:怎么着保管数据?

到了 二零零六 年,Backbone.js 现身,成为了运用状态管理的行当规范。不久后,Knockout 和 Angular 双向绑定的表征迷惑了全部人。之后,React 和 Flux 现身,开启了单页应用(SPA)的新纪元,组件布局采取。

reset.css 存在的主题材料

拜见第生机勃勃段:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

1
2
3
4
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

这一条样式的指标是在乎,肃清成分的暗中同意 margin 和 padding 。

可是那意气风发段代码是充满难题的。

  • 譬喻 div 、dt、li 、th、td 等标签是未有暗中同意 padding 和 margin 的;
  • 借使本人今后问您 田野set 是哪些标签,只怕十分少人清楚,相通的还有如blockquote 、acronym 这种很生分的标签,在 html 代码中基本不会冒出的,其实没太大供给 RESET ,只会给每种门类徒增冗余代码;

地方的意趣是,那生机勃勃段代码其实做了过多无用功!

要驾驭,CSS RESET 的成效域是大局的。我们都知晓在本子代码中应当尽量防止滥用全局变量,可是在 CSS 上却接连会遗忘那或多或少,大量的全局变量会导致品种大了未来维护起来格外的患难。

再看看那生龙活虎段:

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ol, ul { list-style: none; }

1
2
3
4
5
6
7
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}

这后生可畏段代码,指标是统一了 h1~h6 的显现,打消了题指标粗体体现,废除了列表成分的项目点。

就像没什么问题,可是举个例子 h1~h6、ol、ul 这么些具有具体语义化的要素,风姿洒脱旦去掉了它们本身的特征,而又从不予以它们本人语义化该片段样式(平日未有),引致更增添个人弄不清它们的语义,侧面来说,那也是现行尤为多的页面上 div 满天飞,缺乏语义化标签的三个最主因。

YUI 版本的 reset 不管高矮胖瘦,一刀切的章程,看似将有所因素统豆蔻梢头在同一块跑线上,实则是多了过多冗余代码,舍本逐末。

由此,YUI 的 reset.css 的重重主题材料,催生出了另二个版本的 reset.css ,名字为 Normalize.css。

杀鸡取蛋办法

因为有前任的寻找,未来我们有Object-Oriented CSS, BEM, SMACSS等等,这么些都以那几个棒并且丰盛有效的法子。他们通过扩展前缀的法子,消除了命名冲突的难点。

通过增添前缀的秘籍缓慢解决命名冲突是个体力活(manual mangling)。大家手动的去编写长长的采用器。你也能够运用预编译的css语言,可是它们并不曾从根本上搞定难点(照旧体力活)。上边是大家用BEM标准书写的多少个独立组件(对于现存的除BEM之外的诀要,观念上着力也是那样):

CSS

/* 普通 CSS */ .article { font-size: 16px; } .article__title { font-size: 24px; } /* 使用css预处理语言 */ .article { font-size: 16px; &__title { font-size: 24px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 普通 CSS */
.article {
  font-size: 16px;
}
 
.article__title {
  font-size: 24px;
}
 
/* 使用css预处理语言 */
.article {
  font-size: 16px;
 
  &__title {
    font-size: 24px;
  }
}

PostCSS浓重学习:设置选项

2015/10/28 · CSS · POSTCSS

初藳出处: Kezz Bracey   译文出处:大漠   

招待开启我们PostCSS深刻学习类别之快入门指南。在此些初级教程中,能够让大家神速的询问PostCSS和怎样最可行的接纳PostCSS。

在此篇小说中,我们将先告诉您怎么样设置PostCSS选项,所以你今后始于接收PostCSS只要几分钟。接下来将告诉你怎样在Codepen和Prepros中设置PostCSS。

即时让我们看看哪些开头玩PostCSS。

平整表明块

  • 当法规申明块中有五个样式表明时,每条样式独自据有大器晚成行。
  • 在法规申明块的左大括号 { 前加叁个空格。
  • 在体制属性的冒号 : 前边加上多少个空格,后面不加空格。
  • 在每条样式前面都以分部 ; 结尾。
  • 准绳申明块的右大括号 } 独自据有后生可畏行。
  • 各类准绳注明间用空行分隔。
  • 具有最外层引号使用单引号 ‘ 。
  • 当七个属性有多少个属性值时,以逗号 , 分隔属性值,每个逗号后增加八个空格,当单个属性值过长时,每一种属性值独自占领风流倜傥行。

总体示举个例子下:

.g-footer, .g-header { position: relative; } .g-content { background: linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%); } .g-content::before { content: ''; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.g-footer,
.g-header {
  position: relative;
}
 
.g-content {
  background:
    linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, deeppink 25%, transparent 25%),
    linear-gradient(45deg, deeppink 25%, transparent 25%);
  }
 
.g-content::before {
  content: '';
}

 

那正是说大家应该用哪些吧?

使用 Shadow DOM v1 还为洋气早(58% 协理率)。CSS 应固守命名契约(建议 BEM),假使担忧类名冲突(或无意用 BEM),能够用 CSS modules。若是您在开荒 React web,思虑用 babel-plugin-react-css-modules。假设在付出 React Native,styled-components 更好。

感谢 Max Stoiber。

打赏帮忙本身翻译更多好小说,多谢!

打赏译者

有趣的CSS题目(11):reset.css 知多少?

2017/01/06 · CSS · 1 评论 · CSS Reset

正文小编: 伯乐在线 - chokcoco 。未经作者许可,禁绝转发!
应接参加伯乐在线 445云顶国际在线娱乐,专辑撰稿者。

多数的时候,作为前端,大家在写 CSS 样式在此以前,都清楚必要加多风流倜傥份 reset.css ,然而有商量过reset.css 每一句的人大概没有多少,其实里面也会有成都百货上千知识的,自惭形秽,真正厘清它,对巩固CSS 大有裨益。

CSS模块(CSS Modules)

二〇一六年现身了此外二种方法的完毕。分别是CSS-in-JS 和 CSS Modules。我们将重大探究前面一个。

CSS模块允许你将有所css class自动破裂,那是CSS模块(CSS Modules)的暗中认可设置。然后生成叁个JSON文件(sources map)和原先的class关联:

CSS

/* post.css */ .article { font-size: 16px; } .title { font-weight: 24px; }

1
2
3
4
5
6
7
8
/* post.css */
.article {
  font-size: 16px;
}
 
.title {
  font-weight: 24px;
}

地点的post.css将会被调换到相像上边那样:

CSS

.xkpka { font-size: 16px; } .xkpkb { font-size: 24px; }

1
2
3
4
5
6
7
.xkpka {
  font-size: 16px;
}
 
.xkpkb {
  font-size: 24px;
}

被砸烂替换的classes将被封存在三个JSON对象中:

JavaScript

`{ "article": "xkpka", "title": "xkpkb" } `

1
`{  "article":  "xkpka",  "title":  "xkpkb"  }  `

在转移完成后,你可以一向援引那一个JSON对象到项目中,那样就可以用事情发生在此之前写过的class名来直接利用它了。

JavaScript

import styles from './post.json'; class Post extends React.Component { render() { return ( <div className={ styles.article }> <div className={ styles.title }>…</div> … </div> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
import styles from './post.json';
 
class Post extends React.Component {
  render() {
    return (
      <div className={ styles.article }>
        <div className={ styles.title }>…</div>
        …
      </div>
    );
  }
}

更加的多给力的效果与利益, 能够看看 这篇十一分好的篇章.

不光是保存了前面提到的两种情势的帮助和益处,还自行消除了组件css分离的主题素材。那就是CSS模块(CSS Modules),听上去特别不错啊!

到那边,我们有碰着了另二个主题材料: 大家现在的CSS Modules相关工具,只可以在顾客端(浏览器)使用,把它内置三个非Node.js的服务端情形中是极其十三分困难的。

总括一下

好呢,飞快将地点的源委做个小结:

  • 试着在CodePen或Prepros中使用PostCSS
  • CodePen中提供了PostCSS13个插件
  • 在CodePen中的CSS面板中激活PostCSS插件,然后经过引入@平整,就足以行使一定的PostCSS插件
  • Prepros提供了Autoprefixer和cssnext插件
  • 在Prepros中式点心击项目中任何CSS文件能够安装PostCSS给Prepros提供的PostCSS插件

SASS 使用建议

9 个谎言

CSS 不应随便放置。相当多类型选取将样式写在 JavaScript 中的理由不对。本文列出了广阔的误解,以致减轻难题的留存 CSS 方案。

正文的别样言论都未有对有些项目或人开展人身攻击的意味。styled-components 是 React 的日前来势,所以自个儿将 styled-components 定义为“JavaScript 中的 CSS”。

styled-components 的提出者(Max Stoiber、Glen Maddern 以至拥有的进献者)都很聪明、主见特别,出发点也是好的。

为了完全透明,小编还要提出本身是 react-css-modules 和 babel-plugin-react-css-modules 的作者。

445云顶国际在线娱乐 1

小红帽

至于维护

当协会依照项目需求(大概夹杂部分了 reset 恐怕 normalize )编写了意气风发份相符共青团和少先队项目标 reset 之后,随着不断的迭代恐怕说是复用,很有十分大希望这么些版本的 reset.css 会逐步增进超级多别样的全局性的体制,进而又重新陷入上边说的那多少个难题。

就此作者认为,reset.css 也是亟需尊敬的,关于最好的 reset.css ,未有一劳永逸的方案,依据项目灵活安排,做出抉择微调,适当的数量裁剪和校订后再采用。

终极,搞手艺的同桌依旧一定要全体追求,不要满意于成本外人的总计,必必要去根源看看。

到此本文甘休,假如还应该有啥样疑难依旧提议,能够多多沟通,原创作品,文笔有限,才薄智浅,文中若有不正之处,万望告知。


开本体系,谈谈一些风趣的 CSS 标题,标题类型南征北战,想到什么说怎么,不仅仅为了推广一下缓和难点的笔触,更关乎一些轻松忽略的 CSS 细节。

解题不思量包容性,标题南征北战,想到什么说什么样,假诺解题中有您觉拿到生僻的 CSS 属性,赶紧去补习一下吗。

不断更新,不断更新,不断更新,主要的事情说三次。

负有标题汇总在自家的 Github 。

  • 有趣的CSS标题(1): 左侧竖条的得以完毕格局
  • 有意思的CSS标题(2): 从条纹边框的兑现谈盒子模型
  • 有意思的CSS标题(3): 层叠顺序与货仓上下文知多少
  • 有意思的CSS标题(4): 从倒影聊到,谈谈 CSS 世襲inherit
  • 有意思的CSS标题(5): 单行居中,两行居左,超越两行省略
  • 有意思的CSS标题(6): 全包容的多列均匀结构难题
  • 有趣的CSS标题(7):消失的边界线难点
  • 有趣的CSS标题(8):纯CSS的领航栏Tab切换方案
  • 风趣的CSS标题(9):玄妙完成 CSS 斜线
  • 风趣的CSS标题(10):布局性伪类选取器

打赏扶助自个儿写出越来越多好随笔,多谢!

打赏作者

PostCSS-modules

为了在服务端和顾客端都能采纳CSS Modules,作者写了个PostCSS-modules,它是叁个PostCSS插件,令你能够在服务端使用模块化的CSS,並且服务端语言能够是Ruby, PHP, Python 只怕其他语言。

PostCSS是叁个CSS预微处理机,它是用JS达成的。它支持静态检查CSS,援救变量和混入(mixins),能让你使用未来还未有被浏览器援救的前途CSS语法,内联图像等等。举个例子使用最为啥奇之有的Autoprefixer,它只是PostCSS的叁个插件。

倘让你选取Autoprefixer, 其实你已经在用PostCSS了。所以,增多PostCSS-modules到你的品种依赖列表,实际不是豆蔻梢头件难事。笔者先给您打个样(实例),用Gulp and EJS,其实你能够用别样语言做相像的工作。

PostCSS深远学习,样式书写规范。JavaScript

// Gulpfile.js var gulp = require('gulp'); var postcss = require('gulp-postcss'); var cssModules = require('postcss-modules'); var ejs = require('gulp-ejs'); var path = require('path'); var fs = require('fs'); function getJSONFromCssModules(cssFileName, json) { var cssName = path.basename(cssFileName, '.css'); var jsonFileName = path.resolve('./build', cssName + '.json'); fs.writeFileSync(jsonFileName, JSON.stringify(json)); } function getClass(module, className) { var moduleFileName = path.resolve('./build', module + '.json'); var classNames = fs.readFileSync(moduleFileName).toString(); return JSON.parse(classNames)[className]; } gulp.task('css', function() { return gulp.src('./css/post.css') .pipe(postcss([ cssModules({ getJSON: getJSONFromCssModules }), ])) .pipe(gulp.dest('./build')); }); gulp.task('html', ['css'], function() { return gulp.src('./html/index.ejs') .pipe(ejs({ className: getClass }, { ext: '.html' })) .pipe(gulp.dest('./build')); }); gulp.task('default', ['html']);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Gulpfile.js
var gulp         = require('gulp');
var postcss      = require('gulp-postcss');
var cssModules   = require('postcss-modules');
var ejs          = require('gulp-ejs');
var path         = require('path');
var fs           = require('fs');
 
function getJSONFromCssModules(cssFileName, json) {
  var cssName       = path.basename(cssFileName, '.css');
  var jsonFileName  = path.resolve('./build', cssName + '.json');
  fs.writeFileSync(jsonFileName, JSON.stringify(json));
}
 
function getClass(module, className) {
  var moduleFileName  = path.resolve('./build', module + '.json');
  var classNames      = fs.readFileSync(moduleFileName).toString();
  return JSON.parse(classNames)[className];
}
 
gulp.task('css', function() {
  return gulp.src('./css/post.css')
    .pipe(postcss([
      cssModules({ getJSON: getJSONFromCssModules }),
    ]))
    .pipe(gulp.dest('./build'));
});
 
gulp.task('html', ['css'], function() {
  return gulp.src('./html/index.ejs')
    .pipe(ejs({ className: getClass }, { ext: '.html' }))
    .pipe(gulp.dest('./build'));
});
 
gulp.task('default', ['html']);

大家只需求施行gulp任务,就能够得到改换后的CSS文件和JSON文件,然后就可以在EJS模版里面用了:

XHTML

<article class="<%= className('post', 'article') %>"> <h1 class="<%= className('post', 'title') %>">Title</h1> ... </article>

1
2
3
4
<article class="<%= className('post', 'article') %>">
  <h1 class="<%= className('post', 'title') %>">Title</h1>
  ...
</article>

假诺您想看看实际的代码,小编在GitHub给您策动了个example。越来越多的例证能够看PostCSS-modules和CSS Modules


轻易编写可尊崇的CSS,未有肥壮的mixins。长长的前缀将形成历史,迎接来到今后的CSS世界。

1 赞 收藏 评论

445云顶国际在线娱乐 2

CodePen中设置PostCSS

倘使您是率先次接触PostCSS,那么通过CodePen来使用它是最快格局。

CodePen已开始时期集成了PostCSS,何况还扶持上面所列的PostCSS插件:

  • cssnext
  • postcss-simple-vars
  • postcss-discard-comments
  • postcss-custom-media
  • postcss-media-minmax
  • postcss-conditionals
  • postcss-each
  • postcss-for
  • postcss-nested
  • postcss-transform-shortcut

这一个插件能够让您扶植现在的CSS语法、像Sass同样的函数、注释的删除和代码的缩写等等。

先是在CodePen在线编辑器上点击”NewPen“成立三个新的页面。然后单击CSS窗口左上角的小齿轮Logo,在弹出的面板中设置。

445云顶国际在线娱乐 3

单击“CSS Preprocessor”下拉选项,你能够选取下拉选项中的“PostCSS”选项。你也足以在”Vendor Prefixing“中选择“Autoprefixer”插件。

445云顶国际在线娱乐 4

下一场您能够点击“Need an add-on”开关,在弹出的面板中筛选你须求的插件。在弹出的面板将会展现@法则插件,复制粘贴那个@法则对应的PostCSS插件到您的CSS面板中,并且开头应用。

445云顶国际在线娱乐 5

单行注释

星号与内容之间必需保留一个空格。

/* 表格隔行变色 */

1
/* 表格隔行变色 */

那么 CSS 呢?

借用 styled-components 文书档案中的话:

纯 CSS 的难题在于它发出的充足时期,网站由文书档案组成。一九九三年,网址发出,主要用来调换科学文献,CSS 是统筹文献样式的缓和方案。不过现在大家创设的是加上的、面向客商的互相使用,而 CSS 并不是为此而生的。

自家不这么以为 。

CSS 已经前行到能够满意现代 UI 的须求了。过去十年中现身的新特征数不胜数(pseudo-classes、pseudo-elements、CSS variables、media queries、keyframes、combinators、columns、flex、grid、computed values 等等)。

从 UI 的角度看,“组件”是文书档案中叁个独门的后生可畏对(<button /> 正是个零件)。CSS 被规划用来样式化文书档案,富含富有组件。难题在哪?

俗语说:“工欲善其事必先利其器”。

reset.css

先来看看早前 YUI 的二个版本的 reset.css,那是生机勃勃份历史相比较遥远的 RESET 方案:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: 0;
}

先是,大家要明白 CSS RESET 的指标是怎么样?是为着裁撤分歧的浏览器在默许样式上分歧表现,不过到明天,当代浏览器在这里上头的差别已经小了无数。

让CSS更完美:PostCSS-modules

2017/01/22 · CSS · POSTCSS

初藳出处: Alexander Madyankin   译文出处:众成翻译   

译者注(GeoffZhu): 那篇切合部分运用过预管理CSS的开拓者,举个例子less,sass或stylus,尽管你都没用过,那您早晚不是个好车手。在PostCSS中早已能够使用CSS Modules了,该篇小编进献了贰个新工具,可以让越来越多开辟者方便的利用新型的CSS Modules。

咱俩和大局成效域的css多管闲事争了多年,以后算是是时候截至它了。不管您用的是什么样语言还是框架,CSS命名冲突将不再是个难题。小编将给您出示一下PostCSS和PostCSS-modules如何采纳,何况能够在服务端使用它们。 CSS早先只是叁个鼓吹文书档案的工具,但是工作到一九九八年发出了调换。浏览器中不再只是仅有文书档案了,即时通信,各个软件,游戏,没什么是浏览器无法承载的。

不久前,大家在HTML和CSS方面业已走了非常远超级远,开采者们振作感奋出了CSS全体的潜质,以致创立出了部分CSS本人都快通晓不了的事物。

每二个有资历的开采者都掌握 — 每一次使用全局命名空间都是留住了叁个生出bug的祸患,因为赶快就或许现身仿佛命名冲突之类的难点,再拉长别的地点(项目进一层大等卡塔尔(قطر‎的熏陶,代码越来越不易维护。

对于CSS来讲,那意味有标题标布局。CSS特异性和CSS宽泛性之间,一贯留存着如英雄逸事般的对决。仅仅是因为每一个接纳器都或许会影响到那么些不想被潜移暗化的因素,使之产生了冲突。

主导享有编程语言都扶植部分成效域。和CSS尺布不问不闻粟的JavaScript有AMD, CommonJS和最后分明的ES6 modules。可是我们并不曾叁个能够模块化CSS的法子。

对于一个高水平连串来讲,独立的UI组件(也正是组件化)特别关键的 — 每一个组件小巧独立,能够拼合成复杂的页面,那让大家节省了众多的做事。不过我们始终有二个难题,怎么样幸免全局命名冲突那?

下大器晚成节:集成职责

CodePen和Prepros能够透过安装启用PostCSS插件。不过不利的一面是,你不能够调控选择哪个插件。

当您策动使用PostCSS越多你想要的插件时,能够通过配备自身选用的插件。最轻便的点子是透过gulp或grunt安装要求的PostCSS插件任务,並且让其跑起来。

在下风度翩翩节中,你将可学习到什么样在Glup或Grunt中配备PostCSS插件任何,並且让其跑起来为您所用。感兴趣的同桌,接待持续关怀接下去的剧情。(^_^)。

1 赞 1 收藏 评论

445云顶国际在线娱乐 6

字符小写

概念的挑精拣肥器名,属性及属性值的书写皆为小写。

等下!

大部剧情都短时间有效,无论是社区、React 改变或 styled-components 本身。但意义何在?CSS 已被大范围帮忙,有雅量的社区,也确实卓有成效。

正文的目标并非阻碍读者在 JavaScript 中动用“CSS”或是 styled-componentsstyled-components 二个很棒的利用景况是:越来越好的跨平台辅助性。不要因为漏洞非常多的说辞使用它。

Normalize.css 做了什么

Normalize.css 注释完整,每生龙活虎段代码都认证了功效,计算来讲,它做了以下多少个办事(摘自官方网站):

  1. Preserves useful defaults, unlike many CSS resets.
  2. Normalizes styles for a wide range of elements.
  3. Corrects bugs and common browser inconsistencies.
  4. Improves usability with subtle modifications.
  5. Explains what code does using detailed comments.

归纳翻译一下,大约是:

  1. 集合了生龙活虎部分因素在享有浏览器下的变现,保养得力的浏览器暗中同意样式实际不是完全清零它们,让它们在大器晚成后生可畏浏览器下表现同样;
  2. 为多数因素提供平常化的变现;
  3. 修复了有的浏览器的 Bug ,并且让它们在富有浏览器下保持蓬蓬勃勃致性;
  4. 由此一些高超的底细提高了 CSS 的可用性;
  5. 提供了详尽的文书档案让开采者知道,不一致因素在分歧浏览器下的渲染法则;

真诚建议各位抽时间读风度翩翩读 Normalize.css 的源码,加上注释风姿浪漫共就 460 行,多询问摸底各种浏览器历史遗留的某些坑。

CodePen用法的例证

让多们看看怎么着在CodePen中接纳PostCSS的插件cssnext示例。

在CSS面板顶端,增加你想要的cssnext插件代码:

@use cssnext;

1
@use cssnext;

有了那条代码,你将得以行使cssnext官网上陈述的持有作用特色。比如,大家接受CSS的变量和函数给body设置一个background颜色。

首先,使用:root定义CSS变量。在CSS面板中增多像上边那样的代码:

:root { --body_bg_color: black; }

1
2
3
:root {
  --body_bg_color: black;
}

能够像下边包车型地铁代码那样调用CSS的变量:

body { background: var(--body_bg_color); }

1
2
3
body {
  background: var(--body_bg_color);
}

其不日常候你应当见到了预览面板上的背景颜色形成了black。你也得以点击CSS面板右上角的”View Compiled“开关见到变化的代码:

445云顶国际在线娱乐 7

接下去,假诺大家想让背景颜色不假设全驼色,想变亮一点。大家能够使用未来的语法纠正颜色。

在地方证明的CSS变量中,校正--body_bg_color变量值,从black变成:

--body_bg_color: color(black lightness(20%));

1
--body_bg_color: color(black lightness(20%));

这是壹个lightness()函数,在black水彩上调20%的亮度,此时你能够见到背景颜色从普鲁士蓝变成了深鲜绿。

445云顶国际在线娱乐 8

能够在CodePen以这种情势接受此外扶植的PostCSS插件:

  • 通过@准则引进你想要的应用的PostCSS插件
  • 依照插件的一声令下在CSS面板中运用(在位置你能找到相应插件使用表明的链接地址卡塔尔(英语:State of Qatar)

上边即是大家前边在CodePen中应用PostCSS获得的结尾效果:

链接地址

法规表明块内注释

使用 // 注释,// 后边加上三个空格,注释独立后生可畏行。

.g-footer { border: 0; // .... }

1
2
3
4
.g-footer {
    border: 0;
    // ....
}

并非再在 JavaScript 中用 CSS了

Normalize.css

Normalize.css 有着详细的笺注,由于篇幅太长,能够点开网站看看,本文不贴出全体代码。

normalize.css v5.0.0

Normalize.css 与 reset.css 的风骨适逢其会相反,没有不管三七二风流倜傥的一刀切,而是讲究通用的方案,重新苏醒设置掉该重新初始化的样式(比方body的默许margin),保留该保留的 user agent 样式,同一时间开展部分 bug 的修复,那一点是 reset 所紧缺的。

在Prepros中使用PostCSS

Prepros中或者未有像CodePen中那么多插件可使用,但它总结了Autoprefixercssnext插件,能够在Prepros面板中选中,进而激活对应的PostCSS插件。你能够点击此地下载Prepros。

张开Prepros面板,能够将项目拖到面板中,而且以此面板包含几个CSS文件。然后点击CSS文件,将会在右边手张开二个设置面板。在这里个面板中您能够旁观Prepros帮忙的PostCSS插件,你能够筛选你想用的PostCSS插件。举例说你选取Autoprefixercssnext意味着您选择了PostCSS那多少个插件。

445云顶国际在线娱乐 9

如上海体育场合所示,你以后能够动用cssnext插件的享有机能以至Autoprefixed插件功用。

取名短且语义化优秀

对此选拔器的命名,尽量轻便且独具语义化,不应该现身 g-abc 这种语义模糊的命名。

本文由445云顶国际在线娱乐发布于云顶集团手机登录网站,转载请注明出处:PostCSS深远学习,样式书写规范

相关阅读