亚洲必赢登录 > 亚洲必赢app > 下划线还是连接符,编写更加好的CSS代码

原标题:下划线还是连接符,编写更加好的CSS代码

浏览次数:82 时间:2019-10-05

CSS 类名的单词连字符:下划线依然三番五次符?

2014/05/08 · CSS · 3 评论 · CSS

正文作者: 伯乐在线 - CSS魔法 。未经作者许可,禁绝转发!
应接出席伯乐在线 专栏撰稿人。

正文的一些剧情整理本人对此主题材料的解答: 取名 CSS 的类或 ID 时单词间怎么着连接? – 腾讯网

CSS in JS 简介

2017/04/05 · CSS · CSS

原著出处: 阮一峰   

1、

以前,网页开辟有二个标准化,叫做“关心点分离”(separation of concerns)。

图片 1

它的情趣是,各类手艺只承担和煦的园地,不要混合在联合,产生耦合。对于网页开荒以来,主就算二种能力分离。

图片 2

  • HTML 语言:肩负网页的布局,又称语义层
  • CSS 语言:负担网页的体裁,又称视觉层
  • JavaScript 语言:肩负网页的逻辑和交互,又称逻辑层或相互层

轻易说,便是一句话,不要写”行内样式”(inline style)和”行内脚本”(inline script)。举例,上面代码就很不佳(查看完整代码)。

XHTML

<h1 style="color:red;font-size:46px;" onclick="alert('Hi')"> Hello World </h1>

1
2
3
<h1 style="color:red;font-size:46px;"  onclick="alert('Hi')">
  Hello World
</h1>

2、

React 出现今后,这些原则不再适用了。因为,React 是组件结构,强制须求把 HTML、CSS、JavaScript 写在共同。

地点的例证使用 React 改写如下(查看完整代码)。

JavaScript

const style = { 'color': 'red', 'fontSize': '46px' }; const clickHandler = () => alert('hi'); ReactDOM.render( <h1 style={style} onclick={clickHandler}> Hello, world! </h1>, document.getElementById('example') );

1
2
3
4
5
6
7
8
9
10
11
12
13
const style = {
  'color': 'red',
  'fontSize': '46px'
};
 
const clickHandler = () => alert('hi');
 
ReactDOM.render(
  <h1 style={style} onclick={clickHandler}>
     Hello, world!
  </h1>,
  document.getElementById('example')
);

下面代码在二个文书之中,封装了协会、样式和逻辑,完全背离了”关怀点分离”的标准化,很两个人不适于。

而是,那有助于组件的割裂。每种组件包罗了有着需求利用的代码,不借助于外界,组件之间平素不耦合,很便利复用。所以,随着 React 的走红和零部件方式赫赫有名,这种”关切点混合”的新写法慢慢变为主流。

图片 3

3、

外界上,React 的写法是 HTML、CSS、JavaScript 混合在一块儿。不过,实际上不是。以往实在是用 JavaScript 在写 HTML 和 CSS。

React 在 JavaScript 里面完毕了对 HTML 和 CSS 的包裹,大家经过封装去操作 HTML 和 CSS。相当于说,网页的组织和样式都经过 JavaScript 操作。

4、

React 对 HTML 的包装是 JSX 语言 ,那些在种种React 教程皆有详尽介绍,本文不再涉及了,上面来看 React 对 CSS 的包裹。

React 对 CSS 封装特别轻易,便是沿用了 DOM 的 style 属性对象,那一个在前头已经见到过了。

JavaScript

const style = { 'color': 'red', 'fontSize': '46px' };

1
2
3
4
const style = {
  'color': 'red',
  'fontSize': '46px'
};

上边代码中,CSS 的font-size品质要写成fontSize,这是 JavaScript 操作 CSS 属性的约定。

由于 CSS 的卷入极度弱,导致了一多重的第三方库,用来坚实 React 的 CSS 操作。它们统称为 CSS in JS,意思就是采纳 JS 语言写 CSS。根据不完全总括,各样 CSS in JS 的库起码有47种。老实说,今后也看不出来,哪一个库会形成主流。

