Building a plugin , what to plan first Jquery or CSS ??

Building a plugin , what to plan first Jquery or CSS ??

Hey guys , I have a total noob question , but i still got to ask . when you build a JS plugin that also has alot of CSS involved , what do you do ? 

- Plan out the CSS first ? or the JS/Jquery 1st or both simultaniously ? 

for example , if your building a simple carasoul , would you first define 
- how to hide the slides ? 
- speed of transition etc ? 
- what size the carasoul sould be etc in the CSS and then move on to the Jquery part of it ? 

Ex. below is how the bootstrap carasoul CSS is built :: 

  1. .carousel {
  2.   position: relative;
  3. }
  4. .carousel-inner {
  5.   position: relative;
  6.   overflow: hidden;
  7.   width: 100%;
  8. }
  9. .carousel-inner > .item {
  10.   display: none;
  11.   position: relative;
  12.   -webkit-transition: 0.6s ease-in-out left;
  13.   -o-transition: 0.6s ease-in-out left;
  14.   transition: 0.6s ease-in-out left;
  15. }
  16. .carousel-inner > .item > img,
  17. .carousel-inner > .item > a > img {
  18.   line-height: 1;
  19. }
  20. @media all and (transform-3d), (-webkit-transform-3d) {
  21.   .carousel-inner > .item {
  22.     -webkit-transition: -webkit-transform 0.6s ease-in-out;
  23.     -o-transition: -o-transform 0.6s ease-in-out;
  24.     transition: transform 0.6s ease-in-out;
  25.     -webkit-backface-visibility: hidden;
  26.     backface-visibility: hidden;
  27.     -webkit-perspective: 1000;
  28.     perspective: 1000;
  29.   }
  30.   .carousel-inner > .item.next,
  31.   .carousel-inner > .item.active.right {
  32.     -webkit-transform: translate3d(100%, 0, 0);
  33.     transform: translate3d(100%, 0, 0);
  34.     left: 0;
  35.   }
  36.   .carousel-inner > .item.prev,
  37.   .carousel-inner > .item.active.left {
  38.     -webkit-transform: translate3d(-100%, 0, 0);
  39.     transform: translate3d(-100%, 0, 0);
  40.     left: 0;
  41.   }
  42.   .carousel-inner > .item.next.left,
  43.   .carousel-inner > .item.prev.right,
  44.   .carousel-inner > .item.active {
  45.     -webkit-transform: translate3d(0, 0, 0);
  46.     transform: translate3d(0, 0, 0);
  47.     left: 0;
  48.   }
  49. }
  50. .carousel-inner > .active,
  51. .carousel-inner > .next,
  52. .carousel-inner > .prev {
  53.   display: block;
  54. }
  55. .carousel-inner > .active {
  56.   left: 0;
  57. }
  58. .carousel-inner > .next,
  59. .carousel-inner > .prev {
  60.   position: absolute;
  61.   top: 0;
  62.   width: 100%;
  63. }
  64. .carousel-inner > .next {
  65.   left: 100%;
  66. }
  67. .carousel-inner > .prev {
  68.   left: -100%;
  69. }
  70. .carousel-inner > .next.left,
  71. .carousel-inner > .prev.right {
  72.   left: 0;
  73. }
  74. .carousel-inner > .active.left {
  75.   left: -100%;
  76. }
  77. .carousel-inner > .active.right {
  78.   left: 100%;
  79. }
  80. .carousel-control {
  81.   position: absolute;
  82.   top: 0;
  83.   left: 0;
  84.   bottom: 0;
  85.   width: 15%;
  86.   opacity: 0.5;
  87.   filter: alpha(opacity=50);
  88.   font-size: 20px;
  89.   color: #ffffff;
  90.   text-align: center;
  91.   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  92. }
  93. .carousel-control.left {
  94.   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  95.   background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  96.   background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  97.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  98.   background-repeat: repeat-x;
  99.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  100. }
  101. .carousel-control.right {
  102.   left: auto;
  103.   right: 0;
  104.   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  105.   background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  106.   background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
  107.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  108.   background-repeat: repeat-x;
  109.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  110. }
  111. .carousel-control:hover,
  112. .carousel-control:focus {
  113.   outline: 0;
  114.   color: #ffffff;
  115.   text-decoration: none;
  116.   opacity: 0.9;
  117.   filter: alpha(opacity=90);
  118. }
  119. .carousel-control .icon-prev,
  120. .carousel-control .icon-next,
  121. .carousel-control .glyphicon-chevron-left,
  122. .carousel-control .glyphicon-chevron-right {
  123.   position: absolute;
  124.   top: 50%;
  125.   z-index: 5;
  126.   display: inline-block;
  127. }
  128. .carousel-control .icon-prev,
  129. .carousel-control .glyphicon-chevron-left {
  130.   left: 50%;
  131.   margin-left: -10px;
  132. }
  133. .carousel-control .icon-next,
  134. .carousel-control .glyphicon-chevron-right {
  135.   right: 50%;
  136.   margin-right: -10px;
  137. }
  138. .carousel-control .icon-prev,
  139. .carousel-control .icon-next {
  140.   width: 20px;
  141.   height: 20px;
  142.   margin-top: -10px;
  143.   line-height: 1;
  144.   font-family: serif;
  145. }
  146. .carousel-control .icon-prev:before {
  147.   content: '\2039';
  148. }
  149. .carousel-control .icon-next:before {
  150.   content: '\203a';
  151. }
  152. .carousel-indicators {
  153.   position: absolute;
  154.   bottom: 10px;
  155.   left: 50%;
  156.   z-index: 15;
  157.   width: 60%;
  158.   margin-left: -30%;
  159.   padding-left: 0;
  160.   list-style: none;
  161.   text-align: center;
  162. }
  163. .carousel-indicators li {
  164.   display: inline-block;
  165.   width: 10px;
  166.   height: 10px;
  167.   margin: 1px;
  168.   text-indent: -999px;
  169.   border: 1px solid #ffffff;
  170.   border-radius: 10px;
  171.   cursor: pointer;
  172.   background-color: #000 \9;
  173.   background-color: rgba(0, 0, 0, 0);
  174. }
  175. .carousel-indicators .active {
  176.   margin: 0;
  177.   width: 12px;
  178.   height: 12px;
  179.   background-color: #ffffff;
  180. }
  181. .carousel-caption {
  182.   position: absolute;
  183.   left: 15%;
  184.   right: 15%;
  185.   bottom: 20px;
  186.   z-index: 10;
  187.   padding-top: 20px;
  188.   padding-bottom: 20px;
  189.   color: #ffffff;
  190.   text-align: center;
  191.   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  192. }
  193. .carousel-caption .btn {
  194.   text-shadow: none;
  195. }
  196. @media screen and (min-width: 768px) {
  197.   .carousel-control .glyphicon-chevron-left,
  198.   .carousel-control .glyphicon-chevron-right,
  199.   .carousel-control .icon-prev,
  200.   .carousel-control .icon-next {
  201.     width: 30px;
  202.     height: 30px;
  203.     margin-top: -15px;
  204.     font-size: 30px;
  205.   }
  206.   .carousel-control .glyphicon-chevron-left,
  207.   .carousel-control .icon-prev {
  208.     margin-left: -15px;
  209.   }
  210.   .carousel-control .glyphicon-chevron-right,
  211.   .carousel-control .icon-next {
  212.     margin-right: -15px;
  213.   }
  214.   .carousel-caption {
  215.     left: 20%;
  216.     right: 20%;
  217.     padding-bottom: 30px;
  218.   }
  219.   .carousel-indicators {
  220.     bottom: 20px;
  221.   }
  222. }
So would you define such CSS first and cast it in stone , and then move on to building the Jquery/JS part ?? 

P.S. :: i Like the idea of building the CSS first and then moving on to doing the Jquery part . 

Thank you. 

Gautam.