Re: Best Practice for View Control and HTML/CSS classes to make it look "good"
Best Practice would depend on whether you want to just deal with views or whether you want to ditch OneUI altogether. I don't think I can give you a great deal of information on best practice, but if you'll permit me, I can ramble on a bit about what I have done with styling views recently.
On my most recent project, I had the benefit of a designer doing mocked up layouts and colour palettes for me. So, I ditched OneUI completely and went for some useful pre-rolled css (normalize.css, 960 Grid and formalize.me were my starting points). These libs take care of the grid, resets and making forms look the "same" on different platforms respectively. I created a theme to hold all of these and then added one more CSS file called custom.css where I would put my own css.
For the views, I wanted to have rollover highlighting for rows. I had toyed with the idea of adding various classes to headers, rows and cells etc. , but I wanted the least amount of maintenance possible. In the end, I settled on adding one class to the data table and using various CSS selectors to provide targeting of styles.
I added the class "data" to the table holding the view and then used the following css to style it and to get rollovers on the tr tags:
.data {
border-collapse: collapse;
font-size: 0.95em;
text-align: left;
width: 100%;
}
.data > thead > tr {
background: none repeat scroll 0 0 #999999;
border: 1px solid #B6292D;
}
.data > thead > tr > th {
border-left: 1px solid #EEEEEE;
color: white;
}
.data > thead > tr > th:first-child {
border-left: 0 none;
}
.data > tbody > tr {
border-bottom: 1px dashed #777777;
}
.data > tbody > tr:hover {
background: none repeat scroll 0 0 #E1E1E1;
border-bottom: 1px dashed #777777;
cursor: pointer; /* Added to the row to show that it is clickable via a javascript onclick event */
}
Now as you may know the selectors used in CSS can affect load times. Some of the selectors used here aren't particularly efficient, but the trade off for maintainability was worth it for me. More info on that: http://css-tricks.com/efficiently-rendering-css/