Using CSS Modules

Using CSS Modules
0.0 0

#1

I recently came across this method and found it very interesting, so I wanted to ask the community for their thoughts on the subject. Have you guys tried implementing this method on one of your projects? If yes, how would you compare it to existing CSS naming conventions and methodologies like BEM?


#2

I’ve never even heard of this. Thanks for providing me with some reading!


#3

It made my head hurt !
CSS Modules


#4

It just seems like two different ways to solve the same problem - one with a library and one with some self-discipline and a standard. They both work, they both have their own pluses and minuses. IMHO, CM is a little easier, but BEM forces you to think about naming more. And CM is pretty close to how styling is used in React Native.


#5

@Xiija why did it made your head hurt?


#6

If you guys need further reading, here is a more recent article from tutsplus and it seems even big companies are using it or atleast implementing something similar to it.


#7

I’m not the sharpest pencil in the box,
…still tryin to get used to Mixins!


#8

@Xiija I’m having the same frustrations right now :smiley:


#9

All these CS, BEM, whatever I don’t understand. Maybe I’m just an old dog who can’t learn new tricks.

The way I use and organize my CSS is like these:
LESS format

#articlepage {
    h1 { 
       color: red;
       // more stuff
    }
   .title {
       font-size: 1.4em;
       // more stuff
   }
}


#searchresults {
     h1 {
        color: blue;
    }
    .title {
        color: green;
        // more stuff
    }
}

Now, in my html code, if I’m on the searchresults page, I just do a

<div id="searchresults">
     <h1>Your Results</h1>
     <h2 class="title">Lorem ipsum blah blah</h2>
</div>

The style and formatting of my h1 only depends on what page I’m using it on, by using a div id on the outermost div.

The HTML looks clean and I don’t have verbose looking, and long name classes, that almost looks like in-line style elements.


#10

I still use plain CSS with the occasional custom properties (“variables”). I tried setting up SASS once and spent two hours trying to install it and gave up. It involved Installing Ruby and using Node. Too complicated. I gave up. There’s an Atom plug-in but that never worked. Got errors. I have no patience for those kinds of things.


#11

@Soupedenuit you can use prepros if you’re on windows and linux, or codekit if you are a mac user.


#12

Thanks @jmmrdev! I’ll check it out. I know there are a few options - I’ll have to try again. Using a CSS preprocessor appeals to me.