3. Direct Wines
SUGGESTED
STRUCTURE
One common stylesheet for all brands. Includes all essential modules
4
header.scss
nav.scss
footer.scss
global.scss
bootstrap.scss
font_awesome.scss
5. Direct Wines
account.css
HTML OUTPUT
Link these files to each page
6
brand.css
This compiled css will include all brand specific
and global css for general styling (utilities,
header, footer, nav, etc.) and will be used on all
pages.
This compiled css file will include all page
specific modules (account, registration,
product, etc.) and will be used only on that
particular page.
7. Direct Wines
WHAT CAN WE DO
8
Use dashes in css No camel casing
Use underscore for file
names
No underscores
Use higher specificity
selectors to override rules
No div.container
selectors
8. Direct Wines
SELECTORS SPECIFICITY
Specificity is calculated by counting various components of your CSS and expressing them in a form (a,b,c,d)
3
Calculating specificity
❖ Element, Pseudo Element: d = 1 – (0,0,0,1)
❖ Class, Pseudo class, Attribute: c = 1 –
(0,0,1,0)
❖ Id: b = 1 – (0,1,0,0)
❖ Inline Style: a = 1 – (1,0,0,0)
9. Direct Wines 3
Sylesheet Page Template
brand_homepage.scss Home homepage_template_responsive.jsp
us_registration.scss Log in/Registration registration_template.jsp
About Us aboutus_template.jsp
us_customerservice.scss Customer Service customerservice_template.jsp
brand_cmlp.scss Latest Offers cm_template.jsp
Wine Clubs walkup_template.jsp
us_offer_list.scss Our Top Picks offerlist_template_responsive.jsp
us_search_results.scss Search base_template.jsp
us_product.scss Product product_template_responsive.jsp
us_checkout.scss Checkout shoppingcart_template.jsp
Your Guide about_wine.jsp
us_account.scss Account responsive_template.jsp
