專業前端都如何管理 CSS

Transcript of 專業前端都如何管理 CSS

https://csscollege.hackpad.com/

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;}

1. 2. (btn or button)3. (

)4. ( outline )5. (bolder)

http://codepen.io/Wcc723/pen/KzXZaz

http://codepen.io/Wcc723/pen/JXrMvZ

http://codepen.io/Wcc723/pen/EKwQEJ

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. ....

https://www.google.com/design/spec/style/color.html#color-color-schemes

.menu{//4 }.article{//8 }

.side{//4 }.content{//8 }

.side{//4 }.content{//8 }.ad{//4 }

.col-4{//4 }

.col-8{//8 }

http://codepen.io/Wcc723/pen/oxGEMX

http://www.hexschool.com/

https://www.facebook.com/hexschool/

1. 2. sass Framework 3. Framwork 4. @mixin 5.

6. uitilities

CSS

https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

1. 2. 3. mixin4. ...

https://github.com/zurb/foundation-sites/tree/develop/scss

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…