I wanted to take a few minutes to talk about where to put your custom CSS, since we will be talking about it a ton on this site. This is less of a tip, and more of a reference document. With X there are 4 places we can place custom CSS, and each place has its own pros and cons. We will walk through them and answer your questions.
But I Want Clean Code! (You say)
Now, there is lots of CSS we can drop into the style.css file and try to keep the HTML as clean as possible. I just hope you keep an open mind to the benefits of other options.
Alright, with that said, let’s dig in.
Inline Style – On Element CSS
The X Theme comes with Cornerstone, and within Cornerstone you will find many pre-created elements for things like headlines, images, alerts, grids, list and so on. Almost every single element comes with a ID, Class and Style field. Any CSS placed inside the Style field will be applied to the element when the page is rendered. Let’s take a basic example. You add a Text element and in the style field you add ‘color: #000;’. The CSS rule will be applied to the DIV HTML tags that wrap around all of the text.
It is important to note that the CSS is not, strictly, placed on the element in this case. If it where you would see it on the P HTML tags in the page. Instead it is on the HTML tag that wraps around the area, and the rules are applied to things within that group. In other instances, like with a Image element or Custom Headline element the CSS is stored on the actual HTML element. You would need to check each element to see how it is handled.
You want to use CSS in this manner sparingly. If you applied a CSS rule to 20 buttons, and then decided to change the look you would need to edit all 20 buttons. If you have a button or a headline where you want to change the look for one instance then you can use the Style field.
Internal Stylesheet – Custom CSS on the Page
When we talk about Stylesheets, there are two types: internal and external. External stylesheets are files, like the style.css file we will talk about later. Internal stylesheets are CSS placed inside the HEAD HTML tags on the page. X Theme compiles its internal stylesheet from two sources – the page/post and the Customizer. We’re going to talk about the page/post first, then the Customizer in the next section.
If you navigate to the Gear icon in Cornerstone and then select Custom CSS you can enter CSS rules. Anything entered here will only appear on the internal stylesheet for this page, and none of the others. This is great if you want to change the look of a page, but not across the site. For example, maybe you are creating a landing page and the buttons and headlines need to look different.
The CSS editor for the page highlights and bracket matches, making writing CSS easier. Also, your updates are live so you can see them immediately.
Internal Stylesheet – Customizer
As mentioned above, X will compile CSS from both the Page’s Custom CSS area and the site’s Customizer for the Internal Stylesheet.
CSS added to the Customizer will apply to all pages on the site, as it will be loaded into the HEAD tags on all pages. This is a great place to put CSS for the header, the navbar or other above the fold areas. Placing the CSS here will have it affect the page immediately and you won’t get an re-renders as the external stylesheet is loaded.
The Global CSS editor also supports highlighting and bracket matching, making it easier to add and edit your CSS.
External Stylesheet – style.css
The style.css file is part of the X Theme, but we never want to edit that file. Instead we want to install a X-Child Theme and edit the style.css file in there. If you edit the style.css in the main X Theme files then when you update the theme those changes can be overwritten and lost. Updates to X do not change the X-Child Theme files, so any edits are saved.
Changes to styles.css are good for parts of the page that are ‘below the fold,’ or which the user can’t see when they first log into the site. CSS added to the style.css file will be applied to all pages on the site.
You will need to edit the files locally. I suggest using an application like Atom as it provides highlighting, code completion and more and it is free.
X is flexible, and that is one of the great things about it. These options make it easy to place CSS if the place more relevant to the task at hand, and to do so easily and quickly. As always, if you have questions please ask!