When your site grows, the CSS can grow along with it, and the maintenance is no longer trivial. You could break your CSS in to different files and use @import to structure it into one file. But this doesn’t resolve all your architecting and maintenance problems.

Sass is a scripting langauage that is interpreted into CSS. Sass stands for Syntatically Awesome Stylesheets. Sass consists of two syntaxes. The original syntax, called “the indented syntax”, uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules.

Sass enables your you to separate your stylesheets into individual files, and then you can use the @import directive to include your individual files into one master stylesheet.

When you are designing your responisve layout for mobile devices, CSS3 media queries are an essential component on your stylesheets. Let’s discuss how they work and what min-with and max-with work together.

Fonts sizes in CSS can be measured in four different units adding confusion to the web developer on top of having to deal with different browsers. Which of these four units is the best? Finding a definitive answer is difficult.

ZURB’s Foundation framework is a feature-rich, easy to implement, light weight framework for designing responsive web applications. Designed with mobile-first approach in mind, it comes packed with CSS3 media queries, The Grid, reusable HTML5 components and several jQuery plugins to aid interactivity.

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language, most often used to change the style of web pages written in HTML. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.

What is the mobile web? The mobile web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network.

Native CSS variable support is still in its infancy, but Sass affords us a way to set reusable values.

In this article, we go through how JavaScript-based DOM animation libraries, such as Velocity.js and GSAP, are more efficient than jQuery and CSS-based animation libraries. We will discuss how those libraries work, where to use them and what other alternatives are out there for animation.

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default, eleminating the problems with global nature of the CSS namespace.

Interoperable CSS or ICSS is a low-level file format that enables CSS Modules, designed for loader implementers (not for end users).

BEM stands for Block, Element, Modifier. BEM is a stricter standard for naming CSS classes for larger projects, where standards need to be enforced. BEM helps scale your project, and add meaning to your CSS. Therefore it is valuable to understand this convention.

SMACSS stands for Scalable and Modular Architecture for CSS. It is pronounced “smacks” and introduced by Jonathan Snook.

PostCSS is a tool for transforming CSS with JavaScript plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more

ITCSS or Inverted Triangle CSS is a meta framework designed to address some common issues around CSS we encounter today. Introduced by Harry Roberts, it is a sane, scalable, managed architecture for CSS.

rWiting forms in React and Redux can be challenging, having to deal with forms and fields. In this article we are going to build couple of form using an exisiting library sepcifically for Redux called react-redux-form.

Applying changes only for Safari has been always a challenging task. Also adding the fact that Safari has changed since version 6.1 makes it even harder. In this article we are going to discuss Safari CSS hacks.

Web page rendering is an important subject to study in order to optimize page load times, and to understand how to design solutions to cater for that. For understanding how web pages get rendered, we need to study how browsers render a web page.