图片 4

你或然会问,它们与”CSS 预管理器”(比如 Less 和 Sass,包蕴PostCSS)有啥样界别?回答是 CSS in JS 使用 JavaScript 的语法,是 JavaScript 脚本的一有个别,不用从头学习一套专项使用的 API,也不会多一道编写翻译步骤。

5、

前一周,小编见状三个新的 CSS in JS 库,叫做 polished.js。它将有个别常用的 CSS 属性封装成函数,用起来非常有益,充足体现使用 JavaScript 语言写 CSS 的优势。

图片 5

自己认为那几个库很值得推荐,那篇小说的最首要目标,便是想从那么些库来看怎么利用 CSS in JS。

首先,加载 polished.js。

JavaScript

const polished = require('polished');

1
const polished = require('polished');

只假使浏览器,插入上边包车型地铁本子。

XHTML

<script src="; </script>

1
2
<script src="https://unpkg.com/polished@1.0.0/dist/polished.min.js">
</script>

polished.js如今有50三个法子,例如clearfix方法用来清理浮动。

JavaScript

const styles = { ...polished.clearFix(), };

1
2
3
const styles = {
  ...polished.clearFix(),
};

上边代码中,clearFix正是一个平凡的 JavaScript 函数,再次来到一个目的。

JavaScript

polished.clearFix() // { // &::after: { // clear: "both", // content: "", // display: "table" // } // }

1
2
3
4
5
6
7
8
polished.clearFix()
// {
//  &::after: {
//    clear: "both",
//    content: "",
//    display: "table"
//  }
// }

“张开运算符”(...)将clearFix回去的指标进行,便于与任何 CSS 属性混合。然后,将样式对象赋给 React 组件的style属性,那一个组件就能够清理浮动了。

JavaScript

ReactDOM.render( <h1 style={style}>Hello, React!</h1>, document.getElementById('example') );

1
2
3
4
ReactDOM.render(
  <h1 style={style}>Hello, React!</h1>,
  document.getElementById('example')
);

从这几个事例,我们应该力所能致体会polished.js的用法。

6、

下边再看几个很有用的函数。

ellipsis将超越钦点长度的公文,使用简便号替代(查看一体化代码)。

JavaScript

const styles = { ...polished.ellipsis('200px') } // 返回值 // { // 'display': 'inline-block', // 'max-width': '250px', // 'overflow': 'hidden', // 'text-overflow': 'ellipsis', // 'white-space': 'nowrap', // 'word-wrap': 'normal' // }

1
2
3
4
5
6
7
8
9
10
11
12
13
const styles = {
  ...polished.ellipsis('200px')
}
 
// 返回值
// {
//   'display': 'inline-block',
//   'max-width': '250px',
//   'overflow': 'hidden',
//   'text-overflow': 'ellipsis',
//   'white-space': 'nowrap',
//   'word-wrap': 'normal'
// }

hideText用于隐敝文本,展现图片。

JavaScript

const styles = { 'background-image': 'url(logo.png)', ...polished.hideText(), }; // 返回值 // { 'background-image': 'url(logo.png)', 'text-indent': '101%', 'overflow': 'hidden', 'white-space': 'nowrap', }

1
2
3
4
5
6
7
8
9
10
11
12
const styles = {
  'background-image': 'url(logo.png)',
  ...polished.hideText(),
};
 
// 返回值
// {
  'background-image': 'url(logo.png)',
  'text-indent': '101%',
  'overflow': 'hidden',
  'white-space': 'nowrap',
}

hiDPI钦赐高分屏样式。

JavaScript

const styles = { [polished.hiDPI(1.5)]: { width: '200px', } }; // 返回值 //'@media only screen and (-webkit-min-device-pixel-ratio: 1.5), // only screen and (min--moz-device-pixel-ratio: 1.5), // only screen and (-o-min-device-pixel-ratio: 1.5/1), // only screen and (min-resolution: 144dpi), // only screen and (min-resolution: 1.5dppx)': { // 'width': '200px', //}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const styles = {
[polished.hiDPI(1.5)]: {
   width: '200px',
}
};
 
