Download - 專業前端 都如何管理 CSS
http://www.slideshare.net/stubbornella/object-oriented-css/26-Build_HTML_from_the_component_library
.btn{display:inline-block;padding:.375rem1rem;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border:1pxsolidtransparent;border-radius:.25rem;}
.btn-primary{color:#fff;background-color:#0275d8;border-color:#0275d8;}
card + list-group + heading
card + grid + button
.card{…}
.card.btn{…}
X
.text-primary{color:blue;}
.text-accent{color:red;}
.text-blue{color:blue;}
.text-red{color:red;}
>
1. ....
.menu{//4 }.article{//8 }
.side{//4 }.content{//8 }
.side{//4 }.content{//8 }.ad{//4 }
.col-4{//4 }
.col-8{//8 }
1. 2. sass Framework 3. Framwork 4. @mixin 5.
6. uitilities
CSS
1. 2. 3. mixin4. ...
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
sass/||–all.scss||–base/||–components/||–helpers/||–layout/||–pages/||–themes/||–vendors/
Bootstrap
_variable
_utilities
_header
_index
_admin
_jqueryUi