Web
Ralph Mason, Jul 21

Decoding CSS Positioning: A Master Class with Paul O'Brien

Paul answers anything and everything about CSS positioning — from floats and relative, absolute and fixed positioning to table display and even flexbox.
HTML & CSS
Angela Molina, Jul 21

Translating CSS for Paged Media with Rachel Andrew

Last week we spoke with Rachel Andrew, a CSS Working Group Invited Expert about CSS for paged media. Here's a recap of your questions for her.
9 COMMENTs
HTML & CSS
Pavels Jelisejevs, Jul 21

Visual Regression Testing with PhantomCSS

Pavels covers an increasingly important topic in front-end development — how to perform visual regression testing. The tool of choice? PhantomCSS.
2 COMMENTs
HTML & CSS
Louis Lazaris, Jul 20

20+ Docs and Guides for Front-end Developers (No. 9)

Louis Lazaris has another installment of our docs and guides series. This post includes learning resources for JavaScript, Angular, CSS, and lots more.
4 COMMENTs
HTML & CSS
Gajendar Singh, Jul 14

CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!

Gajendar Singh looks at the huge range of possibilities available to developers via CSS filters and how to use each one.
6 COMMENTs
HTML & CSS
Hugo Giraudel, Jul 12

SitePoint's Tiles: A Case Study in Components, Theming and Flexbox

Hugo Giraudel uses SitePoint's tiles as a case study for component encapsulation, theme management and flexbox.
4 COMMENTs
HTML & CSS
Patrick Catanzariti, Jul 06

Front-End Development in an Internet of Things World

Patrick Catanzariti looks at how the Internet of Things may affect front-end web development in the coming years and how to plan ahead.
10 COMMENTs
WordPress
Ahmad Ajmi, Jun 30

WordPress Theme Automation With Gulp

Ahmad Ajmi looks at automating your web development workflow using Gulp, in particular, how to do so when you're managing a WordPress theme.
1 COMMENT
HTML & CSS
Nitish Kumar, Jun 29

Introducing the CSS text-align-last Property

Nitish Kumar looks at the text-align-last property, how it can be used and its various cross-browser quirks to keep an eye out for.
15 COMMENTs
HTML & CSS
Baljeet Rathi, Jun 27

A History of CSS Image Replacement

Baljeet Rathi explores the history of the many CSS image replacement techniques used by web developers to this day and looks at their pros and cons.
5 COMMENTs
HTML & CSS
Pavels Jelisejevs, Jun 21

Enabling Upcoming CSS Features with PostCSS

Pavels continues his exploration of PostCSS, covering how to implement new properties and values from upcoming CSS specifications today using PostCSS.
11 COMMENTs
HTML & CSS
Simon Codrington, Jun 16

Quick Tip: Add Favicons Quickly and Easily to Your HTML

Simon covers a simple way to add favicons to your website using the Real Favicon Generator web service.
3 COMMENTs
HTML & CSS
Craig Buckler, Jun 14

7 PostCSS Plugins to Ease You into PostCSS

Are you confused by PostCSS? Are you worried about complicating your build process? Don't be - Craig reveals how and why you should use it.
5 COMMENTs
HTML & CSS
George Martsoukos, Jun 09

Quick Tip: How z-index and Auto Margins Work in Flexbox

George Martsoukos looks at Flexbox and how to use z-index and auto margins in your CSS layouts.
Design & UX
Maria Antonietta Perna, Jun 09

20 Inspirational, Free Tools For Better Typeface Pairing

We have access to a wider set of web fonts than ever before, but choice can be a tyranny. Luckily Antonietta has 20 tools to help you better pair type.
5 COMMENTs
HTML & CSS
Baljeet Rathi, Jun 07

Five Ways to Hide Elements in CSS

Baljeet Rathi guides beginners through the various CSS methods available for hiding elements on a web page and how they differ.
10 COMMENTs
Design & UX
Alex Walker, Jun 07

Why SVG Image Hosting is Hard (... and How to Do It)

SVG is powerful, but finding a place to put your image is harder than it should be. Here's a scalable, reliable, free SVG image hosting method.
4 COMMENTs
HTML & CSS
Nitish Kumar, Jun 02

Introducing the CSS clip-path Property

Nitish Kumar explores the CSS clip-path property and how to use it to clip portions of elements.
4 COMMENTs
HTML & CSS
Hugo Giraudel, Jun 01

