Best practices for typography.css

Permalink
I find that a good 80% of my development time is spend tweaking css so I'm trying to make this task as simple as possible. Right now I'm fighting with converting someone else's theme and the css is all over the place. I'd like some advice on the best way to use typography.css.

I understanding that typography.css is used solely by tinyMCE to style the contents of the 'Content' block while in edit mode so I would think this file would contain relatively few rules that are mirrored in the theme's main css file. What I find, however is that many themes, including the core themes, pour tons of rules into typography.css and tons of other rules into the main.css and then include both css files in the header. Most themes also include typography.css after the main.css which means that typography styles trump the styles in main.css which seems backwards to me.

I also see /*customization*/ stuff in typography.css and in main.css which makes no sense to me.

My inclination is to put as little as possible into typography.css such as base font and H1->H4 styles and call it first and then put the vast majority of the rules into main.css.

Any thoughts and advice welcome.

mhawke
 
VidalThemes replied on at Permalink Reply
VidalThemes
It depends really, if you/client needs to be able to customise fonts, background colours etc from the dash, then typography.css contains your customisable styles and is essential, if customisable styles are not needed and you dont need any specific styles for tinyMCE then there is no need for you to have typography.css at all.

Not sure who would put the customise comments into the main style sheet as i'm fairly sure they wont work.
adajad replied on at Permalink Reply
adajad
The customization part of a theme is there only to allow some flexibility for the users of the theme, and that is only to allow them to change some colors and perhaps add their own css styles directly from the dashboard (themes -> customize).

Whether it's in main.css or typography.css doesn't matter. To get the customization to work you need to import your stylesheets with
$this->getStyleSheet('main.css');


If you don't supply a typography.css then your styles won't be applied in TinyMCE while you are editing. Personally I don't mind, but editors might want to see the actual styles when they use the WYSIWYG editor.

And just a note... in 5.7 a new editor and editing interface will be introduced and the use of typography.css will be deprecated.
mhawke replied on at Permalink Reply
mhawke
Thanks for the input everyone. Through looking at page_theme.php, it's clear that the getEditableStylesList() function parses all stylesheets in your theme folder, not just typography.css. Since we're all looking for faster render times, I wonder if this constant parsing on every page load slows things down if your style sheets are large? You don't get the advantage of cached stylesheets if the server has to parse them and inject any changes.

Why not deploy only typography.css as the page's single stylesheet and isolate any specific tweaks that need to be applied to make tinyMCE render differently than the page by using something like this:

*/ Apply to page and tinyMCE */
h1,h2,h3,h4,h5 {color:maroon;}
h1 {font-size:2.8em;}
h2 {font-size:2.2em;}
h3 {font-size:2.0em;}
h4 {font-size:1.8em;}
h5 {font-size:1.4em;}
/*tinyMCE specific to make Headings slightly to fit better in the editor window */
#tinymce h1 {font-size:2.0em;}
#tinymce h2 {font-size:1.8em;}
#tinymce h3 {font-size:1.6em;}
#tinymce h4 {font-size:1.4em;}
#tinymce h5 {font-size:1.2em;}
/* End of tinyMCE specific */


I realized after I posted my question that tinyMCE will be deprecated in 5.7 which makes this all moot.

Hallelujah! I hate tinyMCE.