What is Magento CSS?
The major benefit of CSS is creating a uniform look of several or even all pages of the website. Instead of manually defining styles for each element, a developer specifies all the visual configurations in a single CSS document. It allows saving a great amount of time and effort. Moreover, any alterations in the style are automatically applied to all the pages it was utilized for. Besides, CSS is compatible with multiple devices and browsers, which means no sophisticated optimization is required.
Due to all these benefits, CSS have become an important aspect of Magento frontend development. If you strive to be a good Magento developer, Magento CSS knowledge and skills are a must.
Where are Magento CSS files located ?
After the compilation, all the resulting Magento CSS files will be located at the following path:
pub/static/frontend/<Vendor_Name>/<Theme_name>/<locale>
where
- <Vendor_Name> – name of the vendor folder that contains your theme,
- <Theme_name> – name of your theme,
- <locale> – name of the current site location (for instance, en_US).
These files are formed based on the LESS and CSS original files, located in various places in Magento. In order to fully understand this system, let’s have a look at the core Magento style files:
The style files have the following structure:
- /<Namespace>_<Module>/web/css is the location of style files for different modules;
- /web/css is the location of core style files.
The list of the core theme files, located in the /web/css theme folder:
- styles-m.less contains the core website and mobile devices styles. This file contains other files, for instance, _styles.less.
- styles-l.less contains styles for desktop devices. It also contains other files, for example, _styles.less.
- _styles.less is a compound file that contains other style files. According to Magento file naming standards, the underscore symbol (“_”) signifies that the file is not used separately, but is a part of other files.
- /source is the folder that contains configuration files that call Magento UI library mixins.
- /source/_theme.less is the file that contains new values for standard variables.
- print.less – styles for the printed website version.
- /source/_variables.less is the file where the user variables are commonly placed.
Apart from core style files, you can connect additional files to your theme. As a rule, they will be located in your theme folder at the /web/css path.
If you want to change style files, we recommend doing it in the source files. We also strongly discourage you from changing the resulting files. The changes will be overridden in case of the further compilation.
How to add custom Magento CSS files in Magento 2?
Where to change styles in Magento 2? You can change them either in the added LESS or CSS files or in the Magento module files. If you want to add your own styles for a specific module, you can use 2 files in the module folder in your theme:
_module.less contains the basic styles for the module in which it is located. As a rule, we create this file in the theme when we want to change the styles of this module significantly.
_extend.less contains additional styles for the module in which it is located. As a rule, we create this file to add minor changes to the module or styles for new elements that have not been stylized in the current module before. If we don’t want to rewrite existing module styles, creating such a file will be the best way.
CSS in Magento 1 vs Magento 2 Comparison
Generally, Magento 2 has an improved process of working with CSS files, compared to Magento 1. Apart from this, Magento 2 has not only standard CSS files, but also the following items:
- built-in LESS compiler allows you to work with LESS files by compiling these files into final CSS files. Using LESS greatly simplifies and speeds up the process of creating styles for a site since we get additional LESS functionality (in short, these are variables, mixins, nesting code formatting and others).
- UI library uses the LESS preprocessor and consists of LESS files, which use sets of mixins and variables to style all the main site elements (such as buttons, forms, navigation and others). You can find a full list of elements available for styling here. The UI library allows you to significantly simplify the process of site styling. For example, you can change several UI library variables and get a significantly transformed website.
Another difference is the location of the CSS theme files. In Magento 1, they were situated at the following path:
/ skin / frontend / <Vendor_Name> / <Theme_name> / css.
While theme style files in Magento 2 are more structured and divided into common style files (<Theme_folder> / web / css) and module style files (<Theme_folder> / <Namespace> _ <Module> / web / css), to which they apply.
Wrapping it up
We hope that you got a comprehensive guide of CSS in Magento 2 and understand how to use it in your website. Moreover, we tried to share all our CSS knowledge and explain how to apply it in Magento. If you have any questions or comments, feel free to leave them down below.
Conclusion
We hope you learned everything there is to know about CSS in Magento 2 and how to apply it to your website. In addition, we attempted to offer all of our experience and demonstrate how to apply it in Magento. If you have any questions or comments, please use this CONTACT FORM to submit them.
Are you looking for a Magento development team with a lot of experience? Custom solutions are available from Magesolution. Our Magento Customization Service definitely is the best choice for your business. Don’t miss them