// 返回值
//'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
// only screen and (min--moz-device-pixel-ratio: 1.5),
// only screen and (-o-min-device-pixel-ratio: 1.5/1),
// only screen and (min-resolution: 144dpi),
// only screen and (min-resolution: 1.5dppx)': {
//  'width': '200px',
//}

retinaImage为高分屏和低分屏设置差异的背景图。

JavaScript

const styles = { ...polished.retinaImage('my-img') }; // 返回值 // backgroundImage: 'url(my-img.png)', // '@media only screen and (-webkit-min-device-pixel-ratio: 1.3), // only screen and (min--moz-device-pixel-ratio: 1.3), // only screen and (-o-min-device-pixel-ratio: 1.3/1), // only screen and (min-resolution: 144dpi), // only screen and (min-resolution: 1.5dppx)': { // backgroundImage: 'url(my-img_2x.png)', // }

1
2
3
4
5
6
7
8
9
10
11
12
13
const styles = {
...polished.retinaImage('my-img')
};
 
// 返回值
//   backgroundImage: 'url(my-img.png)',
//  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
//   only screen and (min--moz-device-pixel-ratio: 1.3),
//   only screen and (-o-min-device-pixel-ratio: 1.3/1),
//   only screen and (min-resolution: 144dpi),
//   only screen and (min-resolution: 1.5dppx)': {
//    backgroundImage: 'url(my-img_2x.png)',
//  }

7、

polished.js提供的另外艺术如下,详细用法请仿效文档。

  • normalize():样式表初阶化
  • placeholder():对 placeholder 伪元素设置样式
  • selection():对 selection 伪成分设置样式
  • darken():调度颜色深浅
  • lighten():调治颜色深浅
  • desaturate():裁减颜色的饱和度
  • saturate():扩充颜色的饱和度
  • opacify():调解发光度
  • complement():重返互补色
  • grayscale():将二个颜色转为灰度
  • rgb():钦赐红、绿、蓝三个值,重临一个颜料
  • rgba():钦点红、绿、蓝和折射率四个值,再次回到三个颜色
  • hsl():内定色调、饱和度和亮度五个值,再次来到贰个颜色
  • hsla():内定色调、饱和度、亮度和反射率多少个值,重临一个颜料
  • mix():混合两种颜色
  • em():将像素转为 em
  • rem():将像素转为 rem

目前,polished.js只是1.0版,未来应该会有越来越多的措施。

8、

polished.js再有贰个特征:全数函数暗许都以柯里化的,由此得以拓宽函数组合运算,定制出本人想要的函数。

JavaScript

import { compose } from 'ramda'; import { lighten, desaturate } from 'polished'; const tone = compose(lighten(10), desaturate(10))

1
2
3
4
import { compose } from 'ramda';
import { lighten, desaturate } from 'polished';
 
const tone = compose(lighten(10), desaturate(10))

上边代码应用 Ramda 函数库实现重组运算。Ramda 的用法能够参见作者写的教程。

 

 

1 赞 2 收藏 评论

图片 6

编辑越来越好的CSS代码

2014/01/15 · CSS · 9 评论 · CSS

本文由 伯乐在线 - yanhaijing 翻译。未经许可,禁绝转发!
波兰语出处:Mathew Carella。应接到场翻译组。

编辑好的CSS代码,有助提高页面包车型大巴渲染速度。本质上,引擎要求深入分析的CSS准则越少,性能越好。MDN中校CSS选取符归类成多个重大类型,如下所示,质量依次缩短。

  1. ID 规则
  2. Class 规则
  3. 标签法规
  4. 通用法则

对效能的广泛认知是从SteveSouders在2008年问世的《高质量网站建设进级指南》初始,即便该书中陈列的更加的详细,但您也足以在这里翻看完整的引用列表,也足以在谷歌的《急忙CSS选用器的最棒施行》中查阅更加多的细节。

