Why does this CSS look like some programming language class definition and then there are a mix of this style with upper cases for elements. There is also the normal one, all lowercase. Is there any specific reason for the first set of style, like it’s some library they use? It’s from Google and why is this inconsistent? The CSS link https://www.blogger.com/static/v1/widgets/124887373-widget_css_bundle.css
.PageList LI A {
font-weight: 400;
}
.PageList LI.selected A {
font-weight: bold;
text-decoration: none
}
.PlusBadge {}
.PlusFollowers {}
.PlusOne {}
Another set of styles from the same file:
section, nav, article, aside, hgroup, header, footer {
display: block
}
time, mark {
display: inline
}
At first, I thought they may be relying on LESS, SASS, or some other CSS processor where you can go beyond the default CSS syntax. After looking at your CSS though, it is all just regular CSS.
You can have class values be capitalized (hence .PlusBadge, .PlusOne, etc.), and you can also capitalize your HTML elements (LI, A, etc.). Most people don’t do that, and many style guides (such as Google’s) don’t encourage it. The second box of CSS you posted is applying a display value to a bunch of HTML elements. While it doesn’t look like it, time and mark are HTML elements that you can use in your markup
Most people don’t do that, and many style guides (such as Google’s) don’t encourage it.
Exactly. That’s the point. This is a stylesheet from Google (blogger) itself. So wondering why the difference in conventions, given Google’s own style guide.
