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:
- 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.
- 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
- Use VS->Debug->windows-> DOM Explorer -> select element and look through the styles and trace style for the desired element.
- Keeping the common css rules across projects into
- 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.
- Layout rules have been most challenging at least in the beginning when using
display: -ms-flexbox. Over a period of time, there is understanding of how it works. Debugging issues here require a separate post though.
- Using WinJS builtin styles whenever possible since they are well tested and work for multiple layouts of the page. For example:
.win-type-ellipsisto auto-ellipse the text if it is too long for the space.
win-ring win-mediumfor a medium size progress ring. msdn pages for each control and skimming though the ui-light.css gives access to such classes.
- 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”.