Css Folder Structure
Where CSS files are located within our old Magento sites
We override the default location for CSS in Magento and place all our files under our package name. We have three package names that we can use. Look for one of the folders and you should find all the CSS files within each folder. If the website contains both folders, you will need to check the package name of the website to work out which folder is correct. Most of the time there will only be 1 folder so this should not be an issue. The locations are:
or our new responsive location
Our 3 sub folders for older Magento websites
Under our main package folder, we have 3 sub folders. These are called base, default and the domain of the website. Each are used for different purposes and each contain CSS files that are used on the website. The base CSS is sent to the browser first, then the default CSS and finally the domain CSS. This means we can override values depending on which folder you use. Our main folders are:
or our new responsive location
Our cache files
Under our 3 CSS folders, you should see our cache files. These are all named styles.css. Each styles.css file is a collection of CSS from other files. The styles.css is a temporary file which should never be edited. If you place anything within the styles.css file, it will eventually get wiped and you will lose all your CSS. Therefore never edit this file and never add extra CSS into this file. The styles.css files are located at:
/skin/frontend/magentocrystalcom/base/styles.css (do not edit this file)
/skin/frontend/magentocrystalcom/default/styles.css (do not edit this file)
/skin/frontend/magentocrystalcom/NAMEOFTHEME/styles.css (do not edit this file)
or our new responsive location
/skin/frontend/rwd/NAMEOFTHEME/styles.css (do not edit this file)
Our base directory contains our global files that are shared between all websites that our company builds. This directory should never be edited because the files may be overwritten the next time we upgrade a website. The directory contains very basic styles for headings, links, images, divs, html 5 parts and many more elements. It also contains our basic styles for our ecommerce websites. By having these CSS stylings already present within our builds, it allows us to cut down on the amount of CSS code we need to build a website. By having these CSS styles pre-setup also ensures styles are reset correctly and that clearfixes have been added to divs. If you would like to know more about the clearfix div system, read our best clearfix ever page.
The default directory is the directory that is shared by websites within your Magento build. For example if we had www.domain1.com.au and www.domain2.com.au within the one Magento build and we placed our CSS files within this directory, both websites would receive these files when they are viewed. This allows us to use the same CSS stylings between similar websites such as ones from different countries which use the same template.
This directory is specifically for a single website. This is where you will put most of your styles unless you are working on multiple websites at once. The styles within this directory will only effect the site that the directory pertains to. Therefore you don't run the risk of effecting other sites when placing your styles within this directory.
This directory is our newer folder location and is used for responsive websites. All styles for the website are located in this area.
Splitting up our CSS into files
Over the years we've been a part of many website builds and a regular issue we had with a lot of the builds was that large hard to manage CSS files were used. A lot of these were called styles.css but other names such as template.css or main.css would be used. These files grew and grew as time passed and became messier and messier. It was incredibly difficult to ensure all developers kept the files neat and tidy especially if they were under time pressures. Obtaining some of the these files from existing websites which we took over was also problematic. We would find a complete mess of CSS in these files and to fix the problem was a task our clients may not want to pay for. A lot of the time we had to continue to use these messy files until the website was completely rebuilt. So we needed a solution which didn't involve such large files.
Lots of CSS files
It's very rare to find companies that split up their CSS into very small files like we do. Some companies split up the CSS into maybe 4 files but these can become large over time. So we split up our CSS into their smallest components. For example a logo on our website will have a separate CSS file named logo.css which contains all our stylings for the logo. Our contact form will also have a css file such as form-contact.css. A featured products block maybe called featured-products.css and contain all our CSS just for that part of the website. We've found that by splitting up our CSS into very small files we can get many advantages which include:
- Being able to copy CSS files over to other websites
- Being able to edit just the CSS that you need to limiting errors from occurring
- Keeping our CSS simplified in many files instead of placing everything into a few large files
- Allowing automatic version control so we know which parts of our CSS were edited when
- Allowing certain parts of our website to be more secure by never editing those files
CSS sub directories
If we were to place all our CSS files in the one directory, we would end up with a lot of files in that directory making it harder to find what we need. We therefore split our CSS files into multiple directories allowing us to better manage the files. Our directories are:
or our new responsive locations
The global directory should contain our basic element styles such as links, images, headings, paragraphs, hr, spans, divs etc. These are the very basic elements which are used throughout a website. It also contains a few helper CSS styles such as 'right' which can be used to float images right and 'hide' which can be used to hide elements on a page. The basic directory is like a CSS reset style sheet plus basic styles in one. A very basic website could be built with just these styles.
Our blocks directory is for parts of the website that are either resused over multiple pages or for parts that may be used on multiple pages. Examples of blocks are the logo of a website, contact forms, contact details, footer links, the main navigation, category navigation, breadcrumbs and more. If you're unsure where to put your styles, you should put them in this directory.
When styling specific pages, stick your styles in one of these files and ensure that the file name matches the url of the page. This makes it easy to know which files are related to which pages. Sometimes you may not be able to match the name exactly for example a product details page.
The structure of a website is generally based on 1, 2 and 3 column layouts. These include divs, asides, sections, headers, footers and other generic and HTML 5 elements. All our structual stylings should be placed in our template-parts directory. This includes background colours, images, margin and paddings for our structure. If our website had all its content removed, what would be left is our structure and all these stylings would be in this directory
Lots of directories
Thus far we have mentioned a lot of directories and within these directories will be a lot of files. Once you are used to the structure it should become second nature and you won't need to even think about it. The whole point of having so many files is so everything is split up into their own sections which makes it easier to transfer styles between sites. It also allows us to override styles for specific websites. If we were to do this with one large file, it would become very cumbersome. Below is a list of all our directories together for you to view
Global files, do not touch these
Files for multiple related domains
Files for specific domains, most of your CSS will be in this directory
Files for our responsive theme, all of your CSS will be in this directory