CSS Syntax Extensions and Optimization

PostCSS plugins offer a wide variety of syntax extensions. 0:00 Some even provide Sass like syntax. 0:04 With the language extension plugins, 0:06 you're able to nest selectors, use variables, create mix ins and 0:09 extends, even import partials, just like you would with Sass. 0:13 In other words, PostCSS could do enough of what Sass offers that it could be your go 0:19 to styling method. 0:23 And since the plugins are written in JavaScript, 0:24 your CSS is processed faster than Ruby Sass and LibSass even. 0:28 So, if you're working with a large CSS file, 0:33 that speed can make a big difference in your bill times. 0:34 The PreCSS plugin pack combines all the plugins that use Sass like syntax and 0:38 features into one plugin, so you don't have to manually install each one. 0:43 Now, I'm not gonna cover the language extension plugins in this workshop, 0:49 but now that you know how to install and run a plugin, you can try them out for 0:52 yourself later. 0:56 No matter what plugins you use or which features and syntax, ultimately, 0:58 what's most important is the final CSS output you serve the browser. 1:02 PostCSS plugins also offer an easy way to optimize your CSS for production. 1:07 The output CSS currently displays all the comments and spaces. 1:13 And the CSS rules are fully expanded, 1:18 which can be helpful when debugging in development. 1:21 But it's best not to deploy your CSS to production this way, since every line, 1:24 space, and comment can make the file size larger than it needs to be, 1:29 especially if this was a big project. 1:33 So you can optimize your build file for production by stripping out 1:36 all the comments and spaces and compressing the CSS to one line. 1:40 This process is called minification. 1:45 So the plugin I'm going to install to optimize my CSS is called cssnano. 1:47 In the terminal, I'll install the cssnano plugin as a dev dependency 1:54 by typing npm install --save-dev, followed by cssnano. 2:00 Then I'll require cssnano in my gulp file. 2:10 And like the rest of our plugins, I'll add cssnano to the processor's array. 2:22 I'll save my gulp file, bring up the terminal, and 2:32 run gulp to start the watcher. 2:36 And now when you save your source CSS, cssnano minifies your CSS 2:40 to make the final CSS as small as possible for your production environment. 2:47 So now the entire style sheet is compressed to one line. 2:52 cssnano also removes empty rules and declarations. 2:57 It converts longhand properties into the shorthand. 3:01 And it shortens hex values to three digits, wherever possible. 3:05 cssnano will even output the smallest CSS representation of a color value. 3:11 For example, if you define the hex value for 3:16 the color red, so let's say #ff0000. 3:21 It will output the actual keyword value red because 3:26 the word red is shorter than ff0000, creating less output. 3:32 We've just barely scratched the surface of the PostCSS plugin ecosystem. 3:43 Hopefully now you're more curious and excited about its possibilities. 3:47 In this workshop, you learned that PostCSS is a different approach 3:50 to writing CSS because it's not limited to any one type of functionality. 3:53 You can customize and configure PostCSS to align it with the way you like to work. 3:58 And it can help solve problems that other tools like CSS preprocessors may 4:03 not be able to solve yet. 4:07 You can even build your own solutions to problems by building a custom plugin and 4:09 sharing it with the developers in the PostCSS community. 4:13 So be sure to check the teachers' notes for resources on plugin development and 4:16 the latest in PostCSS. 4:20 Thanks everyone. 4:22