精通PostCSS：构建高性能现代化网页样式 - CSDN文库

需积分: 10 123 浏览量更新于2024-07-20 收藏 5.64MB PDF 举报

"Mastering PostCSS for Web Design" 是PACKT在2016年出版的一本关于PostCSS的专业指南，旨在帮助读者掌握利用PostCSS进行高效、高性能且易于维护的网页样式设计的方法。这本书详细介绍了如何利用PostCSS简化样式表的编写过程，并添加现代的动态样式功能到网页中。随着内容的深入，读者将学习如何通过PostCSS的模块化架构提高CSS代码的可维护性。书中的知识点涵盖了： 1. 添加mixin和变量支持：学习如何在PostCSS中实现类似于SASS和Less的mixin和变量功能，同时支持条件语句。 2. 代码嵌套：探索不同的嵌套方式，如BEM（Block Element Modifier）和标准的嵌套方法，以优化PostCSS代码结构。 3. 媒体查询优化：了解如何利用PostCSS构建高性能的媒体查询，以适应各种设备和屏幕尺寸。 4. 动态样式元素：学习如何处理图像、字体、网格、SVG以及Retina显示，利用现有预处理器和PostCSS的功能增强网页视觉效果。 5. 使用插件和API扩展PostCSS：熟悉PostCSS的插件生态系统，学习如何通过API创建自定义的预处理器。 6. 自定义预处理器实践：按照书中指导，动手构建一个完整的自定义预处理器，并在不同网站（如WordPress）上进行测试。 7. 自定义语法与预建语法：在PostCSS中编写自定义语法，同时兼容Less、SASS或Stylus等预建语法。 8. 支持未来CSS：学习如何使用当前的CSS3类来预先准备对CSS4的支持，使你的代码更具前瞻性。这本书对于想要提升CSS编写效率、追求高性能和模块化代码的前端开发者来说，是一份宝贵的资源。通过阅读和实践，读者可以全面理解并掌握PostCSS的强大功能，从而在网页设计中创造出色且易于维护的CSS代码。

[ ix ]

Preface

As a developer, I'll bet you have a perfect workow—you either write styles using

plain vanilla CSS or use one of the current processors, such as SASS or Less, to create

them. You'll add vendor prexes using the likes of Autoprexer—either manually or

using a tool, such as Grunt or Gulp.

Sounds familiar? Why would you want to disturb something if it works for you, right?

Trouble is, a friend or colleague has started talking about a new processor by the

name of PostCSS—they've piqued your interest sufciently to want to nd out

more about what it is and how it works.

Well, welcome to the fast-growing ecosystem that is PostCSS! By itself, the tool

doesn't do anything, but when paired with the right plugins (and there are hundreds

available for use), it has the potential to become a really powerful processor for you.

Gone are the days when we have to depend on a monolithic library such as SASS

or less. Instead, we can pick and choose exactly which plugins to use based on our

project requirements. PostCSS is an immensely quick processor to use; the question

is, are you ready for the ride?

Here's hoping the answer is yes; if so, let's make a start.

What this book covers

Chapter 1, Introducing PostCSS, kicks off our journey with an introduction to the

world of PostCSS, exploring its features and how we can use this ecosystem to

transform basic code into valid CSS styles that we can use within our projects.

You will discover the benets of using this ecosystem and how its architecture

and modular approach allows us to put together a processor that is tailored

specically for our needs.

Preface

[ x ]

Chapter 2, Creating Variables and Mixins, takes a look at some of the basic concepts that

are familiar to users of existing processor technologies, such as variables and mixins.

You will learn how to transition them to PostCSS and discover how the benets of

using these techniques can transition through to using PostCSS.

Chapter 3, Nesting Rules, explores how existing processors, such as SASS or less, take

advantage of concepts such as nesting to reduce the amount of code we need to write

and how we can replicate the same functionality within our PostCSS processor.

