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 approachRead more →
Everything is an element - from
<a> element to complex module like
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.
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 NamingRead 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.
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.
Keep it simpleRead 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
::before to move all decorative code from HTML to CSS.
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.