Inline CSS in Jekyll

Hugo Giraudel looks at how to inline critical CSS and other CSS styles in the head of a Jekyll website.
Mobile
Mark Brown, May 31

Quick Tip - Installing the Ionic Framework for HTML5 Apps

Mark Brown covers installing the ionic framework and using it for creating performant and native-like HTML Apps.
4 COMMENTs
HTML & CSS
Miriam Suzanne, May 30

Jump Start Sass: Architecture in Sass

jsass

The following is a short extract from our recent book, Jump Start Sass, available for free to SitePoint Premium members. Print copies are sold in stores worldwide, or you can order them here. We hope you enjoy this extract and find it useful.

Architecture has always been one of the major pain points in CSS development. Without any variables, control directives, macros, or object inheritance, CSS code tends to be long and repetitive—a single ever-growing file. While it’s technically possible to split plain CSS into multiple files that reference each other with @import, the additional HTTP requests make that a poor solution. As you’ve seen, Sass has an answer for every piece of the architecture puzzle—but what’s the best way to put it all together?

Ask ten experts, and you’ll receive ten different answers—most of them involving (or aided by) Sass. OOCSS, SMACSS, Atomic Design, ITCSS, and BEM are all popular systems for CSS architecture, but there are many more. If you’re using a front-end framework such as Bootstrap or Foundation, there might be some architectural opinions already built in.

These are all solid systems, none of which were designed with your project in mind. CSS architecture is hard, so it’s a mistake to trust any one-size-fits-all solution. There is no “right” answer that works for every team on every project. We’d recommend learning them all, and then mashing together the best parts to create a system that works well for you.

Let’s start with a broad discussion of the building blocks, and then look at the ways we can fit them together.

Multiple Files and Folders

Breaking your code into multiple files is one key advantage to using a preprocessor, and forms the basis of any architecture. With Sass, there’s no harm in breaking your code into the smallest logical units and organizing it into multiple files and folders. We recommend taking full advantage of it.

Sass has bestowed new power on the CSS @import rule, allowing you to combine Sass and CSS files during compilation so they can be sent to the browser as one single file. This is the only place where Sass has stepped on the toes of an existing CSS directive, so it behaves differently in Sass than it did in CSS.

CSS Imports

As mentioned, the CSS @import directive allows you to reference one CSS file from another. Importing is handled by the browser and requires additional HTTP requests—since the importing file has to be parsed before the @import directive is discovered. If you have a chain of files importing each other, those imports will happen in sequence, blocking the document from rendering until all the CSS has loaded. For that reason, most people avoid CSS imports entirely.

Using CSS imports, you can reference another CSS file using relative or absolute paths, even adding a media query rule for conditional imports. Even though Sass provides different functionality under the same at-rule, there are various cases in which Sass will fall back to the vanilla CSS output, such as when:

  • an imported file has a .css extension

  • a filename begins with http:// or https://

  • the filename is a url(..) function

  • @import has any media queries

The following will compile to standard CSS imports, even in Sass:

[code language="css"] @import 'relative/styles.css'; @import 'http://absolute.com/styles.css'; @import url('landscape.css') screen and (orientation: landscape);[/code]

Sass Imports and Partials

Sass imports look similar to CSS imports, but the imported files are compiled into one single output file, as though their contents (including variables, mixins, functions, and placeholders) were copied and pasted into place before compilation. This type of Sass import will only work on files with .sass or .scss extensions, but you can leave the extension off when importing (as long as there are no similarly named files). In fact, we recommend dropping the extension whenever you can, for simplicity. It’s also possible to import multiple files in one command, or import files into a nested context:

2 COMMENTs
HTML & CSS
Simon Codrington, May 26

Quick Tip: Single Character Transforms with CSS and JS

Simon Codrington looks at how to animate individual characters using CSS animations and some simple jQuery.
3 COMMENTs
Design & UX
Alex Walker, May 26

Make Your Own Responsive SVG Graphs & Infographics

It doesn't matter how crisp your SVG text is if it's too small to be read. Responsive SVG lets you prioritize the important parts of you graphic.
6 COMMENTs
HTML & CSS
Adrian Sandu, May 25

Front End Development after Internet Explorer

Adrian Sandu explores modern web development features that are available to developers since Microsoft ended support for Internet Explorer 6-10.