The aim when writing CSS on any platform is to ensure it is well structured, maintainable and flexible.
To help us do that at Just Eat, we use Sass and PostCSS, which allows us to utilise extra CSS processing features beyond the capabilities of Vanilla CSS.
Below, we'll aim to explain how we use CSS, Sass and PostCSS on our projects, as well as covering the methodologies and best practices that have helped to guide our way of thinking.
When writing CSS for any website, it is important to write styles that are both maintainable and flexible, so that they are easy to extend and can be reused in the future.
There are many CSS methodologies that support this way of thinking, such as SMACSS, Atomic Design) and ITCSS. These all share a lot of common ground when it comes to constructing good CSS; one of main themes being that you should always think about how you can write small, reusable components that can be easily extended later.
We encourage this way of writing CSS, and our styles are structured to reflect this, with base styles defined globally and individual components and modules that extend upon these styles.
N.b. SMACSS and Atomic Design are both recommended reading for anyone working with CSS.
There are a number of great resources outlining CSS Best Practices:
We use a combination of Sass and PostCSS to author our stylesheets.
For more information on how we use these tools, check out our documentation sections on Sass and PostCSS.
We strongly believe in using progressive enhancement so that we can provide a service to as many users as we can. Those using modern browsers will get the best possible experience, with those on older browsers still able to view and use our site.
As part of this effort, we strongly recommend using feature detection over browser or UI sniffing.
Where needed, we use Modernizr to help us do this, and where possible CSS feature queries via @supports (browser support allowing – ironically).
Resources: