Namespace and scope
We play nicely with others, so we namespace all our classes to avoid any conflicts. Therefore, we should properly prefix our classes unless we have a specific reason to use the global namespace.
Component classes vs. Style classes
Person 1 has created a small webapp that allows reordering of paragraphs on a page.
Person 2 picks up the code later to add some titles to the webapp. He likes the paragraph style, so he re-uses the classname for a header:
What happens now is the header added becomes movable which adds / breaks the functionality of the webapp since the header element was not intended to be part of the interaction!
Class naming conventions
Follow the convention stated in the Class Name Conventions document.
- Demo Selectors:
- Demo Style:
- Fluid Selectors:
- Fluid Style:
Basic Demo Markup Structure
- Comments are nice, especially for large blocks or mark-up that isn't self explanatory.
- DOM selectors first, styles following. i.e.
<p class="flc-movable fl-movable demo-disabled">
- Wrap markup inside a container with a properly name-spaced class or ID.
- Avoid using global namespaced styles. If using global styles, commenting the style is recommended.
- Add comments to CSS if the reason for properties is not clear. i.e. If changing the inherited margin from 2px to 0px may not be abundantly clear. Or if there are styles specific to browsers or bugs.
- to be written.