css进阶问题,CSS进阶指引
你不要觉得CSS没什么重要可言?最近几年他成为一个热门的话题,很多人都在讨论他。CSS并不是一个简单的事情,前端开发者可以使用他将页面制作的更佳漂亮。看得更远一些,我们更关心的是网站的性能以及如何制作出更好的网站。在本文中,我想分享我最近几个月的学到的有关于CSS编码的知识。作为一个程序员,我真正感兴趣的事情是框架(Architectural)部分。我觉得写CSS应该需要去改变,为此我深挖了很多知识。我搜索了好的程序、工作流和原则。这篇文章将带领大家和CSS一起旅行,很多人都说写CSS并不是编程,我就不同意,我说写CSS同样是有趣的,富有挑战性的。
CSS预处理器
让我们一起面对吧,在世界上写CSS并不是一件可笑的事情。CSS预处理器看起来就像CSS,但他更像一个魔术师一样,使用一些魔法会产生有效的CSS代码。这让你的样多和浏览器之间新增加了一层,这样不是更加的糟糕吗?看上去是这样,但事实不是这样的,因为CSS预处理器提供了一些真正有用的特性。
连接(Concatenation)
我认为最有价值的东西是连接你的文件。我相信,你知道使用@import来引用你的.css文件,告诉浏览器获取这个文件。这样做,浏览器需要增加一个请求,这样有点麻烦,因为你可能有很多个这样的文件。增加额外的请求,使你的程序性能变得更低。如果您使用CSS预处理器语言,这个问题将不会存在。他们只会编译你样式文件中单个.css文件。
扩展(Extending)
LESS和Sass是最主要的两个CSS预处理器。我们都支持扩展。虽然他们的工作方式略有不同,但他们的想法是一样的。你可以做一个基本的类(通常称为mixin)和一群属性,然后在另一个选择器导入这些属性,如:
CSS Code复制内容到剪贴板
// less
.bordered(@color:#000) {
border:dotted2px@color;
}
.header { .bordered; }
.footer { .bordered(#BADA55); }
// 编译出来的CSS
.header {
border:dotted2px#000000;
}
.footer {
border:dotted2px#bada55;
}
这里的问题是,如果你没有定义一个参数的mixin,例如刚才的示例:
CSS Code复制内容到剪贴板
.bordered {
border:dotted2px#000;
}
这是最后编译的CSS文件,无论你是否使用都没有任何关系。因为他是一个有效的选择器。在Sass中我们可以做得更灵活一些。他有混合(mixins)、扩展(extends)和占位选择器(placeholders)(如果您想看到他们之间的区别,我强烈建议您阅读这篇文章)。接下来我们简单看看Sass是如何工作和编译的:
CSS Code复制内容到剪贴板
// sass
@mixin bordered($color:#000) {
border:dotted2px$color;
}
.header { @include bordered; }
.footer { @include bordered(#BADA55); }
//编译的CSS
.header {
border:dotted2pxblack;
}
.footer {
border:dotted2px#bada55;
}
它看起来和前面几乎相同,但如果我们秋看第二个placeholder的用例:
CSS Code复制内容到剪贴板
// sass
%bordered {
border:dotted2px#000;
}
.header {
@extend %bordered;
}
.footer {
@extend %bordered;
}
// 编译的CSS
.header, .footer {
border:dotted2px#000;
}
这个有两个优势,首先不会编译出.bordered类名,其次会使用组合选择器,合并相同的样式,使代码变得更加简洁。
配置(Configuration)
LESS和Sass都支持变量,你可以调用这些变量,将将他们作为属性的值:
CSS Code复制内容到剪贴板
// sass
$brand-color:#009f0A;
...
h1 {
color: $brand-color;
}
这是一个很好的特性,因为你可以储存一些重要的东西,比如说颜色或者网格的宽度,将他们存放在同一个地方,如果你需要修改一些不经常改动的代码,会变得非常的简便。
另一个好处理,可以使用变量的插值,如下面演示的方法:
CSS Code复制内容到剪贴板
// sass
@mixinborder($side) {
border-#{$side}:solid1px#000;
}
.header {
@includeborder("left");
}
// 编译的CSS
.header {
border-left:solid1px#000;
}
针对预处理器(Against the preprocessors)
预处理器是一种工具,您要使用得先要有一个适合的环境。如果你思念将其集成到你的应用程序中,也需要额外的编码。
如果你不想让你的代码变得混乱,你需要有一个观察机制,用来监测你的文件。如果这样,你每个项目开始时就需要运行这个监测机制。
通常开发人员只看到.less或.sass文件,但是输出是什么非常重要。你可能有写得很好的Sass代码,但这并不意味着,你最终会有很好的CSS代码。可能会有一些特异性的问题,所以需要定期检测编译的版本。
BEM好的,我找到了一个新的好玩工具。这个预处理器可以节省大量的时间,但他不能为你写出好的结构。首先,我开始考虑是一个命名约定,让我们来看以下的HTML标签:
XML/HTML Code复制内容到剪贴板
css进阶问题,CSS进阶指引相关推荐
- HTML+CSS小白入门与进阶教程
HTML+CSS小白入门与进阶教程 本文旨在让你快速了解HTML语法结构,通过实例操作快速从无到有的入门与进阶.Html语言学习的特点有点像刚开始学word软件,word的功能就像html标签,用多了 ...
- 前端进阶试题-CSS篇
人呐都不知道,自己不可以预料. 一个人的命运啊,当然要靠自我奋斗.但是也要考虑历史的行程. 我绝对想不到我一个学设计的,怎么就开始写代码了呢? 但是经理同志对我讲:公司已经研究决定了. 后来我念了两首 ...
- 初识HTML(四)进阶:CSS基础、常用属性
文章目录 什么是css? css语法定义 css实例 背景属性 opacity属性 文本属性 链接样式 行标签与块标签 border边框 margin外边距 padding填充 前言: 本章节将学习到 ...
- html 层次选择器,5.CSS层次选择器-CSS进阶
五.CSS选择器 选择器,就是用一种方式把我们想要的那一个标签选中.把它选中了,你才能操作这个标签的CSS样式. CSS中有很多把你所需要的标签选中的方式,这些不同的方式就是不同的选择器. 在2.CS ...
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯...
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- 滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
- CSS基础:CSS的上下文之层叠上下文
CSS的上下文之层叠上下文 看到层叠,大家一定会联想到定位元素会是的元素之间发生"遮挡",而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分. 本文 ...
- 在css样式中隐藏元素,用JS改变的元素CSS样式,css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式: 方法一:document.divs.style ...
- CSS基础:CSS的上下文之BFC
CSS的上下文之BFC 看到这个名词,可能会有些陌生,但其实 上下文 = 区域,如果这么理解的话就会有行级上下文.块级上下文.flex上下文等等有一定排列规则的区域,我们今天只聊一聊 块级格式化上下文 ...
- 浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从 什么是CSS ...
最新文章
- 四川高中计算机学校图片,四川2021年100分能上计算机学校吗
- OAuth2.0的四种授权方式
- python变量和运算符
- list java语法_java基础语法 List
- C#实例:datagridview单元格合并
- Hibernate4+Spring JPA+SpringMVC+Volecity搭建web应用(二)
- 商业智能BI和报表的区别?
- C# ashx生成的验证码
- 尼尔森十大可用性原则
- SQL获得当前时间函数(MySQL)
- 三星note9刷Android9,【极光ROM】-【三星NOTE9 N960X-9810】-【V21.0 Android-Q-THB】
- 写一份竞品分析文档的思路(模板)
- 新加坡政府企业架构:问题、实践和趋势(2008)
- 【视频转码】ubuntu视频转windows视频
- 为你的掘金和 GitHub 设定个性域名
- 基于PHP+MySQL的图书馆图书借阅系统
- No.8 CA证书和SSH服务
- h5 版活体检测、视频活体检测
- 【C++】栈的应用:逆波兰式的实现
- MSP430 5xx/6xx Watchdog看门狗编程实例
热门文章
- 复盘,一个纸巾机创业项目是怎么失败的
- 75 道 JavaScript 面试题
- 用计算机读心书,423世界读书日,线上线下共读华章
- GIS是什么?『总览篇』
- C++ Reference: Standard C++ Library reference: C Library: cstdio: FILE
- Linux下存储多路径软件MultiPath源码分析
- Dubbo原理与实践(2)
- 基于ssm高校科研成果管理系统 java ideamysql
- “+智能”时代 华为如何引领中国制造走向“智”变?
- html转成cshtml通用篇