Bootstrap: .p-* class names conflict with Microformats

Created on 27 Jun 2016  路  5Comments  路  Source: twbs/bootstrap

Microformats uses one and two letter prefixings to indicate parsing rules for html.

http://microformats.org/wiki/microformats2

'h-*' for root class names, e.g. 'h-card'
'p-*' for plain (text) properties, e.g. 'p-name'
'u-*' for URL properties, e.g. 'u-photo'
'dt-*' for date/time properties, e.g. 'dt-bday'
'e-*' for embedded markup properties, e.g. 'e-note'.

(also x- for experimental)

Obviously the new p- prefixes clash with this and will distort parsing of any website using the new prefixes. And these prefixes are already quite well established on 10s of thousands of sites (they have been using it since 2009)

confirmed css v4

Most helpful comment

Using utility classes like this to effectively add inline styles is initially convenient, but does lead to messy markup over time. Rather than p- and m- prefixes why not padding- and margin- ?
I wrote about this tendency of pretending classes like this aren't inline style tags: http://www.kevinmarks.com/u-means-style.html

All 5 comments

@mdo How would you feel about changing these to e.g. .pos-* ?

this is where "let's just (ab)use class names" rather than using a custom attribute/data- attribute comes back to bite the microformats project...but in principle if it's no big problem for us it's probably a nice courtesy to not immediately break their stuff...

Using utility classes like this to effectively add inline styles is initially convenient, but does lead to messy markup over time. Rather than p- and m- prefixes why not padding- and margin- ?
I wrote about this tendency of pretending classes like this aren't inline style tags: http://www.kevinmarks.com/u-means-style.html

After gzipping, the longer classnames shouldn't have a big impact on HTML page size or the minified CSS.

Partially addressed in #20684. No further changes planned to those classes though, so there is still some conflict.

Was this page helpful?
0 / 5 - 0 ratings