When building a WinJS based windows store, many a times I run into the issue – css rule is not getting picked. then, begins the debugging to figure out what is going wrong. Sometimes, it has been quick and get to the solution; sometimes end up pulling hairs and decide to take it up some other day; sometime eliminate the problem by removing it thinking about ROI; sometimes strike a reasonable workaround.

Here is the listing of things that have come handy some time or the other:

1. Seriously checking that css file is included in the html file; The path of the css file is indeed correct and does not have any typo. For example: today, I hit a case where I missed one directory in the folder path of the css file in a big size project.
2. class names or the id name in the css selector does not match with what is mentioned in the html file. Following a naming convention reduces the probability of this cause over a period of time. For example – I happen to use some of these rules a) use camel casing for id b) use ‘-‘ as word separators in class names c) try to keep class names to 2-3 words d) pick class names that are intuitively represent the element
3. Use VS->Debug->windows-> DOM Explorer -> select element and look through the styles and trace style for the desired element.
4. Keeping the common css rules across projects into default.css.
5. Prefixing the css selector long enough that it does not conflict with rules in other pages. For example – I happen to use a convention to give a unique class name for each page in the fragment element and use '.mypage.fragment' prefix in the css rules for the page.
6. Layout rules have been most challenging at least in the beginning when using display: -ms-grid or display: -ms-flexbox . Over a period of time, there is understanding of how it works. Debugging issues here require a separate post though.
7. Using WinJS builtin styles whenever possible since they are well tested and work for multiple layouts of the page. For example: .win-type-ellipsis to auto-ellipse the text if it is too long for the space. win-ring win-medium for a medium size progress ring. msdn pages for each control and skimming though the ui-light.css gives access to such classes.
8. There can be many more items. but need to get back to work. Today I found this nice article that explains how a multiple rules fight over a given css selector in the section “cascading order”.

More later.