search

fac-14 / OSCEBossKey

Weeks 13-16 > Tech for Better project: An app to help medical students revise for their exams
https://oscebosskey.herokuapp.com/
MIT License
4 stars 2 forks source link

Manual styling #107

Closed sima-qian closed 5 years ago

sima-qian commented 5 years ago
  1. Moved all @import <filename>.scss statements to assets/index.scss -- this is the only place they should be from now on! Take care of the ordering -- files declaring Sass variables should be at the top.
  2. The only .scss file imported to a component is index.scss in components/App.js -- no need to import elsewhere!
  3. Even when working in a specifically-named .scss file, do not apply style to generic elements (e.g. <a>), as the CSS is compiled into a single file so will be applied across the entire app.
codecov-io commented 5 years ago

Codecov Report

Merging #107 into master will not change coverage. The diff coverage is n/a.

Impacted file tree graph

@@          Coverage Diff           @@
##           master    #107   +/-   ##
======================================
  Coverage    91.3%   91.3%           
======================================
  Files          10      10           
  Lines          46      46           
  Branches        2       2           
======================================
  Hits           42      42           
  Misses          4       4
Impacted Files Coverage Δ
src/components/BackButton.js 100% <ø> (ø) :arrow_up:
src/components/TickButton.js 66.66% <ø> (ø) :arrow_up:
src/components/StationName.js 100% <ø> (ø) :arrow_up:
src/components/HistoryCaseRevision.js 77.77% <ø> (ø) :arrow_up:
src/components/Header.js 100% <ø> (ø) :arrow_up:

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 367e516...71b7a83. Read the comment docs.

martingaston commented 5 years ago

This looks great and perhaps we're already quite close to a styled-components sort of implementation as it stands.

Perhaps there's value in aligning on a naming convention like <component-name>--[<element>|<class>] to ensure consistency - the CSS might become more monolithic this way (I could imagine some duplication without solid maintenance) but I think it would stop this individual situation and Parcel will at least minify it down.