Making CSS Easier with Turbine: Using Nested Selectors
In this second part of a series, I explore in detail another useful ability provided by Turbine. It consists of parsing a couple of nested CSS selectors that are coded by using the Python-like syntax required by the library.
Making CSS Easier with Turbine: Using Nested Selectors (Page 1 of 2 )
If you ever thought that making your style sheets files shorter and tighter, using CSS constants, and even styling your web page elements using an object-oriented syntax could only be accomplished in some kind of parallel universe, stop! Take a look at Turbine, a handy library written in PHP which lets you perform all of the aforementioned tasks (and many more) by means of an intuitive syntax, very similar to the one used in Python.
Naturally, if you've read the first part of this series, you're already familiar with using Turbine at a basic level. In that article I explained how to install and configure the library’s main options, and how to use it for parsing a simple CSS file.
At this initial stage, it was clear to see that the convention followed by Turbine is fairly easy to follow when coding CSS files. Each set of rules must be indented in a consistent fashion (regardless of whether tabs or spaces are used for this purpose), which will let the library do its “magic” without generating erroneous and unexpected results. Got that point? Great.
And now that you know how to create shorter and more compact CSS files, thanks to the functionality provided by Turbine, it’s time to explore a few other features provided by the library. In keeping with this idea, in this second installment of the series I’m going to explain how to use it for implementing nested CSS selectors, without having to write long lines of code.
Want to see a concrete example that shows how to accomplish this in a snap? Then start reading!
Review: parsing a basic CSS file with Turbine
Before discussing how to work with nested CSS selectors using the shortened syntax allowed by Turbine, I’d like to spend a few moments recalling the example created in the preceding tutorial, which showed how to parse a basic CSS file by means of the library.
Having clarified that, here’s the web page that passes to Turbine the CSS file that needs to be processed:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Parsing a CSS file with Turbine</title> <link rel="stylesheet" href="css.php?files=styles.cssp" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>Parsing a CSS file with Turbine</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> <div id="content"> <h2>Main content section</h2> <div class="subsection"> <h3>First subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="subsection"> <h3>Second subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="subsection"> <h3>Third subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div id="footer"> <h2>Footer section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> </div> </body> </html>
That looks pretty understandable, right? As you can see above, the process of parsing a specific CSS file with Turbine is reduced to passing to the library (or to its “css.php” file, to be more exact) a “file” query string argument containing the name of the file in question. This processing task allows you to write compact CSS code, like the section shown below:
body padding: 0 margin: 0 background: #000 font: 0.9em Arial, Helvetica, sans-serif color: #fff p margin: 0 0 10px 0 #wrapper width: 960px margin: 0 auto #header, #footer padding: 20px #content padding: 20px overflow: hidden #content .subsection float: left width: 240px padding: 20px margin-right: 20px background: #00f
As you can see, Turbine lets you strip off all the semicolons and curly braces from your CSS code, as long as each set of rules is properly indented via tabs or white spaces. Here’s the final version of the previous CSS file, once it has been parsed by the library:
There you have it. A well-formatted and valid CSS file has been generated from the tighter version shown previously. This is quite impressive, considering that the entire parsing process took only a simple HTTP request. As I stated in the introduction, however, Turbine is capable of doing many other clever things, not just processing “shortened” CSS files at a basic level. These include the ability to code nested selectors by using only the indentation rules that you saw in earlier examples.
Therefore, in the following segment I’m going to discuss this feature in more detail, so that you can learn its driving logic very quickly.
Style Sheets 
CSS: Margins Overview
