4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。
内联方式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例:
<div style="background: red"></div>
这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <div> 拥有相同的样式,你不得不重复地为每个 <div> 添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。
嵌入方式
嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
示例:
<head> <style> .content { background: red; } </style> </head>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。
链接方式
链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
示例:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。
导入方式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例:
<style> @import url(style.css); </style>
比较链接方式和导入方式
链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import。
小结:我们应尽量使用 <link> 标签导入外部 CSS 文件,避免或者少用使用其他三种方式。
我们开门见山:编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行,但是 CSS 还是算了吧。
在我创建应用的时候,从来都无法从 CSS 中享受到乐趣。但是你也躲不过去,是不是?我是说,我们全神贯注于用户体验,但是如今设计也是不容忽视的部分。
项目刚开始的时候,一切都很美好。你有一些 CSS 选择器,诸如 .title、input、#app 等等,非常简单。但是随着应用逐渐变大,CSS 也越来越糟。你对 CSS 选择器感到困惑。你会发现自己写了一些 div#app .list li.item a 之类的东西。然后你一遍又一遍地写相同的代码。最后你把所有代码都扔到文件末尾,因为你根本不在乎,CSS 烂透了。结果你得到了 500 行根本无法维护的 CSS 代码。
我本人经常和 CSS 苦苦纠缠
今天我的目的是:让你写出更好的 CSS。我想让你回顾一下旧项目,然后想一想:天啊,我怎么会写这样的东西?
但是,你可能会想:好,你说的很对,但是 CSS 框架呢?CSS 框架就是为了帮助我们写出更好的 CSS 代码,不是吗?
当然,但是 CSS 框架也有一些缺点:
既然你关注了这篇文章,那么你一定有自己的原因,对不对?好了,废话不多说,让我们开始学习如何写出更好地 CSS 代码。
注意:这篇文章不是关于如何设计漂亮的应用。本文是关于如何写出便于维护的 CSS 代码以及如何组织代码。
SCSS
我将在我的例子中使用 SCSS。
SCSS 是一个 CSS 的预处理器。从根本上来说,它是一个 CSS 的超集:它增加了一些很酷的功能,例如变量,嵌套,导入和混入(mixins)等。
下面介绍一些我们即将使用的功能。
变量
你可以在 SCSS 中使用变量。主要的好处在于可重用性。我们假设你的应用有一组颜色。主色是蓝色。
那么你处处都用到了蓝色:按钮的 background-color(背景色),标题和链接的 color(颜色)。蓝色无处不在。
突然有一天,你不喜欢蓝色,开始喜欢绿色。
// Declare a variable
$primary-color: #0099ff;
// References a variable
h1 {
color: $primary-color;
}
嵌套
你可以在 SCSS 中使用嵌套。那么如下代码:
h1 {
font-size: 5rem;
color: blue;
}
h1 span {
color: green;
}
可以写成:
h1 {
font-size: 5rem;
color: blue;
span {
color: green;
}
}
可读性更好了,是不是?你可以利用嵌套在更短时间内写出复杂的选择器。
分块与导入
从可维护性和可读性的角度来说,你无法将所有代码都保存在一个大文件中。在实验或构建小型应用时,这种做法尚且可行,但是到了专业的级别……想都不要想。很幸运的是,有了 SCSS 后,我们依然可以继续沿用这种做法。
你可以通过使用前下划线给文件命名,来创建分块的文件:_animations.scss,_ base.scss,_variables.scss 等。
至于导入,你可以使用 @import 指令。例如,你可以这么做:
// _animations.scss
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// header.scss
@import "animations";
h1 {
animation: appear 0.5s ease-out;
}
哈哈!你可能想,你在这里犯了一个错误!应该是 _animations.scss,而不是 animations ;)
非也。如果你使用这种命名方式,聪明的 SCSS 知道你指的是分块文件。
关于变量、嵌套、分块和导入,我们需要了解的就这么多。SCSS 还有很多其他功能:比如混入、继承和其他指令(@for,@if,等等),在此不做一一介绍了。
如果你想了解更多信息,请查看相应的文档(https://sass-lang.com/guide)。文档写得很好,且易于理解。
组织 CSS 代码:BEM 方法论
我记不清曾经多少次在CSS类中使用包揽一切的名字了。比如:.button、.page-1、.page-2、.custom-input。
我们常常不知道如何命名。然而命名很重要。假如你正在构建某个应用,并且由于某种原因不得不将其搁置数月,那该怎么办?还有更糟的,假如有人想把项目拿回去,该怎么办?如果你的 CSS 代码没有恰当的命名,那么乍一看上去很难明白你在说什么。
BEM 可以帮助我们解决这个问题。BEM 是一种命名约定,是英文 Block Element Modifier(块元素修饰符)的缩写。
这种方法可以使我们的代码结构化,并提高模块化和可重用性。现在让我们说一说什么是块、元素和修饰符。
块
你可以把块视为组件。还记得你小时候玩过乐高积木吗?让我们回忆一下小时候。
如果需要建造一个简单的房子,你会怎么做?你需要一个窗户,一个屋顶,一扇门和一些墙壁。这些就是我们的块。它们有着本身的意义。
元素
接下来,你应该如何用你的乐高积木建造一个窗口呢?可能有些积木看起来像框架,如果你把四个这样的积木组装起来,就会得到一个漂亮的窗户。这些就是我们的元素。它们是块的一部分,它们对于建块必不可少。但是,在块外面的时候,它们便无用武之地。
修饰符
现在窗户已经建好了,但是你可能想要一个绿色或一个小窗户。这些我们称之为修饰符。它们是块或元素上的标志,它们用于改变行为,外观等等。
注意事项
示例
以下是一个练习。你可以去你最喜欢或最常用的网站,然后想想看哪些是块、元素和修饰符。
例如,以下是我想象中的 Google 商店:
现在该你了。认真想想哪些地方可以改进。与往常一样,你必须自己搜索、实验和构件,以便更好地满足你的需求。
融会贯通
下面的示例演示了 BEM 的功能(https://codepen.io/thomlom/pen/RJvVdQ)。
写一个博文组件
写多个按钮
组织 CSS 文件:7-1模式
你还跟得上我的节奏吗?很好!现在让我们来介绍如何组织 CSS 文件。这个部分可以真正帮助你提高工作效率,并帮助你立刻找到需要修改的 CSS 代码。
为此,让我们了解一下 7-1 模式。
你可能会想,我从未听过这种模式。
相信我,这很简单。你必须遵守以下两条规则:
7 个文件夹:
主文件
你需要将以上所有内容导入到该文件中。
@import abstracts/variables;
@import abstracts/functions;
@import base/reset;
@import base/typography;
@import base/utilities;
@import components/button;
@import components/form;
@import components/user-navigation;
@import layout/header;
@import layout/footer;
...
我知道你觉得以上内容有点太多,一时难以接受。这个架构适合于大型项目,而非小项目。下面我们介绍一种更适合小项目的做法。
首先,你不需要 vendors 文件夹。可以将所有外部 CSS 代码放在头部的link标签内。接下来,如果你的应用只有一个主题的话,可以省略 themes 文件夹。最后,你可能不会有大量页面特定的风格,所以也 pages 也没必要。好了,现在只剩下 4 个文件夹了。
然后,你有两个选择:
sass/
_animations.scss
_base.scss
_buttons.scss
_header.scss
...
_variables.scss
main.scss
你可以随便选。
你可能会想:你说服了我!但是我该如何使用呢?我是说,哪些不支持scss文件的浏览器该怎么办呢?
说的好!这是我们的最后一步,我们现在就来学习如何将SCSS编译为CSS。
从 SCSS 到 CSS
首先,你需要 Node.js 和 NPM(或 Yarn)。
我们将使用一个名为 node-sass 的包,它可以让我们将 .scss 文件编译为 .css 文件。
它的 CLI(命令行界面)相当容易使用:
node-sass <input> <output> [options]
它有多个选择,但我们只使用其中两个:
如果你是一个好奇心很重的人(我希望如此,因为开发人员应该好奇!)那么,请点击这里查看完整的文档(https://github.com/sass/node-sass#command-line-interface)。
现在我们知道需要用哪些工具。其余的工作更简单。只需按以下步骤操作:
touch index.html
mkdir -p sass/{abstracts,base,components,layout} css
cd sass && touch main.scss
{
...
"scripts": {
"watch": "node-sass sass/main.scss css/style.css -w",
"build": "node-sass sass/main.scss css/style.css --output-style compressed"
},
...
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”css/style.css”>
<title>My app</title>
</head>
<body>
<h1 class=”heading”>My app</h1>
</body>
</html>
然后就可以了,你准备好了!你可以在编程的时候运行npm run watch,并在浏览器中打开index.html文件。如果你想缩小CSS,只需运行npm run build。
补充
添加实时重新加载
你可能希望添加实时重新加载以提高工作效率,而无需手动重新加载本地index.html文件。
你可以按照以下简单的步骤操作:
{
...
"scripts": {
"start": "npm-run-all --parallel liveserver watch",
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
},
...
}
现在如果你运行 npm run start,就可以立即看到代码的变更。
添加自动前缀
我们设置好了开发工具,太棒了!现在,让我们来谈谈构建工具,特别是:自动前缀(Autoprefixer)。
它是一个工具(尤其是postcss插件),它可以解析CSS,并利用这些值(https://caniuse.com/)将提供商的前缀加入到CSS规则中。
实际上,在构建网站时,你可能会使用一些并非所有浏览器都完全支持的新功能。因此,提供商方案可以提供对这些功能的支持。
以下是一个示例:
-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
-ms-animation-name: myAnimation;
你可能会想,这写起来太乏味了。这就是为什么我们需要自动前缀来帮助我们的CSS代码获得浏览器的兼容,而不用增加额外的复杂性。
那么我们如何用更聪明地构建CSS呢?
还有最后几步,请坚持看下去,马上就结束了。
{
...
"scripts": {
"start": "npm-run-all --parallel liveserver watch",
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
"compile": "node-sass sass/main.scss css/style.css",
"prefix": "postcss css/style.css --use autoprefixer -o css/style.css",
"compress": "node-sass css/style.css css/style.css --output-style compressed",
"build": "npm-run-all compile prefix compress"
...
}
现在当你运行 npm run build 时,可以生成经过压缩的 CSS 代码,并且添加了提供商前缀!太棒了是不是吗?
但是你知道更酷的是什么吗?我为你设置了一个代码仓库(https://github.com/thomlom/scss-boilerplate),以帮助你迅速开始:)
如果你想知道我是如何在项目中应用这些技术的,请点击这里查看我的代码仓库(https://github.com/thomlom/portfolio)和结果(https://thomlom.github.io/portfolio/)。我希望你能通过这些例子更深入理解。
呼~,今天就说这么多!现在,你已准备好可以开始编写具有可维护性、模块化和可重用性的 CSS 代码了。
我希望你喜欢这篇文章。欢迎在下方留言分享你的想法。
原文:https://medium.freecodecamp.org/how-to-get-better-at-writing-css-a1732c32a72f
作者:homas Lombart,软件开发。
译者:弯月,责编:屠敏
“征稿啦”
CSDN 公众号秉持着「与千万技术人共成长」理念,不仅以「极客头条」、「畅言」栏目在第一时间以技术人的独特视角描述技术人关心的行业焦点事件,更有「技术头条」专栏,深度解读行业内的热门技术与场景应用,让所有的开发者紧跟技术潮流,保持警醒的技术嗅觉,对行业趋势、技术有更为全面的认知。
如果你有优质的文章,或是行业热点事件、技术趋势的真知灼见,或是深度的应用实践、场景方案等的新见解,欢迎联系 CSDN 投稿,联系方式:微信(guorui_1118,请备注投稿+姓名+公司职位),邮箱(guorui@csdn.net)。
eb开发是一个很依赖经验的领域,然而这对初学者很不友好。
知识一旦脱离了应用场景就会变得晦涩、空洞,且知识本身也满足“二八定律”,“抓大放小”是提高学习效率的关键。
下文向大家介绍了HTML和CSS之间的关系。内容选自《HTML 5与CSS 3核心技法(全彩)》一书。本书主线清晰,讲解简洁,并提供在线效果演示效果,非常适合小白上手!
1 HTML是骨架
很难想象一个人在桌前对着一块砧板坐一夜,隔一会儿就噼里啪啦敲几下,一会儿哭一会儿笑,是一种什么景象。事实上,在猫眼中我们就是这样的。只不过我们面对的是一块会发光的“砧板”而已。但为什么这块“板子”如此吸引人?“上网”到底是在做什么?
获取信息。
重点在“信息”,一种看不见摸不着却真实存在的东西。无论“1 + 1 = 2”这段字符显示得多么粗糙,都不会影响它传递了完整的信息,以及这条信息的内在逻辑是正确的,不是吗?HTML就是用来盛放最核心的内容——信息。
所以,在CSS和JavaScript出现之前,HTML就出现了。这是必然的,因为如果连最核心的信息都无法有效传递,那围绕着它的一切装饰物和附属品都是毫无意义的。
除满足承载核心信息的需求外,HTML还解决了一个重要的问题——将信息结构化。
试想有这样一篇文章:
背影
我说道:“爸爸,你走吧。”他望车外看了看,说:“我买几个橘子去。你就在此地,不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是一个胖子,走过去自然要费事些。我本来要去的,他不肯,只好让他去。我看见他戴着黑布小帽,穿着黑布大马褂,深青布棉袍,蹒跚地走到铁道边,慢慢探身下去,尚不大难。可是他穿过铁道,要爬上那边月台,就不容易了。他用两手攀着上面,两脚再向上缩;他肥胖的身子向左微倾,显出努力的样子。
评论
王花花 大概,天底下的父亲,老去的样子都有些共同的特质吧
李拴蛋 我们都不愿意承认他老了
刘备备 想吃橘子...
此时上面的信息基本没有结构,只能通过断行或缩进尽可能让内容更易读,编辑时的状态就是其最终的显示效果。
HTML就派上了用场,见下方的代码:
代码
<artcle>
<h1>背影</h1>
<p>
我说道:“爸爸,你走吧。”他望车外看了看,说:“我买几个橘子去。你就在此地,不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是一个胖子,走过去自然要费事些。我本来要去的,他不肯,只好让他去。我看见他戴着黑布小帽,穿着黑布大马褂,深青布棉袍,蹒跚地走到铁道边,慢慢探身下去,尚不大难。可是他穿过铁道,要爬上那边月台,就不容易了。他用两手攀着上面,两脚再向上缩;他肥胖的身子向左微倾,显出努力的样子。
</p>
</artcle>
<section id="comment-list">
<div class="title">评论</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概,天底下的父亲,老去的样子都有些共同的特质吧</span>
</div>
<divclass="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我们都不愿意承认他老了</span>
</div>
<div class="comment">
<strong class="username">刘备备</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
一头雾水没关系,后面我们会细说每一个部分。总之这段内容给人感觉反而更繁琐。但繁琐是代价,重要的是现在这段信息有结构了。这就意味着计算机可以通过结构的规律将其显示得更便于阅读(甚至是交互)。
以下是不加任何装饰性内容直接让浏览器呈现的结果:
效果
这是纯HTML在没有引入任何装饰时的显示效果。很明显,即便是这样也比纯文字状态易读了许多。但注意,HTML本身没有样式,字体大小和粗细有变化的原因是浏览器的默认样式起了作用,与HTML没有关系。而重点就在这里,这意味着我们可以基于这个结构设计自己的页面效果,见下方的示例。
代码
<style>
body { font-family: 'Microsoft YaHei', sans-serif; }
#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }
#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }
#comment-list .title {
color: #777; font-size: 1.1rem; padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
</style>
<artcle>
<h1>背影</h1>
<p>
我说道:“爸爸,你走吧。”他望车外看了看,说:“我买几个橘子去。你就在此地,不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是一个胖子,走过去自然要费事些。我本来要去的,他不肯,只好让他去。我看见他戴着黑布小帽,穿着黑布大马褂,深青布棉袍,蹒跚地走到铁道边,慢慢探身下去,尚不大难。可是他穿过铁道,要爬上那边月台,就不容易了。他用两手攀着上面,两脚再向上缩;他肥胖的身子向左微倾,显出努力的样子。
</p>
</artcle>
<section id="comment-list">
<div class="title">评论</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概,天底下的父亲,老去的样子都有些共同的特质吧</span>
</div>
<div class="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我们都不愿意承认他老了</span>
</div>
<div class="comment">
<strong class="username">刘备备</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
效果
这里只是举了一个小示例。你可以轻而易举地让页面的风格千变万化,进而让用户体验有所差异(或差距)。“千变万化”因CSS灵活、强大,“轻而易举”因HTML简洁、有序。结构的力量!
CSS是皮肤
一个充满活力的生态是不满足于现状的。人们在适应了便利地浏览核心信息之后,就会想方设法改进浏览的体验。比如,让自己的博客以多栏显示,以便在视觉上区分不同板块;修改字体颜色,以便强调一些重要信息等。
起初的做法是——准备几种特殊的标签,专门用于样式的指定。涉及布局的地方,如果没有特殊标签就直接用表格布局。以下没有任何样式的状态(以下代码均不需要看懂):
代码
<h1>标题</h1>
<p>
从前有座山,山里有个庙,庙里...
</p>
效果
此时的页面结构下。
如果想让标题居中,则需要给其添加元素<center>,见下方的示例。
代码
<center>
<h1>标题</h1>
</center>
<p>
从前有座山,山里有个庙,庙里...
</p>
效果
此时的页面结构如下。
居中标题的目的确实达到了,但是有一个很大的问题:如果我改变主意了,不想让其居中了,那么我还得再去将<center>元素去掉。这对于简单的页面确实可行,但如果是复杂的页面,这种做法的工作量就是噩梦,因为每个地方都得修改,无论是对齐方式、颜色、背景色,还是大的布局都必须通过修改结构才能完成。这种做法的最大问题是可维护性太差,很多时候为了一种样式要修改很多不必要的结构,枯燥、重复、削足适履的工作太多,基本上写一次就再也不想改了。
这个问题亟待解决,而且解决方案还要兼容现有规则。现有规则是什么?HTML的语法及结构。不过既然HTML已经有结构了,为什么不好好利用呢?
以前面示例中的文章页面为例,如果我们想更改标题,是否可以先统一选中所有标题,然后说明想要什么样式规则呢?就像下面这样:
所有h1 元素听着
对齐方式 居中。
字体颜色 黑色。
如果想将所有段落字体放大,则像下面这样:
所有p 元素听着
字体大小 150%。
这种方式的确很高效!同时这个规则与HTML语法无关,相当于另一种语言。这样结构和样式就不会互相影响,结构是结构,样式是样式,两者隔离开了。如果想修改样式,则完全不需要劳HTML大驾,只需要修改样式文件即可,更便于管理和维护。这就是CSS,只不过其语法更简洁。
下面以修改标题对齐方式为例:
h1 { /* 所有h1 元素听着 */
text-align: center; /* 对齐方式 居中 */
}
通过批量选择和处理,极大地提高了开发效率,降低了维护成本,四两拨千斤。
(完)
图书推荐
《HTML 5与CSS 3核心技法(全彩)》
表严肃 著
本书能够为自学Web开发初学者建立一套HTML与CSS的核心知识框架,同时借助丰富的示例让初学者有一个愉悦、轻松的学习过程。
想从事前端开发的,可将本书作为学习的起点。正从事前端开发的,可将本书作为速查的手册。
*请认真填写需求信息,我们会在24小时内与您取得联系。