Comments on: Semantic CSS naming best practices http://blog.mixu.net/2009/08/12/semantic-css-naming-best-practices/ When I read what I write I learn what I think Mon, 06 Sep 2010 09:54:06 +0000 hourly 1 http://wordpress.org/?v=3.0.1 By: Better web application interface markup: lessons from theme frameworks « Mixu's tech blog http://blog.mixu.net/2009/08/12/semantic-css-naming-best-practices/#comment-6699 Better web application interface markup: lessons from theme frameworks « Mixu's tech blog Tue, 20 Jul 2010 10:24:40 +0000 http://blog.mixu.net/?p=372#comment-6699 [...] I spend a while (re)thinking what the layout structure should be in terms of CSS and HTML (e.g. semantic naming, organizing CSS [...] [...] I spend a while (re)thinking what the layout structure should be in terms of CSS and HTML (e.g. semantic naming, organizing CSS [...]

]]> By: 10-month retrospective on writing this blog | Mixu's blog http://blog.mixu.net/2009/08/12/semantic-css-naming-best-practices/#comment-4996 10-month retrospective on writing this blog | Mixu's blog Sat, 20 Mar 2010 21:39:50 +0000 http://blog.mixu.net/?p=372#comment-4996 [...] with. I find myself referring back to my own posts (e.x. on how to setup DKIM on Centos, or how to implement semantic naming in CSS), which I think is an indication that what I write has longer-lasting value to [...] [...] with. I find myself referring back to my own posts (e.x. on how to setup DKIM on Centos, or how to implement semantic naming in CSS), which I think is an indication that what I write has longer-lasting value to [...]

]]> By: admin http://blog.mixu.net/2009/08/12/semantic-css-naming-best-practices/#comment-865 admin Thu, 10 Sep 2009 05:39:12 +0000 http://blog.mixu.net/?p=372#comment-865 So for IE7 you might have rules like: body[id^=controller] { shared style specs } and body[id^=controller-action] { style for individual page } and body[id=controller-action-page-2] { style for page one of the action }. I am still supporting IE6 in most of my work, however, so I have not tested this out that much. So for IE7 you might have rules like: body[id^=controller] { shared style specs } and body[id^=controller-action] { style for individual page } and body[id=controller-action-page-2] { style for page one of the action }.

I am still supporting IE6 in most of my work, however, so I have not tested this out that much.

]]> By: admin http://blog.mixu.net/2009/08/12/semantic-css-naming-best-practices/#comment-864 admin Wed, 09 Sep 2009 23:34:44 +0000 http://blog.mixu.net/?p=372#comment-864 Strictly speaking I would prefer not having #header-navigation and #footer-navigation, because these names are based on the location of the navigation content, rather than purely semantic. The prefix is a bit redundant. If you have navigation links at the top and bottom of a page, why not make a .navigation -class, and have that inside the #header and #footer. That way you can have for example: #header .navigation a and #footer .navigation a. (Or perhaps #content .paging for something like a paging control.). This way the class name/ID does not need to change completely (just the CSS), even if you decide to move the navigation out of the header, and you can have shared properties for the "base" class. Body ID is probably the hardest one to answer properly. The choice of naming scheme really depends on whether the majority of your content needs to be tweaked on a page-by-page or a controller-by-controller basis. When CSS3 selectors become supported in IE (http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/), it will be possible to do a "id begins with X" -type match, at which point I think the long "controller-action-extra" form will be preferred. (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx ) Right now, if you need IE6 support, you need to trade off between the two. With a IE7 minimum, you can use "|=" or "^=" and can use either plain "controller" or "controller-action-..". Strictly speaking I would prefer not having #header-navigation and #footer-navigation, because these names are based on the location of the navigation content, rather than purely semantic. The prefix is a bit redundant.

If you have navigation links at the top and bottom of a page, why not make a .navigation -class, and have that inside the #header and #footer. That way you can have for example: #header .navigation a and #footer .navigation a. (Or perhaps #content .paging for something like a paging control.). This way the class name/ID does not need to change completely (just the CSS), even if you decide to move the navigation out of the header, and you can have shared properties for the “base” class.

Body ID is probably the hardest one to answer properly. The choice of naming scheme really depends on whether the majority of your content needs to be tweaked on a page-by-page or a controller-by-controller basis. When CSS3 selectors become supported in IE (http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/), it will be possible to do a “id begins with X” -type match, at which point I think the long “controller-action-extra” form will be preferred. (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx )

Right now, if you need IE6 support, you need to trade off between the two. With a IE7 minimum, you can use “|=” or “^=” and can use either plain “controller” or “controller-action-..”.

]]> By: ellisgl http://blog.mixu.net/2009/08/12/semantic-css-naming-best-practices/#comment-859 ellisgl Wed, 09 Sep 2009 22:56:13 +0000 http://blog.mixu.net/?p=372#comment-859 If you have navigation links at the top and bottom - why not do #header-navigation and #footer-navigation? Also with the body id. I was thinking of different of controller-action-extra - ie index-page-2. Your thoughts? If you have navigation links at the top and bottom – why not do #header-navigation and #footer-navigation?
Also with the body id. I was thinking of different of controller-action-extra – ie index-page-2.

Your thoughts?

]]>