background preloader


Facebook Twitter

Build Atomic Design Systems. Book - Scalable and Modular Architecture for CSS. As briefly mentioned in the previous section, a Module is a more discrete component of the page.

Book - Scalable and Modular Architecture for CSS

It is your navigation bars and your carousels and your dialogs and your widgets and so on. This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component. When defining the rule set for a module, avoid using IDs and element selectors, sticking only to class names.

Module example Avoid element selectors Use child or descendant selectors with element selectors if the element selectors will and can be predictable. Styling with generic element The problem is that as a project grows in complexity, the more likely that you will need to expand a component’s functionality and the more limited you will be in having used such a generic element within your rule.

<div class="fld"><span>Folder Name</span><span>(32 items)</span></div> Now we are in a pickle. New Contexts Subclassing. What is OOCSS? Before I get started, I just want to make it clear that this review of OOCSS is simply my take on the methodology and my method of comprehending it.

What is OOCSS?

There seems to be a lot of different views on the topic, and I’m sure I don’t have the perfect answer, but hopefully this article will help others struggling to comprehend OOCSS in one way or another. My take Object oriented CSS (OOCSS) is a methodology of writing reusable CSS that is fast, scalable and maintainable. It’s the first of the popular CSS “systems” (SMACSS & BEM are two other popular systems) that aim at making CSS more modular and scaleable. First introduced by Nicole Sullivan at Web Directions North in 2009, the object oriented concept comes from, as you probably guessed, more traditional engineering practices that are used in programming languages like PHP, Ruby or JavaScript.

Separating structure from skin means to abstract the structure and positioning styles of an object from the presentational styles, or skin. CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS? I’ve been thinking a lot about my CSS authoring, its current state and how it has changed over the years.


Typically when I start a new project I’ll use my own framework Motherplate. It uses SCSS and Compass. Most of the class names were’t originally based on any other framework. Not deliberately anyway. Most developers I know now use Bootstrap. Most projects I work on I typically "own" the CSS. With the rise of Bootstrap, BEM, SMACCs and other frameworks and methodologies, there are common best practice recommendations when it comes to naming your elements. CSS (Cascading Style Sheets) Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. — Wikipedia Back to basics.

Sass/SCSS (Syntactically Awesome Style Sheets) Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. — Sass-Lang In 2007 along came Sass. Sass (Syntactically Awesome Style Sheets) came first. OOCSS/Atomic CSS are Responsive Web Design 'anti-patterns' For many months now, in response to many failed attempts to find a suitable approach to scaling the CSS on the projects I work on, I have been using ‘ECSS’, my own Frankenstein approach to large-scale CSS architecture.

OOCSS/Atomic CSS are Responsive Web Design 'anti-patterns'

It’s detailed more fully in the post, Enduring CSS: writing style sheets for rapidly changing, long-lived projects. Subsequently, in this post, I’m about to argue that an OOCSS architectural approach to a large scale, rapidly changing responsive web site or application is an ‘anti-pattern’. With such a ‘link-bait’ title I need to get some caveats out of the way first: This isn’t an attack on OOCSS, Atomic CSS or any related single responsibility principle (SRP) approaches.

It’s merely my argument that a different approach, depending upon your goals can offer a preferential outcome.I’m not suggesting that the approach I advocate is a panacea to all CSS scaling problems. Writing CSS is easy. It’s therefore important to consider the problems that you have. LESS CSS – Beginner’s Guide - Hongkiat.

CSS Pre-processor has now become a staple in web development.

LESS CSS – Beginner’s Guide - Hongkiat

It ships plain CSS with programming traits such as Variables, Functions or Mixin, and Operation which allow web developers to build modular, scalable, and more manageable CSS styles. In this post, we are going to look into LESS which has been one of the most popular CSS Pre-processors around, and has also been widely deployed in numerous front-end frameworks like Bootstrap. We will also walk through the basic utilities, tools, and setups to help get you up and running with LESS. The Compiler To begin with, we will need to setup a compiler. Here is a glimpse at LESS code: The compiler will process the code and turn LESS syntax into browser-compliant CSS format: There are a number of tools for compiling CSS: Using JavaScript LESS comes with a less.js file which is really easy to deploy in your website.

10 LESS CSS Examples You Should Steal for Your Projects. LESS, Sass and other CSS preprocessors represent an awesome way to extend CSS to be everything a programmer ever wanted.

10 LESS CSS Examples You Should Steal for Your Projects

Variables, mathematical operations, mixins and a lot more make these tools invaluable to coders who can appreciate the benefits of typing less while accomplishing more. One of the most major hurdles to getting started with these tools is simply figuring out just what the heck you’re going to do with them. We’ll help you out in a big way today by hooking you up with ten incredibly useful LESS snippets that you can drop into your projects today.