正文小编想共享部分笔者在编辑高品质CSS中用到的简练例子和指南。这一个都以受到MDN 编写的短平快CSS指南的启迪,并依据类似的格式。

CSS3热身实战——过渡与动画(达成炫耀下拉,手风琴,无缝滚动)

2017/08/04 · CSS · 9 评论 · 动画, 过渡

原稿出处: 守候你   

PostCSS深刻学习:你要求明白什么样

2015/10/28 · CSS · POSTCSS

原著出处: Kezz Bracey   译文出处:大漠   

一旦你想的确的掌握PostCSS的话,你就活该尽快学会PostCSS是什么以及哪些使用它。

在这一个体系中,大家将带您深深摸底PostCSS以及哪些利用PostCSS方法。假如您还并未有做好观念图谋去询问PostCSS能做哪些,那么能够跟着那几个连串步向学习,那个种类将带您步向到CSS的新世界中间。

问题

CSS 类或 ID 命名时单词间连接日常有这两种写法:

  • 驼峰式: solutionTitlesolutionDetail
  • 用横杠(连接符)连接: solution-titlesolution-detail
  • 下划线连接: solution_titlesolution_detail

应当利用哪类写法呢?选用的时候是由于个人习于旧贯依然有别的考虑?

看了下豆瓣,美团,天猫的源码,都是选拔 solution_title 的写法。

制止超负荷约束

一条普遍法则,不要增加不需要的约束。

CSS

// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..}

1
2
3
4
5
6
7
// 糟糕
ul#someid {..}
.menu#otherid{..}
 
// 好的
#someid {..}
#otherid {..}

 

1.前言

在自身的特辑上写了十几篇小说了,都以与js有关的。暂且还尚未写过关于css3的篇章。css3,给笔者的感到到正是,简单,可是很难玩转自如。前几日,就用css3来兑现多个特效,希望那八个特别能让大家受到启发,利用css3做出更好,更炫的卡通效果,何况相比较这多个特效和JS特效的自己检查自纠,希望能支援到是豪门学到CSS3的局地文化。明日那多少个案例能够说是叁个预习只怕热身吧,以往也会写关于CSS3更加好的文章只怕小说,近年来自个儿也是在编排贰个css3的动画库!

PostCSS入门

PostCSS在以惊人的速度发展,並且越加受人接待。愈来愈多的人初叶在了然它,使用它。因为他们发觉到,在类型中使用PostCSS让她们发掘到了眼睛一亮。

图片 7

二〇一四年总共不到140万的下载量,但从二零一四年3月份到十月份早已跨越380万个下载。

Autoprefixer是PostCSS中最盛行的插件,在那之中Google、Shopify、Facebook、Bootstrap和Codepen都在采取那个插件。Wordpress也使用Autoprefixer插件,并且还使用RTLCSS插件。Alibaba接纳了多少个PostCSS插件,以及也在场PostCSS的开销。

而外,Mark Otto也聊起将要Bootstrap v5中引进PostCSS:

Oh, btw—Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.——@Mark Otto

PostCSS刚刚被CodePen.io引用,能够透过CSS设置中装置:

图片 8

PostCSS正在加强,是飞快的滋长,并且尚未丰裕的理由。

本身的答问

第一定特性,那是个纯粹的“代码风格”难题。

怎么是“代码风格”难点?有一部分风味:

  • 技术专门的学业不会硬性规定。就算标准不经常恐怕会提供引导性的建议,只怕一时会有行当大拿出来鼓吹最棒实践。
  • 本性化拾壹分鲜明。也便是萝卜青菜各有所爱、公说公有理婆说婆有理,永无定论。

扯完之后说一下笔者自个儿的习于旧贯:

后人选择符最烂

不仅质量低下并且代码很软弱,html代码和css代码严重耦合,html代码结构爆发变化时,CSS也得修改,那是何其不佳,特别是在大集团里,写html和css的一再不是同一位。

CSS

// 烂透了 html div tr td {..}

1
2
// 烂透了
html div tr td {..}

 

