Let me introduce myself:
My name is Elad Shechter and I’m working at Walla! News, one of the biggest news companies in Israel for the last 3 years. I have 10 years of experience in web development and especially in CSS and HTML. I came to Walla to make the new generation of websites.
This post is about our case study, for how to build big CSS architecture and reusable for large scale websites.
NOTE: To achieve best practices, I’m showing examples written with LESS, the CSS pre-processor. But you can also achieve the same goals using SASS.
How to Get Started?
First, before I wrote a single line of CSS, I needed to understand the common parts of our website, I imagine that like a tree with inherit layers.
I divided the website to two types of websites:
- Common News Template — have the same header, footer , article section parts and etc’.
- Special Template — every one of them looks different.
Example: common news website near special website.
In first look one might think that there aren't common things with those two types of websites, but in a second look there are common things between them, like:
- Common configs — images ratio, global responsive design breakpoints,…
- Normalize styles
- Global icons
- Mixins (sass or less functions).
Example: for two common news websites
Break Your Styles to Small Parts
This part is extremely important. In order to achieve easy maintenance:
- It easier to understand small parts.
- Because the first, It easier to do refactor, you aren't afraid to change things, if you know you are sync on the same component.
- Small parts will be arrange to big layers, but in some projects we won’t need the all layer only small part.
Our Base Layer
All projects are using this layer:
common Parts for all projects:
- Responsive breakpoints
- Normalize CSS
- External Fonts
- Common Icons & Font Icons
- Common Animations
Only news projects are using this layer.
common Parts for news projects:
- Layout, Grids and Forms.
- Components(header, footer and etc’)
- Sequences of news
How To Use the Layers?
Every project has it’s own folder, and has at list two files, the default.less calls the layer it needs, and add local components if needed. The config.less, that adds more variables or overrides the variables in the config.less on the upper layers(base layer config or news layer config).
Example: for simplest news website:
The first imports are always the global layers, we always add at list the base layer. After that we add the config.less file with local variables.
If we need more local components that are found only in a local project, we will add them after the config.less file, you can see the next example.
Example for special website:
As you can see, in this website we use only the base layer, besides that in every project we can add local components and other stuff, in the same way folders and small files.
Don’t Limit Yourself to Certain Structures
Because everything is written in small files sometimes you will call only parts from a layers, or you can call a all project and add more components to it.
Here are more different examples:
Example 1: (click to zoom)
Sports calls the two common layers and adds is extra components.
World-Cup loads sports(include two common layer ans sports extra layer), and adding is own components.
This is another example of special website that uses the base layer, and some small parts from the news layer, plus some local components.
This is my way of building a big CSS architecture for big scale sites with multiple sub-sites. I will be glad to see more methods of other FED/CSS developers.
Follow me on:
You Can find me in my Facebook groups: