This document provides suggestions for structuring CSS stylesheets and naming conventions. It recommends having one common stylesheet for all brands that includes essential modules like headers, footers, and global styles. It also suggests structuring brand-specific CSS and page-specific CSS separately. The document discusses using dashes in CSS selectors and underscores in file names for clarity. It provides an example stylesheet and page template mapping and explains specificity calculations for selector rules.

1. CSS Style Guide
Presented by :
Andrew Mykhalchuk
Front-end Developer
Direct Wines

2. Direct Wines
Now… Let’s talk about
2
Stylesheets and modules structure

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

4. Direct Wines
SUGGESTED
STRUCTURE
One common stylesheet for all brands. Includes all essential modules
5
buttons.scss
brand.scss
variables.scss
global.scss
fonts.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.

6. Direct Wines 7
Now… Let’s talk about
NAMING
CONVENTIONS

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