2.接通与动画片概念明白

一句话来讲

PostCSS是怎么?最佳的定义来自于PostCSS自己项目在github上的描述:

“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

一言以蔽之,PostCSS是CSS形成JavaScript的数额,使它产生可操作。PostCSS是基于JavaScript插件,然后施行代码操作。PostCSS自身并不会变动CSS,它只是一种插件,为施行另外的变迁扫除障碍。

精神上是向来不很制PostCSS插件操纵CSS,也正是说它能够适用于其余CSS。只要您能体悟的,你都足以编写三个PostCSS插件,让它来转成CSS。

PostCSS插件能够像预管理器,它们得以优化和autoprefix代码;能够加多今后语法;能够加多变量和逻辑;能够提供完整的网格系统;能够提供编码的快捷形式……还恐怕有不菲浩大。

在此在此之前用下划线

非常重要缘由是在编辑器中双击能够选中;别的自个儿以为下划线美观(纯个人喜欢)。除此以外或许还会有点“小白式严慎”(制止与 CSS 属性名/值弄混、幸免与减号弄混),也许作者的启蒙读本便是选用下划线的。

防止链式(交集)选用符

那和过于约束的动静类似,更明智的做法是简简单单的创导贰个新的CSS类接纳符。

CSS

下划线还是连接符,编写更加好的CSS代码。// 糟糕 .menu.left.icon {..} // 好的 .menu-left-icon {..}

1
2
3
4
5
// 糟糕
.menu.left.icon {..}
 
// 好的
.menu-left-icon {..}

 

css3过渡

化用新手教程的说法,CSS3接通是因素从一种样式渐渐改造为另一种的效果。要兑现那点,必需鲜明两项内容:1.钦赐要增加效果的CSS属性。2.钦定效果的持续时间。

PostCSS不是怎么

实则,使用PostCSS插件你可以做任何你想做的别样职业,但PostCSS相对而言照旧较新,那也致使了有的误会,工具实际上是哪些。

洋英国人(满含自个儿要幸而内)对PostCSS未有二个总体的回想,PostCSS实际是何许,并为此失去了PostCSS能够提供哪些。

进而在大家承袭往下阅读在此之前,让大家澄清一些事务,PostCSS不是怎么着?

当今重大选择连字符

新兴日渐接手或加入了部分外人的档案的次序,接触过各类代码风格。在鬼子的部分连串中接触到大方的应用连字符的命名,看多了以为也易于看。在编辑器中也足以透过“双击并拖动”来选中,所以就逐渐过渡到了连字符。

坚持KISS原则

想象大家有如下的DOM:

XHTML

<ul id="navigator"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="dribble">Dribbble</a></li> </ul>

1
2
3
4
5
<ul id="navigator">
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="facebook">Facebook</a></li>
    <li><a href="#" class="dribble">Dribbble</a></li>
</ul>

上边是相应的准绳……

CSS

// 糟糕 #navigator li a {..} // 好的 #navigator {..}

1
2
3
4
5
// 糟糕
#navigator li a {..}
 
// 好的
#navigator {..}

 

css3动画

化用新手教程的传教,CSS3卡通是基于@keyframes准则内钦定三个CSS样式和动画将渐次从当下的体裁更动为新的体裁。钦点至少那多少个CSS3的动画片属性绑定向二个选取器:1.明确动画的称谓。2.明确动画的时长。

PostCSS不是预管理器

广大开垦人士说他们不愿意舍弃当前应用的CSS预管理器来支撑PostCSS。与此同不常间,他们更欣赏预管理器而不欣赏PostCSS。而实际是,PostCSS并非贰个预管理器

科学,纵然您愿意,你一丝一毫能够把它当做为三个预管理器,但你相对未有像使用预管理器那一个效果。你居然能够承接使用你最心爱的预管理器,並且能整合PostCSS一齐利用。

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:下划线还是连接符,编写更加好的CSS代码

关键词:

上一篇:的居中功效,Chrome开辟者工具不完全指南

下一篇:没有了