best approach to css?

is there one?


Answers

C
Christiana.Beier

Sorry for coming off as rude but asking this question is like asking "what is best approach to learning X"....

this is a very open ended question. CSS is a syntax for describing how HTML elements should be displayed.

B
bfpgresearcher

* { display: none !important; }

E
Eleazar_Schneider

media queries are amazing...

  1. @media screen and (min-width: 480px) {
  2. body {
  3. background-color: lightgreen;
  4. }
  5. }

Determine breakpoints for your app and then use media queries to control the different screen sizes.

Also START WITH mobile design first. It's a lot easier to accommodate larger screen sizes later on rather than work the other direction (desktop first).

E
Ellsworth19

FLEX BOX! :)

K
Kyler_Flatley7

USE SASS!!! it lets you do cool stuff like define variables etc...

  1. $grey: #e8e8e8;
  2. $red: #96151d;
  3. $lightGrey: #f8f8f8;
  4. $charcoal: #c8c8c8;
  5. $black: #474747;
  6. $clearRed:#fce9ea;
  7. $codeGreen:#ecfdf0;
  8. $lightBrown:rgb(218, 144, 89);
  9. $darkBrown:rgb(154, 78, 22);
  10. $lightGreen:rgb(88, 180, 73);
  11. $darkGreen:rgb(33, 127, 18);
  12. $darkRed:#86131b;
  13. $white:#ffffff;
  14. $break-small:200px;
  15. $break-large:900px;
  16. $break-medium:400px;
  17. body {
  18. background-color:#e8e8e8;
  19. padding:0;
  20. padding-top:80px;
  21. margin:0;
  22. font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  23. }
  24. a {
  25. cursor:pointer;
  26. }
  27. input:focus, textarea:focus {outline:0;}
  28. input:-internal-autofill-selected {
  29. border:1px solid $grey;
  30. padding:10px 5px;
  31. font-size:14px;
  32. }
  33. .red {
  34. color:$red !important;
  35. }

this is just an example...see how we can set variables like $red

S
Sunny.Kozey

use a framework like bootstrap. it will provide a lot of styling out of the box so you don't have to reinvent the wheel.