Chapter 4, Building Media Queries, walks us through the basics of adding responsive

support to websites using PostCSS and media queries. You'll learn how to retrot

support for older websites and browsers, and explore how we can take things further

with the advent of CSS4 media queries and provide support today within PostCSS.

Chapter 5, Managing Colors, Images, and Fonts, examines the plugins available for

handling and manipulating images, colors, and fonts within PostCSS. We will

work through a number of examples to illustrate how both images and colors can

be manipulated within PostCSS, such as creating image sprites or altering colors

using palettes within the system.

Chapter 6, Creating Grids, takes us on a journey through constructing the skeleton

of a website using grids—we will explore the basic concept behind using grids and

discover some of the plugin options available for creating them within PostCSS.

We will work through some examples using the Bourbon Neat grid system, before

replicating the examples with PostCSS-equivalent plugins and adding responsive

capabilities to the resulting code.

Chapter 7, Animating Elements, begins with a quick recap of using JavaScript to

animate content, before switching to using CSS for animation, and how you can

transition through to using PostCSS. We will explore using some of the more

well-known libraries, such as Animate.css, before creating a quick demo using

PostCSS and learning how to optimize our animations using PostCSS.

Chapter 8, Creating PostCSS Plugins, teaches us how plugins can be used to extend

PostCSS, and takes us through a journey of exploring the typical architecture of such

a plugin. You will then take a look at some example plugins before working through

creating your own plugins using the boilerplate code available and before testing

and making the plugins available for download by users from the Internet.

Chapter 9, Working with Shortcuts, Fallbacks, and Packs, starts by examining some of

the shortcut plugins and packs available before exploring how we can supplement

them with creating our own shortcut plugins. You will also discover how you can

lint and optimize your code using one of the plugin packs available for PostCSS

and learn how to provide fall-backs to PostCSS code to help maintain support for

older browsers.

Preface

[ xi ]

Chapter 10, Building a Custom Processor, pulls together some of the techniques we've

covered thus far in the book to produce a custom processor that we can use as a basis

for transforming code in our projects. You will explore how to optimize the output

before adding source map and vendor prex support and then testing it on a website.

You will then round off the chapter with a look at extending the processor to use the

CSStyle framework to allow you to write code that works for both SASS or PostCSS.

Chapter 11, Manipulating Custom Syntaxes, introduces us to writing custom syntaxes

using the API and explores some of the options available for parsing code written

using syntaxes such as SASS or less. We work though some examples of parsing code

using PostCSS before converting the output into something that can be displayed on

screen or saved to a le. We will also add in support for highlighting our code using

the midas library.

Chapter 12, Mixing Preprocessors, shows us how we can begin to mix processors as

an aid to make the transition to using PostCSS. We will take a look at the Pleeease

library before installing it and using some of its features. We will then set up a

compilation process before using it to make changes to a standard WordPress theme.

Chapter 13, Troubleshooting PostCSS Issues, takes a look at some of the more common

issues we might experience when using PostCSS, such as the "taskname not in our

gulple" error. We will also take a look at what to do next if all else fails. We will

cover the methods for getting help with an issue or logging details of a bug within

either the core PostCSS system or one of its plugins.

Chapter 14, Preparing for the Future, covers some of the possible options for supporting

future style standards from what people know as CSS4. You will also explore some

of the risks involved and how you can replicate support using existing plugins

available today or extend them to increase support for new CSS4 selectors.

What you need for this book

All you need to work through most of the examples in this book is a simple text

or code editor, a copy of NodeJS (for your platform), Internet access, and a browser.

I recommend installing Sublime Text 3; it works well with Node and Gulp, which

we will use throughout the book.

Some of the examples make use of additional plugins; most (if not all) can be

installed directly from within NodeJS. Details are included within the appropriate

chapter along with links to view the plugin source code and documentation.

剩余413页未读，继续阅读

vanridin

粉丝: 108
资源: 1187

最新资源