Approach

Main Principles

How do you scale your frontend for thousands of pages? How do you name your selectors and organize CSS? ApplePie gives you and approach to build your frontend faster, keep code maintainable, easy to read and standard-based. It brings reasonability predictability to CSS and HTML it is a lot easier to build great web applications.

Components approach

Read more →

Everything is an element - from <a> element to complex module like .slideshow. Treating this elements as interface components allows you to write more modular and flexible code and gives you ability to use this components inside application and even across multiple applications without re-implementing them.

Start creating interface components instead of doing page by page markup!

Most of modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your interface and CSS in terms of modular and reusable components.

Standardized Naming

Read more →

The more you do frontend development and write your own stylesheets, the more you begin to value using good names in your code. Naming is one of the most difficult and controversial activity of a developer. CSS selectors should be easy to read, they must be descriptive but not too long and of course they should follow unified code style.

Define interface components using class selectors only. Avoid IDs or tags selectors because they cause issues.

Do we really need to make up custom and tricky class names for all those elements that we've already implemented for hundreds of times? Most of common interface components already have their own names, we already use them in every day life talking to designers or other developers. Naming conventions can help us here.

Rather than making up your own tricky class names to insure 100% uniqueness name components with their real understandable names.

Keep it simple

Read more →

As a web developer you read more code than you write, so it's quite important to keep your code simple and clear. HTML code is a place to start getting clearer.

Avoid lots of nested elements or wrapper elements that aren't needed or needed only for styling. Consider using pseudo elements ::after and ::before to move all decorative code from HTML to CSS.

Use minimum number of HTML elements with which you can achieve desired result.

Do not overload HTML tags with lots of CSS classes. Three classes used for styling purposes should be enough for a single component. If you find yourself adding multiple presentational classes to a single element - this means you might need single class modifier that defines all component's presentational features.

Avoid adding more than 3 classnames to a single element. According to OOCSS any component consist of class name that defines component structure and class modifier if needed.