1

I have read lots of articles about advantages and disadvantages of camelCase and Underscore naming conventions. I've always prefered camelCase mainly because it saves bytes.

But learning about BEM, I've been really confused. BEM naming is more readable but '_','__' and long names add file size. Also I couldn't found any js plugins with it. So which one is better for qualified webpage?

P.S. sorry for bad English. Any opinion is appreciated

FrontDev
  • 837
  • 5
  • 19

1 Answers1

0

For css I can't recall I ever seen camel case (in professional work).

For me I use BEM when I work on private projects. I tend to use double underscore like .banner__image and .banner__image--large (you get it if you read the BEM specs).

At work our team use BEM with a modification though, only one underscore or hyphen (for modifiers) .banner_image and .banner_image-large.

If not using BEM you probably should write classes with a hyphen (-). Like this .banner-image and .banner-image-large. For examples you can look at Twitters bootstrap structure with class names, or any other site infact.

Dejan.S
  • 18,571
  • 22
  • 69
  • 112
  • thanks! but what I should do, if I use BEM but have to import js/jq plugins, which are mainly not use BEM? – FrontDev Oct 19 '14 at 10:49
  • @FrontDev Most plugins let you use your own class to set your lets say Image slider, like `$('.banner__container').slider();`, in cases you have to use a specific plugin that doesn't, first it's poorly constructed and you should look for other options. Second if you have to use it, it's ok to have a class that doesn't match your naming convention. Hope this brings clarity. Or are you referring to names on the actual files now? – Dejan.S Oct 19 '14 at 10:57
  • Thanks! Clear. I've just been asked to use BEM for the whole project, I thought this will limit my abilities to use different plugins. If it's ok, than np. I guess you are experienced in it, what about file size than? Is it less important than readable names? – FrontDev Oct 19 '14 at 11:17
  • @FrontDev I don't worry to much about file size when writing css. Of cause you don't still don't write classes like `.banner_image_previous_arrow_left_middle_thirdy_pixel_gray`, but maybe `.banner_previous_arrow`. You do minification for production css/js and that usually does it good for file size. It's worth so much to have more obvious names when it's time for maintenance of code/html/css/js. – Dejan.S Oct 19 '14 at 11:40
  • thanks for clear answers, I think I should change my approach to this.If you can also demonstrate some ready examples with js too, will be fine. Thanks again! – FrontDev Oct 19 '14 at 12:30
  • @FrontDev Sure. What you want to know about the js? Variables names? – Dejan.S Oct 19 '14 at 12:33
  • As I have to use BEM for the whole project, I would like to find image gallery, popup plugins with Bem, not to write them from scratch. If you can give some links about that, would be great!! I researched for 2days but no result(( – FrontDev Oct 19 '14 at 13:02
  • @FrontDev Why do you feel it has to be BEM or nothing? In some cases you just have to go with what is out there. I use bxslider reguarly for projects. Check http://bxslider.com/examples/thumbnail-pager-1, in this example you have a image with thumbs slider. You can set the name to be whatever for the slider, and you can make custom html for the thumbs (that means you can use BEM for naming). Is there anything more you wonder just ask. I'm basically by the computer all day today)) – Dejan.S Oct 19 '14 at 13:20
  • Oh, I think I'm slowly getting into it)))) Won't disturb you much. Thanks so much!!! You are my saver ;) – FrontDev Oct 19 '14 at 13:29
  • @FrontDev You could use https://github.com/bem/bem-core if you need javascript abstraction level under BEM. There are some tutorials http://bem.info/tutorials/bem-js-tutorial/ – Lebovski Oct 20 '14 at 10:37
  • @FrontDev Our team don't use BEM for js so coulden't tell you. I think it's important here that you go with one thing at first. Like the css with BEM, to get a flow how it works. Else it's easy you spend a lot of time and get stuck trying to figure how to do on css, js, ect... and you get very litle done. Our prefered way is. BEM for HTML/CSS. File names are camelCase. Variable names in js are camelCase. Some settings variables we use are all lowercase. To each is own. – Dejan.S Oct 20 '14 at 10:52
  • 2
    You may use CamelCaseBlock__camelCaseElem notation, it's just fine. If we ever have a chance to start everything from scratch we'd possibly do the same for ourselves (I'm talking about Yandex team, invented BEM). – tadatuta Oct 21 '14 at 12:30
  • @FrontDev I stil woulden't recommend camelCase for css. – Dejan.S Oct 24 '14 at 12:06
  • Yup, during my long research I found out that camelCase don't effect on file size too much, opposite to this names with underscore are very understandable(I use BEM).So I prefer BEM for CSS.Thanks to all – FrontDev Oct 24 '14 at 16:24