{"id":587,"date":"2007-02-06T17:09:07","date_gmt":"2007-02-06T16:09:07","guid":{"rendered":"http:\/\/www.roumazeilles.net\/news\/en\/wordpress\/2007\/02\/06\/css-combining-styles\/"},"modified":"2007-02-26T09:00:17","modified_gmt":"2007-02-26T08:00:17","slug":"css-combining-styles","status":"publish","type":"post","link":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/2007\/02\/06\/css-combining-styles\/","title":{"rendered":"CSS: Combining styles"},"content":{"rendered":"

CSS (Cascading Style Sheets) are a very powerful way to apply styles to an HTML page. It has the advantage of removing most of the formatting (styling) and putting it in a single location. However, in my first tries I tended to create a lot of styles which where very similar one to each other.<\/p>\n

For example, I would write:<\/p>\n

p {\r\n        margin:0px 10px 5px 10px;\r\n        font-size:13px;\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n        color: #000000\r\n}\r\npre {\r\n        margin:0px 10px 10px 10px;\r\n        font-size:13px;\r\n        color: #000000\r\n}\r\nol {\r\n        font-size:13px;\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n        color: #000000;\r\n}\r\nul {\r\n        font-size:13px;\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n        color: #000000;\r\n}<\/pre>\n
I wanted to improve and optimize all this. It took me several steps to get it. The first (nearly obvious one since it is described clearly in all CSS tutorials and books) was to group exactly identical styles (like ul<\/code> and ol<\/code>, in my example), leading to the following:<\/p>\n
p {\r\n        margin:0px 10px 5px 10px;\r\n        font-size:13px;\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n        color: #000000;\r\n}\r\npre {\r\n        margin:0px 10px 10px 10px;\r\n        font-size:13px;\r\n        font-family: Courier, \"Courier New\", monospace;\r\n        color: #000000;\r\n}\r\nul, ol {\r\n        font-size:13px;\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n        color: #000000;\r\n}<\/pre>\n
No big deal, but it is reducing the amount of redundancy.<\/p>\n
After that point, I was left in the dark with trying to group styles which where not exactly identical and so could not obviously be grouped. What I needed was to understand that a style can be defined in separate (additive) declarations, like:<\/p>\n
p {\r\n        margin:0px 10px 5px 10px;\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n}\r\np {\r\n        font-size:13px;\r\n        color: #000000;\r\n}\r\npre {\r\n        margin:0px 10px 10px 10px;\r\n        font-family: Courier, \"Courier New\", monospace;\r\n}\r\npre {\r\n        font-size:13px;\r\n        color: #000000;\r\n}<\/pre>\n
Now, it becomes nearly obvious how to combine styles even when they are not fully identical: Group what can be grouped, keep the rest separated.<\/p>\n
p, pre {\r\n        font-size:13px;\r\n        color: #000000;\r\n}\r\np {\r\n        margin:0px 10px 5px 10px;\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n}\r\npre {\r\n        margin:0px 10px 10px 10px;\r\n        font-family: Courier, \"Courier New\", monospace;\r\n}<\/pre>\n
The base CSS for my web site is freely readable and you can study it following the link: roumazeillesv5.css<\/a><\/div>\n
The final code for my example is then:<\/p>\n
p, pre, ul, ol {\r\n        font-size:13px;\r\n        color: #000000;\r\n}\r\np {\r\n        margin:0px 10px 5px 10px;\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n}\r\nul, ol {\r\n        font-family: Arial, Helv, Helvetica, Geneva, sans-serif;\r\n}\r\npre {\r\n        margin:0px 10px 10px 10px;\r\n        font-family: Courier, \"Courier New\", monospace;\r\n}<\/pre>\n
15 lines instead of 21, nearly no redundancy left (none except what I chose to keep for readability); This has been leading to significant simplifications of my style sheets. I hope it will be the case for you too.<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS (Cascading Style Sheets) are a very powerful way to apply styles to an HTML page. It has the advantage of removing most of the formatting (styling) and putting it in a single location. However, in my first tries I tended to create a lot of styles which where very similar one to each other. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,37,38,34,2],"tags":[],"class_list":["post-587","post","type-post","status-publish","format-standard","hentry","category-blog","category-create-a-web-site","category-new-web-site","category-tech","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/posts\/587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/comments?post=587"}],"version-history":[{"count":0,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/posts\/587\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/media?parent=587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/categories?post=587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/tags?post=587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}